feat(skills): add PatternFly 6 development skills for Claude Code#6
feat(skills): add PatternFly 6 development skills for Claude Code#6
Conversation
| @@ -0,0 +1,190 @@ | |||
| --- | |||
There was a problem hiding this comment.
This covers a lot of ground — I think would make sense to break it into smaller, focused skills.
For example: an import checker, a class migration scanner, and a project scaffolder. The general PF6 conventions (tokens, component-first, accessibility) could live as an agent in plugins/pf-react/agents/ since that's knowledge the AI should always follow.
CLAUDE.md
Outdated
| @@ -0,0 +1 @@ | |||
| @AGENTS.md | |||
There was a problem hiding this comment.
Root files like CLAUDE.md, README.md, and .gitignore have changed significantly since this PR was opened — these modifications will conflict with main. A skill contribution should only add files under plugins/, not modify root config.
Introduce a comprehensive Claude Code skill that provides AI-assisted PatternFly 6 development guidance. The skill auto-activates when working with @patternfly imports, PF6 components, charts, chatbot, or component-groups. New files: - SKILL.md: Main skill definition with import patterns, styling rules, and accessibility guidance - IMPORTS.md: Complete import patterns for all PatternFly packages - STYLING.md: CSS classes and design token reference - TROUBLESHOOTING.md: Common issues and solutions - README.md: Installation and usage documentation - Validation scripts for import patterns and legacy class detection - Documentation fetching script for live updates from GitHub Also adds AGENTS.md and CLAUDE.md for AI agent guidance and updates the main README with Claude Code skill installation instructions. --- Signed-off-by: Guillaume Moutier <guimou@users.noreply.github.com> Co-authored-by: Claude
nicolethoen
force-pushed
the
claude-skill
branch
from
8a6965c to
fa430f7
Compare
| description: Always-on PatternFly 6 React conventions for imports, styling, and accessibility. Use when writing, reviewing, or refactoring PatternFly React code. | ||
| --- | ||
|
|
||
| # PatternFly 6 Conventions |
There was a problem hiding this comment.
Most of this overlaps with the existing pf-coding-standards agent (imports, CSS, class prefixes, semantic tokens, accessibility baseline). Since everything in this plugin is PF6-specific anyway, shouldn't this content just live in pf-coding-standards rather than adding a second agent with overlapping rules?
|
|
||
| ```bash | ||
| rg "pf-v5-|pf-v4-|pf-c-|pf-u-|pf-l-|pf-m-" src | ||
| rg "--pf-v6-|--pf-global-" src |
There was a problem hiding this comment.
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.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThree new skill documentation files were added under Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
jpuzz0
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
plugins/pf-react/skills/pf-class-migration-scanner/SKILL.md (1)
1-38: LGTM!The skill frontmatter is compliant, the migration scope is clear, and the scan commands and replacement guidance are well-defined. The output format provides a good structure for findings.
Optional: clarify token scanning intent
Line 22 searches for
--pf-v6-|--pf-global-tokens, and line 29 recommends semantic tokens over "legacy token names." If--pf-v6-and--pf-global-are intended to be flagged as legacy/non-semantic tokens, consider explicitly stating this in the "Migration scope" section (lines 14-16) to make the intent clearer.For example:
## Migration scope - Legacy versioned classes (`pf-v5-*`, `pf-v4-*`) - Unversioned legacy classes (`pf-c-*`, `pf-u-*`, `pf-l-*`) -- Old token usage where semantic token equivalents exist +- Non-semantic tokens (`--pf-v6-*`, `--pf-global-*`) where semantic token equivalents existThis is purely optional and doesn't affect functionality.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@plugins/pf-react/skills/pf-class-migration-scanner/SKILL.md` around lines 1 - 38, The Migration scope should explicitly state that the patterns `--pf-v6-` and `--pf-global-` are considered legacy/non-semantic token usages to be flagged by the scanner; update the "Migration scope" section in SKILL.md to add a bullet noting these token patterns are legacy token names (and therefore subject to replacement with semantic tokens like `--pf-t--*`), and optionally add a short clarifying sentence near the existing scan commands showing that `rg "--pf-v6-|--pf-global-"` targets legacy token usage.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@plugins/pf-react/skills/pf-class-migration-scanner/SKILL.md`:
- Around line 1-38: The Migration scope should explicitly state that the
patterns `--pf-v6-` and `--pf-global-` are considered legacy/non-semantic token
usages to be flagged by the scanner; update the "Migration scope" section in
SKILL.md to add a bullet noting these token patterns are legacy token names (and
therefore subject to replacement with semantic tokens like `--pf-t--*`), and
optionally add a short clarifying sentence near the existing scan commands
showing that `rg "--pf-v6-|--pf-global-"` targets legacy token usage.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 5b822aa7-608b-40e1-b5c2-4ea95ad7f789
📒 Files selected for processing (3)
plugins/pf-react/skills/pf-class-migration-scanner/SKILL.mdplugins/pf-react/skills/pf-import-checker/SKILL.mdplugins/pf-react/skills/pf-project-scaffolder/SKILL.md
jpuzz0
left a comment
jpuzz0
left a comment
There was a problem hiding this comment.
Addressed remaining comments. Otherwise these 3 new skills LGTM.
3 participants
Closes #4
Summary
@patternflyimportsNew Files
skills/patternfly-6-development/SKILL.mdskills/patternfly-6-development/IMPORTS.mdskills/patternfly-6-development/STYLING.mdskills/patternfly-6-development/TROUBLESHOOTING.mdskills/patternfly-6-development/README.mdskills/patternfly-6-development/scripts/*.shAGENTS.mdCLAUDE.mdTest Plan
~/.claude/skills/patternfly-6-development/Summary by CodeRabbit