# AI Prompt Guidance for PatternFly Development
Guidelines for creating effective prompts when using AI coding assistants with PatternFly React applications.
## Why Specific Prompts Matter
Based on workshop feedback, AI coding assistants work best with PatternFly when given specific, detailed prompts. Vague prompts often result in:
- Non-existent component usage → See [Common Issues](../troubleshooting/common-issues.md#ai-coding-specific-issues)
- Incorrect styling approaches → See [Styling Standards](./styling-standards.md)
- Missing accessibility features → See [Guidelines](./README.md#accessibility-requirements)
## Essential Prompt Template
```
Create a [FEATURE] using PatternFly v6 React components. Requirements:
- Follow PatternFly component composition patterns (see styling-standards.md)
- Use component props for spacing/layout before considering utility classes
- Ensure keyboard accessibility with proper ARIA labels
- Verify all components exist in PatternFly packages before using
- [SPECIFIC_FEATURE_REQUIREMENTS]
- Reference: [LINK_TO_RELEVANT_DOCS]
```
## Prompt Strategy by Use Case
### Dashboard/Data Pages
**Key prompt additions:**
```
- Use proper component hierarchy: PageSection > Stack > Grid > Card
- For tabular data, use PatternFly Table component (see data-display/table.md)
- For charts, follow charts/README.md import requirements (/victory path)
```
### Forms
**Key prompt additions:**
```
- Follow form structure: PageSection > Form > FormGroup > ActionGroup
- Use ActionGroup component for button spacing (see styling-standards.md)
```
### Navigation/Layout
**Key prompt additions:**
```
- Use existing AppLayout structure in src/app/AppLayout/
- Follow routing patterns in src/app/routes.tsx
- Reference layout/README.md for proper component usage
```
### Charts Integration
**Key prompt additions:**
```
- CRITICAL: Import from @patternfly/react-charts/victory (see charts/README.md)
- Follow chart color guidance in charts/README.md
```
### Chatbot Integration
**Key prompt additions:**
```
- Follow dynamic import patterns from chatbot/README.md
- Reference official PatternFly chatbot demos (links in chatbot/README.md)
```
## Error Prevention Strategies
### Component Existence
**Prompt addition:**
```
"Before using any component, verify it exists by checking:
- Core components: @patternfly/react-core documentation
- Tables: @patternfly/react-table documentation
- Charts: @patternfly/react-charts documentation
See troubleshooting/common-issues.md for common non-existent components to avoid."
```
### Styling Approach
**Prompt addition:**
```
"Follow the component-first approach from styling-standards.md:
1. Use proper component composition first
2. Use component props second
3. Use utility classes only as last resort
Do NOT use CSS modules syntax (className={styles.*}) - this project doesn't support them."
```
### Import Paths
**Prompt addition:**
```
"Use correct import paths as documented in:
- Charts: charts/README.md (must include /victory)
- Chatbot: chatbot/README.md (dynamic imports)
- Core: standard @patternfly/react-core imports"
```
## Deployment Prompting
**When requesting deployment guidance:**
```
"After creating the prototype, provide deployment instructions following deployment-guide.md.
Include build command and choose appropriate service (Surge for quick sharing, Vercel for professional demos)."
```
## Complete Example Prompt
```
Create a user management page using PatternFly v6 with these requirements:
Component Structure:
- Follow component hierarchy from styling-standards.md: PageSection > Stack > Toolbar + Table
- Use Table component with proper props (borders, gridBreakPoint) - see data-display/table.md
- Use ActionGroup for buttons (provides spacing automatically)
Technical Requirements:
- Verify all components exist in PatternFly packages before using
- Follow accessibility guidelines from guidelines/README.md
- Handle loading/error/empty states as shown in troubleshooting/common-issues.md
Project Integration:
- Follow existing routing patterns in src/app/routes.tsx
- Integrate with existing AppLayout structure
- Match patterns from existing pages in src/app/
References:
- Component patterns: styling-standards.md
- Table specifics: data-display/table.md
- Accessibility: guidelines/README.md
- Error handling: troubleshooting/common-issues.md
```
## Quick Reference for Prompts
- **Component composition patterns**: [styling-standards.md](./styling-standards.md)
- **Table usage**: [data-display/table.md](../components/data-display/table.md)
- **Chart requirements**: [charts/README.md](../charts/README.md)
- **Chatbot implementation**: [chatbot/README.md](../chatbot/README.md)
- **Common errors to avoid**: [common-issues.md](../troubleshooting/common-issues.md)
- **Deployment options**: [deployment-guide.md](./deployment-guide.md)
## Best Practices Summary
1. **Reference documentation** - Include links to relevant .md files in your prompts
2. **Be specific about structure** - Mention component hierarchy requirements
3. **Prevent common errors** - Reference troubleshooting guide proactively
4. **Verify existence** - Ask AI to confirm components exist before using
5. **Include context** - Reference existing project files when applicable
The key is combining specific prompting with references to the detailed guidance already documented in this project's other files.
