---
paths:
  - "framework/agents/frontend/**"
---

# Frontend Agent Rules

## Design System Rules

The **brique** agent (`15-frontend/01-brique.md`) uses design rules for pixel-perfect Figma to shadcn/ui conversion.

**Setup:** `/figma:create-design-system-rules` generates `.figma/design-system-rules.json`

**Workflow:**
1. Phase 0: Auto-detect stack (React/Next.js or Vue/Nuxt) + load design rules
2. Phase 1-3: Convert with exact token mapping
3. Output: Framework-adapted code (95-100% fidelity with rules, ~70-80% without)

**Documentation:** `agents/frontend/design-system/README.md`
**Schema:** `schemas/figma-design-system-rules.schema.json`

## Frontend Agents

| Agent | File | Purpose |
|-------|------|---------|
| Orchestrateur | `00-orchestrateur.md` | Coordinates all frontend agents |
| Brique | `01-brique.md` | Figma/HTML to shadcn/ui (adaptive) |
| Frontend QA | `02-frontend-qa.md` | 3 modes: full, landing, shadcn |
| Visual Auditor | `03-visual-auditor.md` | Chrome DevTools screenshots/analysis |
| Backoffice | `04-backoffice-auditor.md` | Next.js + Shadcn consistency |
| SVG Analyzer | `05-svg-analyzer.md` | Component inventory + SVG |
| Pencil | `06-pencil-generator.md` | Next.js to .pen files |
| Shadcn Migrator | `07-shadcn-migrator.md` | Migration plan to pure shadcn/ui |

## Plugin Marketplace

| Plugin | Install | Usage |
|--------|---------|-------|
| `ui-ux-pro-max-skill` | `/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill` | Lookup palettes (161), font pairings (57), UX guidelines (99), chart types (25) par industrie/stack — complémentaire à `/hue` (génération) |

## Checklists

Reference checklists in `15-frontend/checklists/`:
- UX, UI, Tailwind, shadcn, code quality