Customization

## Project-Specific Anti-Patterns

**DON'T** use red for primary CTAs - reserved for destructive actions
**DON'T** use icons without labels - our users aren't familiar with icon meanings
**DON'T** hide critical functionality behind menus - must be visible by default
**DON'T** use auto-playing animations - accessibility concern for our audience

## Design Tokens

### Colors
- Primary: oklch(55% 0.2 250) (Deep blue)
- Secondary: oklch(70% 0.15 180) (Teal)
- Success: oklch(65% 0.18 145) (Green)
- Error: oklch(60% 0.2 25) (Warm red)
- Neutrals: Tinted toward primary (0.01 chroma at 250°)

### Typography
- Display: Plus Jakarta Sans (700, 800)
- Body: Inter (400, 500, 600)
- Mono: JetBrains Mono (code only)

### Spacing Scale
- Base unit: 4px
- Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96

## Component Patterns

### Buttons
- Primary: Filled background, high contrast text
- Secondary: Border only, transparent background
- Ghost: No border, text only
- Never use more than one primary button per screen section

### Cards
- Use sparingly - not everything needs a container
- Border only (no shadows) for consistency
- 16px padding on mobile, 24px on desktop
- Never nest cards inside cards

### Forms
- Labels above inputs, not as placeholders
- Error messages inline below field
- Required indicator: red asterisk after label
- Validation on blur, not on every keystroke

## Audit Requirements

When running /audit, also check:

1. **Accessibility**
   - WCAG AAA compliance (not just AA)
   - All interactive elements have 48x48px touch targets (not just 44x44px)
   - Skip links on all pages
   
2. **Performance**
   - Lighthouse score > 95 for all metrics
   - First Contentful Paint < 1s
   - No CLS issues
   
3. **Internationalization**
   - All text must support 40% expansion (for German)
   - RTL support for Arabic and Hebrew
   - Date formats use Intl API

## Polish Standards

When running /polish, ensure:

- All animations use our custom easing: cubic-bezier(0.22, 1, 0.36, 1)
- Transition durations: 200ms for interactions, 300ms for state changes
- Focus indicators are 3px solid with our primary color
- All images have aspect-ratio set to prevent CLS
- No TODO comments in production code
- TypeScript strict mode with zero 'any' types

project/
├── .cursorrules                    # General rules + Design Context
└── .cursor/
    ├── skills/
    │   └── frontend-design/
    │       ├── SKILL.md           # Impeccable skill
    │       └── reference/         # Design references
    └── rules/
        └── impeccable.md          # Custom design rules

project/
└── .claude/
    ├── skills/
    │   └── frontend-design/
    │       ├── SKILL.md
    │       └── reference/
    ├── rules/
    │   ├── design-context.md      # From /teach-impeccable
    │   ├── design-tokens.md       # Token documentation
    │   └── component-patterns.md  # Pattern library
    └── commands/
        └── *.md                   # All 17 commands

project/
├── GEMINI.md                      # Main file with imports
├── GEMINI.design-context.md       # Design context
├── GEMINI.tokens.md               # Design tokens
└── .gemini/
    └── commands/
        └── *.toml                 # All 17 commands

This project uses Impeccable for frontend design.

@./GEMINI.design-context.md
@./GEMINI.tokens.md

All commands available: /audit, /critique, /normalize, etc.

project/
└── .codex/
    ├── prompts/
    │   └── *.md                   # Commands as prompts
    ├── skills/
    │   └── frontend-design/
    │       ├── SKILL.md
    │       └── reference/
    └── rules/
        └── design-context.md      # From /teach-impeccable

Run comprehensive accessibility audit beyond WCAG AA.

Check for:
- WCAG AAA compliance
- Screen reader compatibility (test with NVDA/JAWS)
- Keyboard-only navigation
- Focus indicator visibility (3:1 contrast minimum)
- Touch target sizes (48x48px minimum, not just 44x44px)
- Color independence (works without color)
- Reduced motion support
- High contrast mode support
- Text zoom to 200%

Generate detailed report with severity ratings and WCAG references.

---
name: audit-accessibility
description: Comprehensive accessibility audit beyond WCAG AA
args:
  - name: area
    description: Specific component or page to audit
    required: false
---

Run comprehensive accessibility audit beyond WCAG AA.

[Same content as above]

description = "Comprehensive accessibility audit beyond WCAG AA"

prompt = """
Run comprehensive accessibility audit beyond WCAG AA.

[Content here]

Focus area: {{args}}
"""

---
name: brand-check
description: Verify designs match brand guidelines
---

Review designs against brand guidelines:

1. **Color Palette**
   - Primary: oklch(55% 0.2 250) only
   - Secondary: oklch(70% 0.15 180) only
   - No other colors except neutrals
   - All neutrals tinted toward 250°

2. **Typography**
   - Display: Plus Jakarta Sans only (700, 800 weights)
   - Body: Inter only (400, 500, 600 weights)
   - Mono: JetBrains Mono for code only
   - No other fonts

3. **Spacing**
   - All spacing must be multiple of 4px
   - No arbitrary values (23px, 31px, etc.)

4. **Components**
   - All buttons use standard variants (primary, secondary, ghost)
   - No custom button styles
   - Cards use border-only style, no shadows

Report any deviations with specific locations and corrections.