)}
{state === 'updated' && (
{/* Updated state showing pattern in action */}
[Updated state - pattern effect visible]
)}
{/* Pattern Benefits */}
Pattern Benefits:
✓
Benefit 1
✓
Benefit 2
)
}
export default [PatternName]Example
```
### Step 4: Implement Interactive Behaviors
Your demo should:
✅ **Show Pattern in Action**
- Before/after states
- Clear visual change when pattern activates
- Smooth animations with framer-motion
✅ **Include Interactive Controls**
- Buttons to trigger pattern
- Input fields to control behavior
- Toggles for different modes
✅ **Demonstrate Benefits**
- Show how pattern improves UX
- Explain what's happening
- Display results/outcomes
✅ **Handle Edge Cases**
- Loading states with spinners
- Error states with recovery
- Empty states when appropriate
✅ **Use Design System**
- Import from `@/components/ui/`
- Use existing Button, Card, Badge components
- Follow Tailwind utilities
- Support dark mode with `dark:` prefix
### Step 5: Add Framer Motion Animations
Most demos use animations to show the pattern:
```typescript
// State transitions with AnimatePresence
{isExpanded && (
Content
)}
// Hover effects
Click me
// Progress indicators
```
### Step 6: Create Component Tests
```typescript
// src/components/examples/__tests__/[PatternName]Example.test.tsx
import React from 'react'
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { [PatternName]Example } from '../[PatternName]Example'
describe('[PatternName]Example', () => {
it('renders without crashing', () => {
render(<[PatternName]Example />)
expect(screen.getByTestId('[pattern-slug]-demo')).toBeInTheDocument()
})
it('displays initial state', () => {
render(<[PatternName]Example />)
expect(screen.getByText(/[initial state text]/)).toBeInTheDocument()
})
it('responds to user interaction', async () => {
const user = userEvent.setup()
render(<[PatternName]Example />)
const button = screen.getByRole('button', { name: /[action text]/ })
await user.click(button)
await waitFor(() => {
expect(screen.getByText(/[updated state text]/)).toBeInTheDocument()
})
})
it('shows loading state during interaction', async () => {
const user = userEvent.setup()
render(<[PatternName]Example />)
const button = screen.getByRole('button', { name: /[action text]/ })
await user.click(button)
// Loading state visible briefly
expect(screen.getByRole('button')).toHaveAttribute('disabled')
})
it('matches snapshot', () => {
const { container } = render(<[PatternName]Example />)
expect(container).toMatchSnapshot()
})
it('resets to initial state', async () => {
const user = userEvent.setup()
render(<[PatternName]Example />)
// Trigger update
await user.click(screen.getByRole('button', { name: /[action text]/ }))
// Click reset
await user.click(screen.getByRole('button', { name: /Reset/ }))
expect(screen.getByText(/[initial state text]/)).toBeInTheDocument()
})
it('is accessible', () => {
render(<[PatternName]Example />)
const button = screen.getByRole('button')
expect(button).toHaveAccessibleName()
})
})
```
### Step 7: Test the Component
```bash
# Run tests for your demo
npm test -- --testPathPattern="[PatternName]Example"
# Check coverage
npm run test:coverage -- --testPathPattern="[PatternName]Example"
# Watch mode for development
npm run test:watch -- [PatternName]Example
```
### Step 8: Register Component in Pattern Data
Add demo component to pattern definition:
```typescript
// src/data/patterns/patterns/[pattern-slug]/index.ts
import { [PatternName]Example } from '@/components/examples/[PatternName]Example'
export const [patternSlug]Pattern = {
// ... other pattern data
demo: {
component: [PatternName]Example,
description: 'Interactive demonstration of [pattern name]',
}
}
```
### Step 9: Verify in Browser
```bash
npm run dev
# Visit http://localhost:3000/patterns/[pattern-slug]
# Test the interactive demo
# Check on mobile (responsive design)
# Test dark mode toggle
```
## Demo Component Best Practices
### ✅ Do's
1. **Keep it simple** - Focus on demonstrating ONE pattern clearly
2. **Make it interactive** - User should be able to interact with demo
3. **Show before/after** - Clearly display pattern effect
4. **Use existing components** - Reuse Button, Card, Badge from design system
5. **Add explanations** - Comments and text describing what's happening
6. **Test thoroughly** - Every interaction should be tested
7. **Support dark mode** - Use `dark:` Tailwind utilities
8. **Make it responsive** - Works on mobile, tablet, desktop
### ❌ Don'ts
1. **Don't make it complex** - Keep demo focused and clean
2. **Don't ignore accessibility** - ARIA labels, keyboard navigation
3. **Don't hardcode sizes** - Use Tailwind utilities
4. **Don't forget edge cases** - Handle loading, error, empty states
5. **Don't skip tests** - Every demo needs tests
6. **Don't use external fonts/images** - Use what's already available
7. **Don't forget snapshot tests** - Include for UI regression detection
## Batch Generate All Missing Demos
```bash
npm run generate-missing-demos
```
This command:
1. Identifies patterns without demo components
2. Generates skeleton components for all
3. Runs tests to verify
4. Reports which demos still need implementation
## Commands Reference
```bash
# Start dev server
npm run dev
# Run component tests
npm test -- --testPathPattern="Example"
# Run specific demo tests
npm test -- [PatternName]Example.test.tsx
# Test coverage for demos
npm run test:coverage -- --testPathPattern="examples"
# Generate missing demos
npm run generate-missing-demos
```
## Demo Structure in Pattern Page
When completed, demos appear on pattern pages:
```
/patterns/[pattern-slug]
├── Pattern Title & Description
├── Interactive Demo Component ← Generated here
├── Code Examples
├── Guidelines
├── Considerations
└── Benefits
```
## Integration with Pattern Development Skill
When using Pattern Development skill:
- Demo component generation is part of checklist
- Demos are validated in step "Build/update interactive demo component"
- Tests are part of "Add/update component tests"
---
**Goal**: Create engaging, interactive demos that showcase each AI design pattern in action, making it clear how the pattern improves user experience and AI interactions.
---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/imsaif) — claim your Tome and manage your conversions.