Starting a new project? For a quick start with PatternFly React, use the patternfly/patternfly-react-seed app. It provides a basic build, layout, and scaffolding for new PatternFly applications, including recommended tooling and project structure.
Essential rules and guidelines for AI coders working with PatternFly React applications.
- Setup Rules - Project initialization requirements
- Quick Start - Essential setup steps
- Environment Rules - Development configuration
- PatternFly Guidelines - Core development principles
- Component Rules - Component structure requirements
- Styling Rules - CSS and styling requirements
- AI Prompt Guidance - How to write effective AI prompts
- Deployment Guide - How to deploy prototypes
- Layout Rules - Page structure requirements
- Table Component Rules - Table usage and best practices
- Data View Component Rules - Data view usage and best practices
- Charts Rules - PatternFly Charts requirements
- Chatbot Rules - PatternFly Chatbot requirements
- Common Issues - Problem resolution rules
- External Links - Official documentation links
- Always use PatternFly v6 - Use
pf-v6-prefixed classes only - Component-first approach - Use PatternFly components before custom solutions
- Consult documentation - Reference PatternFly.org for examples
- Follow accessibility - Implement proper ARIA labels and keyboard navigation
- Use utility classes - Prefer PatternFly utilities over custom CSS
- Handle states - Always implement loading, error, and empty states
Based on feedback, these rules prevent frequent AI-generated errors:
- ❌ No CSS modules syntax -
className={styles.x}doesn't work in this project - ❌ No non-existent components - Verify components exist before using
- ❌ No inline styles for layout - Use PatternFly utilities instead
- ✅ Chart imports must include
/victory- Critical for chart components - ✅ Always include accessibility attributes - Keyboard navigation and ARIA labels
- ✅ Use specific, detailed prompts - See AI Prompt Guidance
Each file contains:
- Rules - Specific requirements to follow
- Do's and Don'ts - Clear guidance on what to avoid
- Links - References to official PatternFly documentation
- Quick examples - Minimal code patterns when needed
For all rules and examples, consult both PatternFly.org and the official GitHub repository. When using AI tools, leverage context7 to fetch the latest docs from these sources.