|
| 1 | +# PatternFly React Seed - AI Development Guide |
| 2 | + |
| 3 | +## Project Overview |
| 4 | + |
| 5 | +This is a PatternFly v6 React seed application. It provides a basic build, layout, and scaffolding for new PatternFly applications using webpack, TypeScript, and React Router. |
| 6 | + |
| 7 | +## Documentation |
| 8 | + |
| 9 | +Always consult the `ai-documentation/` directory before generating or editing any PatternFly code. Start with `ai-documentation/README.md` for navigation to all guidelines, component rules, and best practices. |
| 10 | + |
| 11 | +Key documentation files: |
| 12 | +- `ai-documentation/guidelines/README.md` - Core development principles |
| 13 | +- `ai-documentation/guidelines/component-architecture.md` - Component structure |
| 14 | +- `ai-documentation/guidelines/styling-standards.md` - CSS and styling requirements |
| 15 | +- `ai-documentation/guidelines/ai-prompt-guidance.md` - Writing effective AI prompts |
| 16 | +- `ai-documentation/components/layout/README.md` - Page structure requirements |
| 17 | +- `ai-documentation/components/data-display/README.md` - Data display patterns |
| 18 | +- `ai-documentation/troubleshooting/common-issues.md` - Problem resolution |
| 19 | + |
| 20 | +## PatternFly MCP |
| 21 | + |
| 22 | +This project is configured to use the PatternFly MCP server for fetching up-to-date component documentation and schemas. Use these tools to get accurate, version-specific guidance: |
| 23 | + |
| 24 | +- `searchPatternFlyDocs` - Search for PatternFly components, design tokens, and guidelines |
| 25 | +- `usePatternFlyDocs` - Fetch full documentation and JSON schemas for specific components |
| 26 | + |
| 27 | +Always query the PatternFly MCP before using a component you're unfamiliar with to get the latest API, props, and usage examples. |
| 28 | + |
| 29 | +## Core Rules |
| 30 | + |
| 31 | +- **PatternFly v6 only** - Use `pf-v6-` prefixed CSS classes, never `pf-v5-` |
| 32 | +- **Component-first** - Use PatternFly components before custom solutions |
| 33 | +- **Accessibility** - Include proper ARIA labels and keyboard navigation |
| 34 | +- **Design tokens** - Use PatternFly CSS custom properties, not hardcoded values |
| 35 | +- **No CSS modules** - `className={styles.x}` does not work in this project |
| 36 | +- **Verify components exist** - Always confirm a component exists in `@patternfly/react-core` before using it |
| 37 | + |
| 38 | +## Commands |
| 39 | + |
| 40 | +- `npm run start:dev` - Start development server (port 9000) |
| 41 | +- `npm run build` - Production build |
| 42 | +- `npm test` - Run tests |
| 43 | +- `npm run type-check` - TypeScript type checking |
| 44 | +- `npm run lint` - ESLint |
| 45 | +- `npm run ci-checks` - Run all CI checks (type-check + lint + test coverage) |
| 46 | + |
| 47 | +## Project Structure |
| 48 | + |
| 49 | +``` |
| 50 | +src/ |
| 51 | + app/ |
| 52 | + AppLayout/ - Main page layout with masthead and sidebar navigation |
| 53 | + Dashboard/ - Dashboard page |
| 54 | + Support/ - Support page (empty state example) |
| 55 | + Settings/ - Settings pages (General, Profile) |
| 56 | + NotFound/ - 404 page |
| 57 | + routes.tsx - Route definitions and navigation config |
| 58 | + app.css - Custom CSS token overrides |
| 59 | +``` |
0 commit comments