Skip to content

Commit 8a6965c

Browse files
committed
feat(skills): add PatternFly 6 development skill for Claude Code
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
1 parent 8c557a5 commit 8a6965c

12 files changed

Lines changed: 1857 additions & 3 deletions

File tree

.gitignore

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,7 @@
55
.git/
66

77
# macOS
8-
.DS_Store
8+
.DS_Store
9+
10+
# Claude
11+
.claude

AGENTS.md

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# AGENTS.md
2+
3+
This file provides guidance to AI agents when working with code in this repository.
4+
5+
## Repository Purpose
6+
7+
This is a **documentation and AI knowledge base repository** for PatternFly development. It provides indexed documentation, guidelines, and best practices that AI coding tools (Cursor, Copilot, ChatGPT, Claude) can use to generate accurate PatternFly code.
8+
9+
**This repository contains no runnable code** - it consists of markdown documentation files that should be copied into target projects.
10+
11+
## Documentation Structure
12+
13+
- `.pf-ai-documentation/` - Main documentation directory
14+
- `README.md` - Table of contents and navigation hub
15+
- `setup/` - Project initialization and environment setup
16+
- `guidelines/` - Core development principles and standards
17+
- `components/` - Component-specific rules (layout, data display)
18+
- `charts/` - PatternFly Charts (Victory.js/ECharts) rules
19+
- `chatbot/` - PatternFly Chatbot implementation rules
20+
- `component-groups/` - React Component Groups rules
21+
- `troubleshooting/` - Common issues and solutions
22+
23+
- `.cursor/rules/` - Cursor IDE rules that auto-apply to PatternFly code
24+
25+
## Key PatternFly Development Rules
26+
27+
When generating or reviewing PatternFly code, always follow these rules:
28+
29+
### Version Requirements
30+
31+
- **Always use PatternFly v6** - Use `pf-v6-` prefixed classes only
32+
- Use `pf-t-` prefixed tokens over `pf-v6-` tokens (e.g., `var(--pf-t--global--spacer--sm)`)
33+
- Use `<Content component="h1">` instead of deprecated `<Text component="h1">`
34+
35+
### Import Patterns
36+
37+
**Charts (CRITICAL):**
38+
39+
```jsx
40+
// ✅ Correct - MUST include /victory
41+
import { ChartDonut } from '@patternfly/react-charts/victory';
42+
43+
// ❌ Wrong - causes "Module not found" errors
44+
import { ChartDonut } from '@patternfly/react-charts';
45+
```
46+
47+
**Chatbot:**
48+
49+
```jsx
50+
// ✅ Correct - use dynamic imports
51+
import { Chatbot } from '@patternfly/chatbot/dist/dynamic/Chatbot';
52+
53+
// ❌ Wrong
54+
import { Chatbot } from '@patternfly/chatbot';
55+
```
56+
57+
**Component Groups:**
58+
59+
```jsx
60+
// ✅ Correct - use dynamic imports
61+
import { BulkSelect } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
62+
```
63+
64+
### Required CSS Imports
65+
66+
```jsx
67+
import '@patternfly/patternfly/patternfly-charts.css'; // For charts
68+
import '@patternfly/chatbot/dist/css/main.css'; // For chatbot
69+
import '@patternfly/react-component-groups/dist/css/main.css'; // For component groups
70+
```
71+
72+
### Common AI Mistakes to Avoid
73+
74+
-`className={styles.x}` - CSS modules syntax doesn't work
75+
- ❌ Using non-existent components without verification
76+
- ❌ Inline styles for layout (use PatternFly utilities)
77+
- ❌ Hardcoded colors (use design tokens)
78+
- ❌ Missing accessibility attributes (ARIA labels, keyboard navigation)
79+
80+
## Reference Resources
81+
82+
- [PatternFly.org](https://www.patternfly.org/) - Primary documentation
83+
- [PatternFly React GitHub](https://github.com/patternfly/patternfly-react) - Source code and examples
84+
- [PatternFly React Seed](https://github.com/patternfly/patternfly-react-seed) - Recommended starter for new projects

CLAUDE.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@AGENTS.md

README.md

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,87 @@
11
# PatternFly AI Coding Support
22

33
## Who is this for?
4+
45
This repository is for individuals and AI agents who want to prototype PatternFly applications using the latest best practices, with AI assistance (Cursor, Copilot, ChatGPT, etc.).
56

67
## Quick Start (TL;DR)
8+
79
1. **Clone or copy this repo (or at least the `.pf-ai-documentation/` directory and `.cursor/rules/` files) into your project.**
810
2. **Open your project in Cursor or your preferred AI coding tool.**
911
3. (Optional) **Set up context7 MCP for always-up-to-date PatternFly docs.**
1012

1113
## Goal
14+
1215
The primary aim is to offer a comprehensive, AI-friendly knowledge base and starting point for prototyping PatternFly applications. By indexing relevant documentation and providing context files, this repo ensures that any AI model can deliver accurate, consistent, and best-practice guidance while you code.
1316

1417
## Core Components
18+
1519
The core components of this repository are the README and markdown files found throughout the project. These files provide indexed documentation, guidelines, and best practices to support AI-assisted PatternFly development, regardless of which AI coding tool you use.
1620

17-
- **Table of Contents:** See [`.pf-ai-documentation/README.md`](documentation/README.md) for a full table of contents and navigation to all rules, guides, and best practices.
21+
- **Table of Contents:** See [`.pf-ai-documentation/README.md`](.pf-ai-documentation/README.md) for a full table of contents and navigation to all rules, guides, and best practices.
22+
23+
## Claude Code Skill
24+
25+
For [Claude Code](https://claude.ai/code) users, this repository includes a ready-to-use skill that provides PatternFly 6 development guidance directly in your coding sessions.
26+
27+
### Installation
28+
29+
```bash
30+
# Clone and install the skill
31+
git clone https://github.com/patternfly/patternfly-ai-coding.git
32+
mkdir -p ~/.claude/skills
33+
cp -r patternfly-ai-coding/skills/patternfly-6-development ~/.claude/skills/
34+
```
35+
36+
Or for team sharing via your project:
37+
38+
```bash
39+
mkdir -p .claude/skills
40+
cp -r patternfly-ai-coding/skills/patternfly-6-development .claude/skills/
41+
git add .claude/skills/patternfly-6-development
42+
git commit -m "Add PatternFly 6 development skill"
43+
```
44+
45+
### Features
46+
47+
- **Automatic activation** when working with PatternFly components
48+
- **Import pattern guidance** for charts, chatbot, and component-groups
49+
- **CSS and styling rules** with design token reference
50+
- **Validation scripts** to check for common issues
51+
- **Live documentation** fetched from this repository
52+
53+
See [`skills/patternfly-6-development/README.md`](skills/patternfly-6-development/README.md) for full documentation.
1854

1955
## Using This Documentation with Cursor and AI Tools
2056

2157
> **Important:**
2258
> Simply providing a link to this repository is not enough for Cursor (or most AI tools) to load all the context and instructions. These tools only index files that are present in your local project workspace.
2359
2460
### Best Practice: Add Documentation Locally
61+
2562
To get the full benefit of these docs and rules:
63+
2664
1. **Clone or copy this repository (or at least the `.pf-ai-documentation/` directory and `.cursor/rules/` files) into your project.**
2765
2. **Open your project in Cursor (or your preferred AI coding tool).**
2866
3. **Keep your local docs up to date** by pulling changes from this repo as it evolves.
2967

3068
### Why Local Files Matter
69+
3170
- Cursor and similar tools only use files present in your local workspace for context and code search.
3271
- If the documentation and rules are not present locally, the AI will not "see" them, even if you provide a link.
3372

3473
### For Maximum Effectiveness
74+
3575
- Use context7 or another MCP server to supplement your local docs with the latest upstream PatternFly documentation.
3676
- Encourage your team to read and follow the local documentation and rules for consistent, best-practice PatternFly development.
3777

3878
## Setting Up context7 MCP for Latest Docs (Optional)
79+
>
3980
> **How to set up context7 MCP server:**
81+
>
4082
> 1. Ensure you have Node.js v18+ and an MCP-compatible client (e.g., Cursor, VS Code with MCP extension, Windsurf, Claude Desktop).
4183
> 2. Add context7 as an MCP server in your client's configuration. For example, in Cursor, add this to your `~/.cursor/mcp.json`:
84+
>
4285
> ```json
4386
> {
4487
> "mcpServers": {
@@ -49,10 +92,12 @@ To get the full benefit of these docs and rules:
4992
> }
5093
> }
5194
> ```
95+
>
5296
> 3. Save and restart your client/editor.
53-
> 4. For more details and setup instructions for other editors, see the official guide: https://github.com/upstash/context7#installation
97+
> 4. For more details and setup instructions for other editors, see the official guide: <https://github.com/upstash/context7#installation>
5498
5599
## Reference Documentation
100+
56101
- [PatternFly.org](https://www.patternfly.org/)
57102
- [PatternFly React GitHub Repository](https://github.com/patternfly/patternfly-react)
58103

0 commit comments

Comments
 (0)