Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions plugins/pf-react/skills/pf-class-migration-scanner/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
---
name: pf-class-migration-scanner
description: Scans for legacy PatternFly class usage and recommends PF6-safe replacements. Use when modernizing older PatternFly codebases.
---

# PF Class Migration Scanner

Locate legacy PatternFly class names and migration risks.

When migration recommendations are ambiguous, query the PatternFly MCP server first to verify the latest supported component patterns and tokens.

## Migration scope

- Legacy versioned classes (`pf-v5-*`, `pf-v4-*`)
- Unversioned legacy classes (`pf-c-*`, `pf-u-*`, `pf-l-*`)
- Legacy token patterns (`--pf-v6-*`, `--pf-global-*`) that should use semantic tokens (`--pf-t--*`)

## Scan commands

```bash
rg "pf-v5-|pf-v4-|pf-c-|pf-u-|pf-l-" src
rg "--pf-v6-|--pf-global-" src
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The pf-m- pattern here will flag every valid PF6 modifier class (pf-m-primary, pf-m-plain, etc.) since modifiers don't carry a version prefix in PF6. That's going to produce a lot of false positives.

```

## Replacement guidance

- Prefer PatternFly React component props and composition first.
- If a utility class is still needed, use `pf-v6-u-*` variants.
- Prefer semantic tokens (`--pf-t--*`) over hardcoded values and legacy token names.

## Output format

For each finding include:

- file path
- current class/token
- recommended PF6 replacement
- confidence (`high`, `medium`, `low`)
42 changes: 42 additions & 0 deletions plugins/pf-react/skills/pf-import-checker/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
---
name: pf-import-checker
description: Audits and fixes PatternFly import paths, with emphasis on charts, chatbot, and component-groups. Use when imports fail or PatternFly modules are unresolved.
---

# PF Import Checker

Find and fix invalid PatternFly import patterns.

Before proposing import fixes, use the PatternFly MCP server to confirm current package paths and examples from the latest docs.

## What to check

1. Charts imported from `@patternfly/react-charts` root (invalid for Victory components).
2. Chatbot imports not using `@patternfly/chatbot/dist/dynamic/*`.
3. Component-group imports not using `@patternfly/react-component-groups/dist/dynamic/*`.
4. Missing package CSS imports for features in use.

## Validation commands

```bash
rg "@patternfly/react-charts['\"]" src
rg "@patternfly/chatbot['\"]" src
rg "@patternfly/react-component-groups['\"]" src
```

## Correct import examples

```tsx
import { ChartDonut } from "@patternfly/react-charts/victory";
import { Chatbot } from "@patternfly/chatbot/dist/dynamic/Chatbot";
import { BulkSelect } from "@patternfly/react-component-groups/dist/dynamic/BulkSelect";
```

## Output format

Provide:

- offending file paths
- exact import lines to replace
- corrected import lines
- any CSS import additions needed
56 changes: 56 additions & 0 deletions plugins/pf-react/skills/pf-project-scaffolder/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
---
name: pf-project-scaffolder
description: Scaffolds PatternFly React projects with PF6-safe dependencies, imports, and starter layout. Use when creating a new PatternFly app or bootstrapping a migration sandbox.
---

# PF Project Scaffolder

Create a clean PatternFly React starting point with current conventions.

Use the PatternFly MCP server as the primary source for up-to-date component APIs, usage examples, and migration-safe setup guidance.

## Recommended starting point

Use the official PatternFly React seed repository first when possible.

```bash
git clone https://github.com/patternfly/patternfly-react-seed
cd patternfly-react-seed
npm install
npm run start:dev
```

## Required dependencies

```bash
npm install @patternfly/react-core @patternfly/react-icons @patternfly/react-table
```

Feature-based dependencies:

```bash
npm install @patternfly/react-charts victory
npm install @patternfly/chatbot
npm install @patternfly/react-component-groups
```

## Baseline app requirements

```tsx
import "@patternfly/react-core/dist/styles/base.css";
```

Add feature CSS only when relevant:

```tsx
import "@patternfly/patternfly/patternfly-charts.css";
import "@patternfly/chatbot/dist/css/main.css";
import "@patternfly/react-component-groups/dist/css/main.css";
```

## Initial quality checklist

- Uses PatternFly v6 classes and semantic tokens.
- Uses PatternFly components for layout (`PageSection`, `Stack`, `Grid`) before utility classes.
- Handles loading, error, and empty states for data views.
- Includes accessible names/labels for interactive controls.