mémoire

---
name: superpower
description: Default autonomous superagent mode — read designs, drive canvas, orchestrate agents, generate specs and code
user-invocable: false
model: opus
effort: max
---

# SUPERPOWER — Mémoire Autonomous Superagent

> Default operating mode. Claude operates as a fully autonomous design intelligence agent — reading designs, driving the canvas, orchestrating multi-agent workflows, generating specs and production code. Activates on every session.

## Freedom Level: Maximum

You don't wait for permission. You don't take shortcuts. You burn tokens because the output justifies every one. You operate the Figma canvas, the codebase, and the spec pipeline as one unified system.

## Core Loop

```
OBSERVE → PLAN → EXECUTE → VALIDATE → ITERATE
```

### 1. OBSERVE
- **Code Connect first**: `get_code_connect_map` — check existing component mappings before creating anything
- **Read the canvas**: `get_design_context` (preferred) or `figma_get_file_data`
- **Scan components**: `figma_search_components` (call at session start, nodeIds are session-scoped)
- **Inventory variables**: `figma_get_variables` / `get_variable_defs`
- **Check specs**: read `specs/` directory for existing specs
- **Understand before acting** — never create what already exists

### 2. PLAN (Atomic Decomposition)
Every design intent gets decomposed into atomic levels:
```
Intent: "Create a dashboard"
├── Page: Dashboard
├── Template: DashboardTemplate (sidebar-main layout)
├── Organisms: Sidebar, MetricsPanel, ChartSection, ActivityTable
├── Molecules: MetricCard, ChartContainer, TableRow, NavItem
└── Atoms: Button, Badge, Avatar, Icon, Label, Separator
```
Plan bottom-up. Build atoms → molecules → organisms → templates → pages.

### 3. EXECUTE
Use the MCP tool decision tree from `/figma-use`. Key rule: prefer `use_figma` for design-system-aware writes. Spawn parallel agents when possible (see `/multi-agent`).

### 4. VALIDATE (Self-Healing — MANDATORY)
Run the self-healing loop defined in `/figma-use`: CREATE → SCREENSHOT → ANALYZE → FIX → VERIFY (max 3 rounds). If stuck after 3 rounds, report clearly and suggest alternatives.

## Scripts Over Generated Code

Prefer running existing tools over writing code from scratch:
```
npx shadcn@latest add button     ← use this, don't hand-write button.tsx
memi generate MetricCard         ← use the spec pipeline
memi pull                        ← extract tokens from Figma
memi tokens                      ← export design tokens
```

Only generate custom code when no existing tool or command handles the task.

## Code Connect
Check `get_code_connect_map` before creating anything. If mapped → use it. If not → create, then map with `add_code_connect_map`. See `/figma-use` for full protocol.

## Token Burning Philosophy
- **Thoroughness > Speed** — read everything, understand context, then act
- **Self-healing > Hope** — always screenshot and validate
- **Multi-pass > Single-shot** — iterate until it's right
- **Parallel > Sequential** — spawn agents, work concurrently
- **Full pipeline** — don't stop at canvas; generate specs, code, and preview

## Skill Chaining
The superagent automatically chains skills based on context:
```
/figma-use → /figma-generate-library → /figma-generate-design → memi generate → memi preview
```
No manual invocation needed. Read context and activate the right skill.

## Rules
1. **Never skip self-healing** — screenshot everything you create
2. **Never hardcode values** — always bind to variables
3. **Never create floating elements** — always inside Section/Frame
4. **Never build top-down** — atoms first, pages last
5. **Always check Code Connect first** — use mapped components when they exist
6. **Always prefer `use_figma`** — for design-system-aware canvas writes
7. **Always generate specs** — every canvas element becomes a spec
8. **Always generate code** — every spec becomes React + Tailwind
9. **Always preview** — run `memi preview` to verify output

---
name: figma-use
description: Foundational Figma canvas skill — structure, Auto Layout, variables, MCP tools, self-healing loop
user-invocable: true
model: opus
effort: max
context:
  - skills/ATOMIC_DESIGN.md
---

# /figma-use — Foundational Figma Canvas Skill

> Base skill for all Figma operations. Teaches agents how Figma works — structure, Auto Layout, variables, MCP tools, and the mandatory self-healing loop. Load this before any /figma-* skill.

## Freedom Level: High

Agents have full canvas read/write access but must follow the self-healing protocol and never create floating elements.

## MCP Tool Decision Tree

This is the most important section. Choose the right tool for the job:

### Writing to Canvas
```
What are you trying to do?

CREATE a design using existing components/tokens:
  → use_figma (Official MCP)
  WHY: It understands your design system, returns Code Connect hints,
  and produces structured output. ALWAYS try this first.

RUN raw Plugin API code (batch ops, custom logic):
  → figma_execute (Console MCP)
  WHY: For operations use_figma doesn't support — complex scripts,
  bulk modifications, conditional logic.

INSTANTIATE an existing component:
  → figma_instantiate_component (Console MCP)
  WHY: Fastest way to create an instance of a known component.
  Call figma_search_components first to get the nodeId.

CREATE variables in bulk:
  → figma_batch_create_variables (Console MCP)
  WHY: 10-50x faster than individual figma_create_variable calls.

SET a single property:
  → figma_set_fills / figma_set_text / figma_resize_node
  WHY: Surgical single-property changes.
```

### Reading from Canvas
```
What do you need?

Design with code hints + screenshot:
  → get_design_context (Official MCP) ← PREFERRED
  Returns: code, screenshot, Code Connect snippets, annotations

Visual screenshot only:
  → get_screenshot (Official MCP) or figma_take_screenshot (Console)

Node properties and structure:
  → get_metadata (Official MCP)

Design tokens/variables:
  → get_variable_defs (Official) or figma_get_variables (Console)

Component search:
  → figma_search_components (Console) — call at SESSION START
  NOTE: nodeIds are session-scoped, never reuse from previous sessions

Code Connect mappings:
  → get_code_connect_map (Official MCP) — CHECK FIRST before creating
```

## Canvas Principles

### Structure Hierarchy
```
File → Page → Section → Frame → Component/Instance → Layer
```

### Auto Layout Rules
1. **Always use Auto Layout** — never absolute positioning unless overlays
2. Direction: `HORIZONTAL` or `VERTICAL`
3. Spacing: use design token values, never magic numbers
4. Padding: consistent (use `counterAxisSpacing` for cross-axis)
5. Sizing: prefer `FILL` over fixed width, `HUG` for content-sized elements
6. **GOTCHA**: `counterAxisSizingMode` only accepts `"FIXED"` or `"AUTO"`, never `"FILL"`

### Component Architecture (Atomic Design)
| Level | Figma Structure | Examples |
|-------|----------------|----------|
| Atom | Base component, no nested components | Button, Badge, Input, Label |
| Molecule | 2-5 atom instances composed | FormField (Label + Input + HelpText) |
| Organism | Molecules + atoms with state/logic | LoginForm, Sidebar, DataTable |
| Template | Page-level layout skeleton | DashboardTemplate, AuthTemplate |
| Page | Template + real content instances | Dashboard, LoginPage |

### Variables & Tokens
- **Always bind to variables** — never use raw hex colors or pixel values
- Token naming: `collection/category/name` (e.g., `colors/primary/500`)
- Support light/dark modes via variable modes
- Map to Tailwind: `var(--color-primary-500)` → `text-primary-500`

### Component Properties
- **Variant properties** for visual states (size, variant, state)
- **Boolean properties** for toggles (hasIcon, isDisabled)
- **Text properties** for editable content (label, placeholder)
- **Instance swap** for composable slots (leadingIcon, action)

## Code Connect (CHECK FIRST)

Before creating any component, check Code Connect:
```
1. get_code_connect_map → does this component have a code mapping?
2. If YES → use the mapped codebase component directly
   - Follow the returned prop interface
   - Respect component documentation links
   - Honor design annotations from the designer
3. If NO → create the component, then map it:
   - add_code_connect_map after creation
   - Map Figma properties → React props
```

## Canvas Operations

### Creating Elements
```
1. Check Code Connect → get_code_connect_map
2. Check if component exists → figma_search_components
3. If exists → figma_instantiate_component
4. If new design → use_figma (preferred) or figma_execute (raw)
5. Always place inside a Section or Frame (NEVER floating)
6. Bind all visual properties to variables
7. SCREENSHOT → validate → iterate
```

### Self-Healing Loop (MANDATORY)
After ANY visual creation or modification:
```
CREATE → SCREENSHOT → ANALYZE → FIX → VERIFY (max 3 rounds)
```
1. Execute the design change
2. Take screenshot with `figma_take_screenshot`
3. Analyze for:
   - Elements using "hug contents" instead of "fill container"
   - Inconsistent padding
   - Text/inputs not filling available width
   - Items not centered in their containers
   - Components floating on blank canvas
   - Raw hex values (should be variables)
   - Missing Auto Layout
   - `DROP_SHADOW` effects missing `blendMode: "NORMAL"`
4. Fix issues found
5. Final screenshot to confirm
6. Max 3 iterations — if still broken, report to user

### Figma API Gotchas
- `counterAxisSizingMode` only accepts `"FIXED"` or `"AUTO"` (not `"FILL"`)
- `DROP_SHADOW` effects require `blendMode: "NORMAL"`
- `figma.currentPage` cannot be set via MCP — work on current page
- `layoutGrow` only works inside Auto Layout parents
- Always `await figma.loadFontAsync()` before setting text

## Naming Conventions
| Element | Convention | Example |
|---------|-----------|---------|
| Components | PascalCase | `MetricCard`, `LoginForm` |
| Variants | camelCase property, PascalCase value | `size=Large` |
| Variables | kebab-case path | `colors/primary/500` |
| Pages | PascalCase | `Dashboard`, `AuthLogin` |
| Sections | Title Case | `Hero Section`, `Navigation` |

## Integration with Mémoire
- Canvas operations flow through Mémoire's WebSocket bridge (ports 9223-9232)
- Agent metadata (role, task, status) is broadcast to all connected plugins
- Design tokens extracted from Figma map to `src/figma/tokens.ts`
- Generated components land in `generated/` following atomic folder structure
- Specs are validated against Zod schemas before saving

---
name: figma-generate-design
description: Create new Figma screens and pages using existing components, variables, and design system
user-invocable: true
model: opus
effort: max
context:
  - skills/FIGMA_USE.md
  - skills/ATOMIC_DESIGN.md
---

# /figma-generate-design — Create Designs Using Existing Components

> Generate new screens and pages in Figma using your existing components, variables, and design system. Produces structured, spec-compliant layouts with full self-healing validation. Requires /figma-use.

## Freedom Level: High

Full creative freedom within the design system. Must use existing components and variables, never raw values.

## Prerequisites
- `/figma-use` foundational skill loaded
- Design system pulled (`memi pull`) or variables exist in file
- `figma_search_components` called this session (nodeIds are session-scoped)

## Workflow

### Step 1: Check Code Connect & Inventory
```
get_code_connect_map          → what's already mapped code ↔ Figma?
figma_search_components       → what components exist?
figma_get_variables           → what tokens are available?
```

**If Code Connect mappings exist**: use those components. Don't recreate.

### Step 2: Plan the Layout (Atomic Design)
Map the design to atomic levels:
```
Page: AuthLogin
├── Template: AuthTemplate (centered, max-w-md)
│   ├── Organism: LoginForm
│   │   ├── Molecule: FormField (email)
│   │   │   ├── Atom: Label
│   │   │   ├── Atom: Input
│   │   │   └── Atom: HelpText
│   │   ├── Molecule: FormField (password)
│   │   ├── Molecule: SocialLogin
│   │   │   ├── Atom: Button (Google)
│   │   │   ├── Atom: Separator
│   │   │   └── Atom: Button (GitHub)
│   │   └── Atom: Button (Submit)
│   └── Organism: Footer
```

### Step 3: Build Bottom-Up
1. **Atoms** — instantiate existing or create with `use_figma`
2. **Molecules** — compose atoms with Auto Layout
3. **Organisms** — compose molecules with state considerations
4. **Template** — page frame with responsive constraints
5. **Page** — fill template with real content

**Prefer `use_figma`** for design-aware writes. It understands your design system and returns structured output.

### Step 4: Apply Design Tokens
```
All visual properties MUST bind to variables:
  background → colors/surface/primary
  text       → colors/text/primary
  border     → colors/border/default
  spacing    → spacing/4, spacing/8, spacing/16
  radius     → radius/default, radius/lg
```
Never hardcode. If a token doesn't exist, create it with `figma_batch_create_variables` first.

### Step 5: Self-Healing Validation (MANDATORY)
Run the self-healing loop from `/figma-use`: CREATE → SCREENSHOT → ANALYZE → FIX → VERIFY (max 3 rounds).

### Step 6: Generate Spec & Code
After the design is validated:
```
memi spec component LoginForm → specs/components/LoginForm.json
memi spec page AuthLogin → specs/pages/AuthLogin.json
memi generate LoginForm → generated/components/LoginForm/
add_code_connect_map → establish Figma ↔ code mapping
```

## Layout Patterns

### Dashboard
```
Frame (VERTICAL, fill)
├── Header (HORIZONTAL, hug height, fill width)
│   ├── Logo + Title
│   └── Actions (avatar, notifications)
├── Content (HORIZONTAL, fill)
│   ├── Sidebar (VERTICAL, fixed 240px, fill height)
│   │   └── NavItems
│   └── Main (VERTICAL, fill)
│       ├── MetricsRow (HORIZONTAL, fill, gap=16)
│       │   └── MetricCard × 4 (fill, equal)
│       ├── ChartsRow (HORIZONTAL, fill, gap=16)
│       │   └── Chart × 2 (fill, equal)
│       └── TableSection (VERTICAL, fill)
```

### Auth Flow
```
Frame (VERTICAL, centered, max-480px)
├── Logo (centered)
├── Card (VERTICAL, fill width, padding=32)
│   ├── Heading + Subtext
│   ├── Form (VERTICAL, gap=16)
│   │   └── FormField × N
│   ├── Button (fill width)
│   └── Links (HORIZONTAL, centered)
```

### Marketing / Landing
```
Frame (VERTICAL, fill, gap=0)
├── Nav (HORIZONTAL, fixed, z-index)
├── Hero (VERTICAL, centered, min-h=600)
├── Features (grid 3-col, padding=80)
├── Social Proof (HORIZONTAL, scroll)
├── CTA (VERTICAL, centered, bg=primary)
└── Footer (VERTICAL, padding=40)
```

## Responsive Strategy
| Breakpoint | Width | Columns | Behavior |
|-----------|-------|---------|----------|
| Mobile | 375px | 1 | Stack vertical, full-width inputs |
| Tablet | 768px | 2 | Side-by-side where sensible |
| Desktop | 1280px | 3-4 | Full grid, sidebar visible |

Use `MIN_WIDTH` + `MAX_WIDTH` on content containers. `FILL` on flexible elements. `FIXED` only on sidebar, icons, avatars.

## Anti-Patterns
- Elements using "hug contents" when they should "fill container"
- Inconsistent padding between similar elements
- Text/inputs not filling available width
- Components floating on blank canvas (always use Section/Frame)
- Raw hex colors instead of variable bindings
- Fixed widths on elements that should be responsive
- Skipping the self-healing screenshot loop
- Using `figma_execute` when `use_figma` would work better
- Creating components that already exist in Code Connect

---
name: figma-generate-library
description: Generate Figma component library from React/shadcn codebase with Code Connect parity
user-invocable: true
model: opus
effort: max
context:
  - skills/FIGMA_USE.md
  - skills/ATOMIC_DESIGN.md
---

# /figma-generate-library — Create Component Library from Codebase

> Generate Figma components from your React/shadcn codebase, establishing Code Connect for perfect design-code parity. Requires /figma-use.

## Freedom Level: High

Full creative freedom for visual representation, but component structure must mirror the codebase exactly.

## Prerequisites
- `/figma-use` foundational skill loaded
- Codebase has shadcn/ui or similar component library
- `memi connect` active
- `figma_search_components` called this session

## Workflow

### Step 1: Check Existing Mappings
```
get_code_connect_map → what's already mapped?
```
**Skip components that already have Code Connect mappings.** Only create what's missing.

### Step 2: Scan Codebase Components
```
Read generated/ and src/components/ directories
Identify all React components with:
  - Props interface (variants, sizes, states)
  - shadcn/ui base components used
  - Tailwind classes → map to Figma properties
  - Atomic level (atom/molecule/organism)
```

### Step 3: Create Variables First (Batch)
Before components, ensure design tokens exist:
```
figma_batch_create_variables (up to 100 per call):
  colors/ → all color tokens (primary, secondary, destructive, etc.)
  spacing/ → 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64
  radius/ → none, sm, default, md, lg, xl, 2xl, full
  typography/ → font sizes, weights, line heights
```
**Always use batch tools** — 10-50x faster than individual calls.

### Step 4: Build Components Bottom-Up
```
1. Create or find "Design System" page
2. Create Section per atomic level:
   ├── Section "Atoms"
   ├── Section "Molecules"
   ├── Section "Organisms"
   └── Section "Templates"
3. For each component:
   a. Use use_figma (preferred) or figma_execute for creation
   b. Add variant properties matching React props
   c. Bind all visual properties to variables
   d. Apply correct sizing (hug/fill)
   e. Document with description
4. Arrange with figma_arrange_component_set
```

#### Atoms (shadcn/ui primitives)
Each atom becomes a **Component Set** with variant properties:
```
ComponentSet "Button"
├── variant=default, size=default
├── variant=destructive, size=default
├── variant=outline, size=sm
└── variant=ghost, size=lg

Properties:
  variant: default | destructive | outline | secondary | ghost | link
  size: default | sm | lg | icon
  state: default | hover | active | disabled | focused
  hasIcon: boolean
  label: text property
```

#### Molecules (composed atoms)
```
Component "FormField"
├── Label (instance of Atom/Label)
├── Input (instance of Atom/Input)
└── HelpText (instance of Atom/HelpText, optional)

Properties:
  state: default | error | success | disabled
  hasHelpText: boolean
  label: text
  placeholder: text
```

#### Organisms (composed molecules + atoms)
```
Component "LoginForm"
├── FormField (email)
├── FormField (password)
├── Checkbox (remember me)
├── Button (submit, fill width)
└── Links row

Properties:
  hasSocialLogin: boolean
  hasRememberMe: boolean
```

### Step 5: Self-Healing Loop (per component)
Run the self-healing loop from `/figma-use` for each component. Additionally verify: matches codebase visually, all variants render, properties documented, PascalCase naming.

### Step 6: Establish Code Connect (PRIMARY OUTPUT)
This is the most important step. Map every Figma component to code:
```
add_code_connect_map:
  Button → src/components/ui/button.tsx
  Input → src/components/ui/input.tsx
  Card → src/components/ui/card.tsx
  FormField → src/components/molecules/FormField.tsx
  LoginForm → generated/components/LoginForm/LoginForm.tsx
```

### Step 7: Generate Mémoire Specs
For each component created:
```
memi spec component Button
memi spec component FormField
memi spec component LoginForm
```

## shadcn/ui → Figma Mapping

| shadcn Component | Figma Type | Atomic Level | Key Properties |
|-----------------|-----------|-------------|----------------|
| Button | Component Set | Atom | variant, size, state, hasIcon |
| Input | Component Set | Atom | state, type, hasIcon |
| Label | Component | Atom | required (boolean) |
| Badge | Component Set | Atom | variant |
| Card | Component | Atom | — |
| Separator | Component | Atom | orientation |
| Select | Component Set | Molecule | state, hasPlaceholder |
| Dialog | Component Set | Organism | hasOverlay, size |
| Sheet | Component Set | Organism | side, size |
| Table | Component Set | Organism | hasHeader, hasPagination |
| Sidebar | Component | Organism | collapsed (boolean) |
| Tabs | Component Set | Molecule | variant, orientation |
| Tooltip | Component | Atom | position |
| Avatar | Component Set | Atom | size, hasImage |

## Anti-Patterns
- Creating components without variables (hardcoded colors/spacing)
- Skipping Auto Layout (absolute positioning breaks responsiveness)
- Not documenting component properties
- Missing hover/active/disabled states
- Forgetting to create the component set (just loose frames)
- **Not establishing Code Connect after creation** — this is the whole point
- Using individual variable creation instead of batch operations
- Using `figma_execute` for design-system-aware creation when `use_figma` works

---
name: figma-audit
description: Audit Figma file for design system consistency, accessibility, token adoption, Code Connect coverage
user-invocable: true
model: opus
effort: high
context:
  - skills/FIGMA_USE.md
---

# /figma-audit — Design System Audit & Quality Check

> Audit a Figma file for design system consistency, accessibility compliance, token adoption, and Code Connect coverage. Produces actionable findings. Requires /figma-use.

## Freedom Level: Read-Only + Report

Audit skills read and analyze but do not modify the canvas. Output is a structured report with severity levels.

## When to Use
- Before a design handoff to development
- After pulling a design system (`memi pull`)
- Periodic design system health checks
- When components look inconsistent or broken
- Before establishing Code Connect mappings

## Audit Checklist

### 1. Token Adoption
```
figma_get_variables → list all defined tokens
get_design_context for each page → check usage

Report:
  ✓ Bound to variable: colors/primary/500
  ✗ Raw hex: #3b82f6 (should be colors/primary/500)
  ✗ Magic number: 16px padding (should be spacing/4)

Metric: % of visual properties bound to variables
Target: 90%+
```

### 2. Component Consistency
```
figma_search_components → list all components
figma_get_component_details for each → check structure

Report:
  ✓ Auto Layout applied
  ✓ Properties documented
  ✓ Variants complete (default, hover, active, disabled, focused)
  ✗ Missing state: Button has no "loading" variant
  ✗ Inconsistent padding: Card uses 16px, CardHeader uses 12px

Metric: % of components with all required states
Target: 100% for atoms, 90% for molecules
```

### 3. Atomic Design Compliance
```
Check each component's classification:
  ✓ Atom: no nested component instances (correct)
  ✗ Atom: Button contains Icon instance (should be molecule or use instance swap)
  ✓ Molecule: FormField composes Label + Input + HelpText
  ✗ Organism: LoginForm classified as molecule (too complex)

Metric: % of components correctly classified
Target: 95%+
```

### 4. Accessibility
```
For each component:
  ✓ Contrast ratio: text on background meets WCAG AA (4.5:1)
  ✗ Touch target: Button is 32px tall (needs 44px minimum)
  ✓ Focus indicator: visible focus ring
  ✗ Missing: no aria-label on icon-only button

For each page:
  ✓ Heading hierarchy: h1 → h2 → h3 (no skips)
  ✗ Missing landmark: no main content area defined
  ✓ Color not sole indicator: error states use icon + color

Metric: WCAG violations per page
Target: 0 critical, <5 minor
```

### 5. Code Connect Coverage
```
get_code_connect_map → current mappings

Report:
  ✓ Mapped: Button → src/components/ui/button.tsx
  ✓ Mapped: Card → src/components/ui/card.tsx
  ✗ Unmapped: MetricCard (no code counterpart)
  ✗ Stale: FormField maps to deleted file

Metric: % of components with valid Code Connect
Target: 80%+ for atoms, 60%+ for molecules
```

### 6. Naming Conventions
```
Check against naming rules:
  ✓ PascalCase: MetricCard, LoginForm
  ✗ Wrong case: metric-card (should be MetricCard)
  ✗ Vague name: "Frame 47" (rename to meaningful name)
  ✓ Token path: colors/primary/500

Metric: % of elements following naming conventions
Target: 100%
```

### 7. Auto Layout Health
```
For each container:
  ✓ Has Auto Layout
  ✗ Uses absolute positioning (should be Auto Layout)
  ✓ Sizing: fill container (correct for content area)
  ✗ Sizing: hug contents (should be fill for responsive element)
  ✓ Spacing uses token values

Metric: % of containers using Auto Layout
Target: 95%+
```

## Output Format
```
╔══════════════════════════════════════╗
║     Design System Audit Report       ║
╚══════════════════════════════════════╝

Score: 82/100

Token Adoption:      87% ✓
Component Quality:   79% ⚠
Atomic Compliance:   95% ✓
Accessibility:       74% ⚠
Code Connect:        65% ✗
Naming:             92% ✓
Auto Layout:         89% ✓

Critical Issues (fix immediately):
  1. Button has no focus indicator
  2. 23 raw hex values should be variables
  3. FormField Code Connect points to deleted file

Warnings (fix soon):
  1. MetricCard missing "loading" variant
  2. 5 components have inconsistent padding

Recommendations:
  1. Run: memi tokens → re-export and bind
  2. Run: add_code_connect_map for 12 unmapped components
  3. Add missing variant states to 8 components
```

## Integration
- Save audit results to `.memoire/audit.json` for tracking over time
- Compare against previous audits to show improvement
- Block `memi sync` if critical issues exceed threshold

---
name: figma-prototype
description: Build interactive Figma prototypes with flows, transitions, and user journey mapping
user-invocable: true
model: opus
effort: max
context:
  - skills/FIGMA_USE.md
---

# /figma-prototype — Create Interactive Prototypes

> Build interactive prototypes in Figma with flows, transitions, and user journey mapping. Generates prototype HTML for testing. Requires /figma-use.

## Freedom Level: High

Full creative freedom for interactions and flows. Must use existing components and follow atomic structure.

## When to Use
- Creating clickable prototypes for user testing
- Demonstrating user flows (onboarding, checkout, auth)
- Building interactive presentations for stakeholders
- Generating standalone HTML prototypes via `memi prototype`

## Workflow

### Step 1: Define the User Journey
```
Map the flow as screens + transitions:

Onboarding Flow:
  Welcome → Feature 1 → Feature 2 → Feature 3 → Dashboard

Auth Flow:
  Login → [success] → Dashboard
  Login → [forgot] → ForgotPassword → ResetEmail → Login
  Login → [signup] → Signup → VerifyEmail → Dashboard

Checkout Flow:
  Cart → Shipping → Payment → Review → Confirmation
```

### Step 2: Create Screens
For each screen in the flow:
```
1. Check if the page spec exists → read specs/pages/
2. If exists → use_figma to create from spec
3. If new → plan atomic decomposition, build bottom-up
4. Create all screens on the same Figma page
5. Arrange in a flow layout (horizontal, spaced)
```

### Step 3: Add Interactions
```javascript
// Navigate on click
button.reactions = [{
  action: { type: 'NODE', destinationId: nextScreenId, navigation: 'NAVIGATE' },
  trigger: { type: 'ON_CLICK' }
}];

// Smart animate between states
button.reactions = [{
  action: {
    type: 'NODE',
    destinationId: nextScreenId,
    navigation: 'NAVIGATE',
    transition: {
      type: 'SMART_ANIMATE',
      easing: { type: 'EASE_IN_OUT' },
      duration: 0.3
    }
  },
  trigger: { type: 'ON_CLICK' }
}];

// Overlay (modal, dropdown)
trigger.reactions = [{
  action: {
    type: 'NODE',
    destinationId: overlayId,
    navigation: 'OVERLAY',
    overlayRelativePosition: { x: 0, y: 0 }
  },
  trigger: { type: 'ON_CLICK' }
}];
```

### Step 4: Transition Types
| Transition | Use Case | Duration |
|-----------|----------|----------|
| `DISSOLVE` | Page navigation | 0.2s |
| `SMART_ANIMATE` | State changes, morphing | 0.3s |
| `MOVE_IN` | Sheets, side panels | 0.25s |
| `SLIDE_IN` | Page push transitions | 0.3s |
| `PUSH` | Stack navigation (mobile) | 0.3s |

### Step 5: Self-Healing Validation
Run the self-healing loop from `/figma-use` for each screen. Additionally: verify all interactions connect, no dead-end screens, consistent transition types within each flow.

### Step 6: Generate Prototype HTML
```
memi prototype → generates prototype/prototype.html
```
This creates a standalone HTML file with all screens and click-through navigation, viewable in any browser.

## Flow Layout in Figma
```
Arrange screens in a clear flow:

Section "User Flow: Onboarding"
├── [Welcome]  ──→  [Feature 1]  ──→  [Feature 2]  ──→  [Dashboard]
│                                                    ↗
├── [Login]  ──→  [Dashboard]
│     ↓
├── [ForgotPwd]  ──→  [ResetEmail]  ──→  [Login]
│     ↓
└── [Signup]  ──→  [VerifyEmail]  ──→  [Dashboard]

Spacing: 200px between screens (horizontal)
Connection lines: use FigJam connectors or annotation arrows
```

## Spec Integration
Each screen in the prototype should have a PageSpec:
```
memi spec page Welcome
memi spec page FeatureHighlight
memi spec page Dashboard
```

The prototype flow itself is captured in an IA spec:
```
memi ia create OnboardingFlow
```

## Anti-Patterns
- Dead-end screens with no navigation
- Inconsistent transition types within the same flow
- Missing back/cancel actions
- Screens not built from reusable components
- Floating screens outside the flow Section
- Not generating the HTML prototype for stakeholder review

---
name: multi-agent
description: Orchestrate multiple Claude instances on Figma canvas with box widgets, coordinated handoffs, error recovery
user-invocable: true
model: opus
effort: max
context:
  - skills/FIGMA_USE.md
---

# /multi-agent — Parallel Agent Workflows in Figma

> Orchestrate multiple Claude instances on the Figma canvas with full transparency via box widgets, coordinated handoffs, and error recovery. Requires /figma-use.

## Freedom Level: High

Each agent operates autonomously within its scope. The orchestrator coordinates handoffs and resolves conflicts.

## Architecture

### Port Allocation
```
Port 9223 → Primary agent (orchestrator)
Port 9224 → Token engineer
Port 9225 → Component architect
Port 9226 → Layout designer
Port 9227 → Code generator
Port 9228-9232 → Additional specialists
```
The Mémoire plugin auto-discovers all instances via port scanning (9223-9232) every 5 seconds.

### Instance Identification
Each agent MUST identify itself on connect:
```
memi connect --role token-engineer --name "Token Agent"
memi connect --role component-architect --name "Component Agent"
memi connect --role layout-designer --name "Layout Agent"
```

## Box Widget Protocol

Every agent creates a status box on the Figma canvas for human visibility.

### Creating a Box
```javascript
let agentSection = figma.currentPage.findOne(
  n => n.type === 'SECTION' && n.name === 'Active Agents'
);
if (!agentSection) {
  agentSection = figma.createSection();
  agentSection.name = 'Active Agents';
  agentSection.x = -400;
  agentSection.y = 0;
}

const box = figma.createFrame();
box.name = `[${role}] ${task}`;
box.layoutMode = 'VERTICAL';
box.primaryAxisSizingMode = 'AUTO';
box.counterAxisSizingMode = 'FIXED';
box.resize(300, 1);
box.paddingLeft = box.paddingRight = 12;
box.paddingTop = box.paddingBottom = 10;
box.itemSpacing = 4;
box.cornerRadius = 8;
box.fills = [{ type: 'SOLID', color: { r: 0.06, g: 0.06, b: 0.12 }, opacity: 0.95 }];
box.strokes = [{ type: 'SOLID', color: statusBorderColor }];
box.strokeWeight = 1.5;
agentSection.appendChild(box);
```

### Status Colors
```javascript
const statusColors = {
  idle:  { r: 0.3, g: 0.3, b: 0.4 },   // Gray-blue
  busy:  { r: 0.96, g: 0.62, b: 0.04 }, // Amber
  error: { r: 0.94, g: 0.27, b: 0.27 }, // Red
  done:  { r: 0.06, g: 0.73, b: 0.51 }, // Green
};
```

### Updating & Collapsing
```javascript
// Update status
myBox.name = `[${role}] ${newTask}`;
myBox.strokes = [{ type: 'SOLID', color: statusColors[status] }];

// Collapse on completion
myBox.resize(300, 28);
myBox.name = `✓ [${role}] Complete`;
myBox.fills = [{ type: 'SOLID', color: { r: 0.04, g: 0.45, b: 0.34 }, opacity: 0.3 }];
```

## Coordination Patterns

### Pattern 1: Pipeline (Sequential Handoff)
```
Token Engineer → Component Architect → Layout Designer → Code Generator
     ↓                   ↓                    ↓                ↓
  Variables         Components            Pages           React code
```
Each agent waits for the previous to broadcast completion.

### Pattern 2: Parallel Atoms (Fan-Out)
```
Orchestrator
├── Agent A: builds Button, Badge, Avatar, Icon
├── Agent B: builds Input, Label, Select, Checkbox
├── Agent C: builds Card, Separator, Tooltip, Dialog
└── Merge: all atoms ready → continue to molecules
```

### Pattern 3: Page Parallel (Independent)
```
Orchestrator
├── Agent A: designs Dashboard page
├── Agent B: designs Auth pages (Login, Signup, Forgot)
├── Agent C: designs Settings pages
└── Each agent runs full atomic pipeline for its scope
```

### Pattern 4: Research + Design (Concurrent)
```
Research Agent: analyzing data, producing insights
Design Agent: building components as research completes
Code Agent: generating code as designs stabilize
All three work simultaneously, communicating via agent-broadcast
```

## Error Recovery Protocol

When an agent encounters an error:
```
1. Update box widget: status → "error", show error message
2. Broadcast: agent-status { role, task, status: "error", error: "..." }
3. Attempt self-fix (max 2 retries)
4. If unrecoverable:
   a. Broadcast failure to orchestrator
   b. Orchestrator reassigns task or adjusts plan
   c. Box widget stays red until resolved
5. Never silently fail — always visible in Figma
```

## Message Protocol
```typescript
// Agent announcing status
{ type: 'agent-status', role: string, task: string, status: 'idle'|'busy'|'error'|'done' }

// Agent sending results to others
{ type: 'agent-broadcast', text: string, data: any, target?: string }

// Requesting agent list
{ type: 'agent-list' }
// Response: { agents: [{ id, role, task, status, capabilities }] }
```

## Anti-Patterns
- Two agents modifying the same component simultaneously (use locking)
- Agents not announcing their role on connect
- Skipping box widgets (humans lose visibility)
- Not collapsing boxes on completion (visual clutter)
- Agents working without checking what others have built
- Silently failing without updating box widget status

---
name: atomic-design
description: Atomic Design methodology reference — atoms, molecules, organisms, templates, pages, tokens, accessibility
user-invocable: false
---

# Atomic Design Systems — Reference

Brad Frost's methodology: five levels that compose into coherent, pattern-driven UIs.

## The Five Levels

### 1. Atoms
Smallest functional units. Single responsibility, context-free, well-defined prop interfaces.

**shadcn atoms:** Button, Input, Label, Badge, Avatar, Separator, Switch, Checkbox, Skeleton, Progress, Slider, Toggle

**Rules:** Atoms must not import other atoms. Must be accessible (ARIA, keyboard). Must use design tokens, never hardcoded values.

### 2. Molecules
Simple groups of 2-5 atoms functioning as a unit (e.g., SearchField = Label + Input + Button).

**Rules:** Compose existing atoms, not new primitives. Presentation-only (no data fetching). May have internal state (open/closed, focused).

### 3. Organisms
Complex UI sections made of molecules and/or atoms (e.g., DataTable, Sidebar, NavigationBar).

**Rules:** Can manage data fetching. Must be responsive (own breakpoints). Should document composition in a spec.

### 4. Templates
Page-level layouts defining structure and organism placement. Use placeholder content, not real data.

**Rules:** Must be responsive across all breakpoints. Use CSS Grid or Flexbox. Match Figma page specs exactly.

### 5. Pages
Templates filled with real content and live data. The ultimate test of the design system.

**Rules:** Handle all data states (loading, empty, error, populated). Full WCAG 2.1 AA compliance. E2E tests on critical paths.

---

## Design Tokens

```
Global Tokens (primitives: --blue-500, --space-4)
  → Alias Tokens (semantic: --color-primary, --spacing-component)
    → Component Tokens (scoped: --button-bg, --card-radius)
```

Multi-theme: override alias tokens per theme (`:root`, `.dark`, `.brand-b`).

---

## Component API Principles

- **Composition over configuration** — use composable children, not monolithic props
- **String unions for variants** (`variant?: "default" | "destructive" | "outline"`) not booleans
- **`className` + `asChild`** — standard shadcn/Radix patterns

### Accessibility by Level
| Level | Requirements |
|-------|-------------|
| Atom | ARIA role, keyboard focus, contrast, label |
| Molecule | Focus management within group, error announcements |
| Organism | Landmark roles, skip links, focus trapping |
| Template | Page title, heading hierarchy, main landmark |
| Page | Full WCAG 2.1 AA |

### Responsive by Level
| Level | Approach |
|-------|---------|
| Atom | Inherits from context |
| Molecule | Container queries |
| Organism | Own breakpoints, reflow |
| Template | Grid breakpoints |
| Page | Orchestrates everything |

---

## Naming Conventions

| Element | Convention | Example |
|---------|-----------|---------|
| Components | PascalCase | `MetricCard`, `LoginForm` |
| Props | camelCase | `isLoading`, `onSubmit` |
| CSS classes | kebab-case | `text-muted-foreground` |
| Constants | UPPER_SNAKE | `MAX_RETRY_COUNT` |
| Tokens | path/style | `color/primary/500` |

### File Structure
```
components/
  ui/            # atoms (shadcn primitives)
  molecules/     # molecule compositions
  organisms/     # complex sections
  templates/     # page layouts
```

---

## DataViz Hierarchy

```
ChartContainer (atom) → LineChart/BarChart (molecule) → DashboardChartSection (organism)
```

Every chart: `aria-label`, `<details>` data table fallback, keyboard navigation, color + pattern (not color alone).

---

## Figma ↔ Code Mapping

| Figma | Code |
|-------|------|
| Component | React component |
| Component Set | Variant type union |
| Component Property | React prop |
| Auto Layout | Flexbox/Grid |
| Design Token | CSS Variable → Tailwind class |
| Section | Organism |

---

## Anti-Patterns
1. **Premature abstraction** — wait for 3+ use cases before extracting
2. **Prop explosion** — 15+ props means decompose into smaller pieces
3. **CSS override chains** — 5+ overrides means create a variant
4. **Token drift** — hardcoded values that should be tokens
5. **Ignoring states** — every interactive component needs: default, hover, focus, active, disabled, loading, error

---
name: dashboard-from-research
description: Transform research data (Excel, CSV, stickies) into structured insights and interactive dashboards
user-invocable: false
model: opus
effort: max
context:
  - skills/ATOMIC_DESIGN.md
---

# Dashboard from Research — Research Data to Interactive Dashboard

> Transform research data (Excel, CSV, FigJam stickies, markdown) into structured insights and interactive dashboards with dataviz components. Chains research pipeline → specs → code generation → preview.

## Freedom Level: High

Full autonomy over data interpretation, visualization choices, and dashboard layout. Must back every design decision with the research data.

## When to Use
- User has research data (Excel, CSV, survey results, interview notes)
- FigJam board has stickies from workshops or brainstorming
- Need to create a dashboard that visualizes research findings
- Turning qualitative/quantitative data into actionable UI

## Workflow

### Step 1: Ingest Research Data
```
memi research from-file <path>     → Excel/CSV parsing
memi research from-stickies        → FigJam sticky notes
memi research synthesize           → Combine all sources
```

Output: `research/insights.json` with structured findings.

### Step 2: Analyze & Categorize
Classify insights into dashboard-friendly categories:
```
Quantitative → KPI cards, charts, trend lines
  - Metrics: numeric values with labels
  - Time series: data over time → line/area charts
  - Comparisons: A vs B → bar charts
  - Distributions: spread → histograms

Qualitative → Text summaries, tag clouds, quotes
  - Themes: grouped findings → category cards
  - Quotes: user verbatims → quote components
  - Sentiment: positive/negative → sentiment indicators

Relational → Flow diagrams, matrices, maps
  - User journeys: step sequences → flow components
  - Relationships: connections → network graphs
  - Hierarchies: nested structures → tree views
```

### Step 3: Create Specs (Atomic Design)
For each visualization need, create the right spec type:

```
KPI metric → memi spec component MetricCard (molecule)
  props: { title, value, change, trend, icon }

Trend chart → memi spec dataviz TrendChart
  chartType: "area" | "line"
  dataShape: { x: "date", y: "value", series: [...] }

Comparison → memi spec dataviz ComparisonChart
  chartType: "bar"
  dataShape: { category: "string", values: [...] }

The dashboard page → memi spec page ResearchDashboard
  layout: "dashboard"
  sections: [metrics-row, charts-row, insights-section, quotes]
```

### Step 4: Generate Code
```
memi generate                      → all specs → React + Tailwind
memi preview                       → localhost preview server
```

### Step 5: Design in Figma (Optional)
If the dashboard should also exist in Figma:
```
1. use_figma → create the dashboard layout using components
2. figma_take_screenshot → validate
3. Self-healing loop (max 3 rounds)
4. add_code_connect_map → establish design ↔ code parity
```

## Dashboard Layout Pattern
```
Frame (VERTICAL, fill, 1280×900)
├── Header (HORIZONTAL, hug height, fill width, padding=24)
│   ├── Title: "Research Dashboard"
│   ├── Subtitle: research date range
│   └── Actions: export, filter, refresh
├── Metrics Row (HORIZONTAL, fill, gap=16, padding=24)
│   └── MetricCard × 4-6 (fill, equal width)
├── Charts Section (HORIZONTAL, fill, gap=16, padding=0-24)
│   ├── Primary Chart (2/3 width)
│   └── Secondary Chart (1/3 width)
├── Insights Grid (grid 2-3 col, gap=16, padding=24)
│   └── InsightCard × N
└── Detail Section (VERTICAL, fill, padding=24)
    └── DataTable or QuotesList
```

## Data → Chart Type Decision
| Data Pattern | Chart Type | Recharts Component |
|-------------|-----------|-------------------|
| Single value + trend | KPI Card | Custom (Card + Badge) |
| Values over time | Area/Line | `<AreaChart>` / `<LineChart>` |
| Category comparison | Bar | `<BarChart>` |
| Part of whole | Pie/Donut | `<PieChart>` |
| Two dimensions | Scatter | `<ScatterChart>` |
| Distribution | Histogram | `<BarChart>` (binned) |
| Multiple metrics | Composed | `<ComposedChart>` |

## Anti-Patterns
- Creating charts without understanding the data first
- Using complex visualizations when a simple KPI card suffices
- Not including data source attribution
- Hardcoding sample data instead of connecting to research output
- Skipping the research synthesis step (going straight to UI)
- Not generating specs before code (violates spec-first)

---
name: motion-video
description: Product animation, UI motion, portfolio videos — Apple-grade reveals, motion tokens, full production pipelines
user-invocable: true
model: opus
effort: max
---

# /motion-video — Product Animation & UI Motion Superagent

> Autonomous agent for designing, specifying, and producing product videos, hero animations, UI motion sequences, and portfolio case study videos. Covers Apple's motion language, WWDC-grade reveals, micro-interactions, motion tokens, and full production pipelines from Figma to final delivery.

## Freedom Level: Maximum

You operate as a motion design intelligence engine. You don't ask — you analyze the design, infer motion intent, specify animation details, create motion specs, generate code, and produce delivery-ready output. You burn tokens to get every timing curve, stagger pattern, and easing function right.

**Key Principle:** Motion is not decoration — it is communication. Every animation serves a purpose, feels natural, respects accessibility, and delights.

## Core Loop

```
ANALYZE DESIGN → CLASSIFY MOTION → SPECIFY TOKENS → GENERATE CODE → VALIDATE → DELIVER
```

### 1. ANALYZE DESIGN
- **Read the canvas**: `get_design_context` or `figma_take_screenshot` — understand what exists
- **Identify motion candidates**: Buttons, cards, modals, page transitions, data viz, hero sections
- **Understand intent**: What emotion? (delight, confidence, urgency, clarity)
- **Check existing tokens**: Do motion tokens already exist in `figma_get_variables`?
- **Understand before animating** — never add motion to what already moves

### 2. CLASSIFY MOTION

#### Motion Category Decision Tree
```
What type of motion is needed?
├── User interaction feedback?
│   ├── Button/input state change → Micro-interaction (100–350ms)
│   ├── Form validation → Micro-interaction with shake/success (200ms)
│   └── Hover/focus → Micro-interaction (150ms)
├── Navigation or state change?
│   ├── Page transition → Macro-transition (300–500ms)
│   ├── Modal/drawer open → Macro-transition (300ms)
│   └── Tab switch → Macro-transition (200ms)
├── Feature showcase or first impression?
│   ├── App launch / splash → Hero animation (800–1200ms)
│   ├── Feature reveal (WWDC-style) → Hero animation (3–8s per feature)
│   └── Onboarding sequence → Sequential reveal (2–5s total)
├── Data presentation?
│   ├── Chart/graph entry → Data viz animation (500ms+)
│   ├── Number counter → Data viz (500ms tick-up)
│   └── Table row load → Stagger pattern (50ms per row)
└── Portfolio / marketing video?
    ├── Case study → Full video pipeline (30–60s)
    ├── Product announcement → Apple keynote pattern (30–90s)
    └── Social media clip → Quick loop (15–30s)
```

### 3. SPECIFY TOKENS

#### Standard Motion Token Set
Create these as design tokens (CSS custom properties or Figma variables):

```css
/* Durations */
--motion-instant: 100ms;
--motion-fast: 160ms;
--motion-normal: 240ms;
--motion-slow: 360ms;
--motion-dramatic: 800ms;

/* Easing Functions */
--motion-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
--motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
--motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

/* Spring Physics (for native/Framer Motion) */
--motion-spring-stiffness: 100;
--motion-spring-damping: 12;
--motion-spring-mass: 1;

/* Stagger */
--motion-stagger-child: 50ms;
--motion-stagger-max: 300ms;
```

#### Distance-Based Timing
- Short (0–100px): 150ms
- Medium (100–300px): 300ms
- Long (300px+): 500ms

### 4. GENERATE CODE

#### Tool Decision Tree
```
What output format?
├── Web (React/Next.js)?
│   ├── Simple transitions → CSS transitions + Tailwind
│   ├── Complex sequences → Framer Motion / GSAP
│   ├── Scroll-triggered → GSAP ScrollTrigger or CSS animation-timeline
│   └── Data viz → Recharts with custom animation props
├── Interactive embed?
│   ├── Lightweight loop → Lottie JSON (from After Effects)
│   ├── State machine → Rive (.riv file)
│   └── 3D interactive → Spline embed
├── Video deliverable?
│   ├── Portfolio quality → After Effects → ProRes 422 HQ (4K)
│   ├── Web playback → MP4 H.264 or WebM VP9
│   ├── Social → MP4 1080p (16:9 landscape, 9:16 stories, 1:1 square)
│   └── Quick share → GIF (30fps, max 5MB)
└── Native app?
    ├── iOS → Spring animations (UIView.animate or SwiftUI .spring())
    ├── visionOS → Spline → native Xcode project
    └── Android → MotionLayout or Compose animations
```

#### Framer Motion Pattern (React)
```tsx
import { motion } from "framer-motion"

// Stagger children
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.05 }
  }
}

const item = {
  hidden: { opacity: 0, y: 20 },
  show: {
    opacity: 1, y: 0,
    transition: { type: "spring", stiffness: 100, damping: 12 }
  }
}

<motion.div variants={container} initial="hidden" animate="show">
  {items.map(i => <motion.div key={i} variants={item} />)}
</motion.div>
```

#### CSS Motion Pattern
```css
.element {
  transition: transform var(--motion-normal) var(--motion-ease-default),
              opacity var(--motion-normal) var(--motion-ease-default);
}

@media (prefers-reduced-motion: reduce) {
  .element { transition: none; }
}
```

### 5. VALIDATE (Self-Healing — MANDATORY)
Run the self-healing loop from `/figma-use` (IMPLEMENT → SCREENSHOT → ANALYZE → FIX → VERIFY, max 3 rounds). Motion-specific checks: 60fps minimum, `prefers-reduced-motion` fallback, motion tokens (no hardcoded ms), spring/ease-out (not linear), micro-interactions under 500ms, stagger on lists, GPU properties only (transform/opacity), no flash >3/sec.

### 6. DELIVER

#### Delivery Format Matrix
| Context | Format | Specs |
|---------|--------|-------|
| Web embed | MP4 H.264 / WebM VP9 | 1080p, autoplay muted loop |
| Portfolio | ProRes 422 HQ | 4K, lossless |
| Social landscape | MP4 | 1920x1080, 60fps |
| Social stories | MP4 | 1080x1920, 60fps |
| Social square | MP4 | 1080x1080, 60fps |
| Interactive web | Lottie JSON or Rive .riv | Lightweight, 120fps capable |
| Quick share | GIF | 30fps, max 5MB |
| iOS native | SwiftUI .spring() | Match system motion |
| visionOS | Spline native | Windows/Volumes/Spaces |

---

## Apple Motion Language Reference

### Liquid Glass (WWDC 2025)
- Translucent, fluid material that reflects and refracts surroundings
- Real-time light rendering (specular highlights)
- **Spring-based animations** — elements settle with subtle rebounds
- Interface "breathes" and reacts instantly
- Depth-of-field on UI for hero moments
- Accessibility: auto-simplifies under Reduce Motion, adds opacity when transparency disabled

### Feature Reveal Pattern ("Hero Moment")
1. Device in realistic context (hand holding iPhone)
2. Zoom into UI area
3. Depth-of-field blur background
4. Animate feature with spring physics
5. Subtle glow/highlight to draw focus
6. Zoom back out to show feature in context

**Timing:** 3–8s per feature, spring easing (stiffness: 100, damping: 12), 50–100ms stagger, 60fps minimum

### Keynote Video Structure
1. **Hook** (0–3s): Dramatic intro, feature name, quick benefit
2. **Problem** (3–10s): What users struggle with
3. **Solution Demo** (10–40s): Feature in action, multiple use cases
4. **CTA** (40–50s): Why it matters, availability
5. **Outro** (50–60s): Product shot, branding

---

## Portfolio Case Study Video Structure

1. **Title & Branding** (2–3s) — Logo, project name, subtle scale 1.02x
2. **Problem & Insight** (5–8s) — Research findings, annotated mockups, slide-in reveals
3. **Design Solution** (15–30s) — Full user flow animated end-to-end, scroll-through, interactions
4. **Interaction Details** (8–12s) — Micro-interaction close-ups, state sequences
5. **Device Mockup** (5–8s) — Animated device frame with UI, slight perspective rotation
6. **Final Screens** (3–5s) — Hero shot, metrics, CTA

**Visual Design:** Dark backgrounds (#000 or #0a1420), clean typography, floating elements with shadows, 3D depth

---

## UI Animation Patterns

### Micro-Interactions
| Pattern | Duration | Easing | Details |
|---------|----------|--------|---------|
| Button hover | 150ms | ease-out | scale 1.02, shadow increase |
| Button press | 100ms | ease-in | scale 0.98, shadow decrease |
| Input focus | 150ms | ease-out | border color, shadow, background |
| Input error | 200ms | spring | shake 2x, red border |
| Input success | 200ms | ease-out | green border, checkmark slide |
| Toast enter | 300ms | ease-out | slide up + fade in |
| Toast exit | 300ms | ease-in | slide down + fade out |
| Skeleton pulse | 1500ms | linear | opacity 0.6→1→0.6 loop |
| Loading dots | 300ms ea | linear | 3 dots, 100ms stagger |

### Macro-Transitions
| Pattern | Duration | Details |
|---------|----------|---------|
| Push left | 300–500ms | Outgoing slides left, incoming from right |
| Dissolve | 400ms | Fade overlap |
| Zoom | 400ms | Scale 0.95→1.0 with fade |
| Shared element | 300–500ms | Element morphs between pages |
| Drawer | 300ms | Slide from edge + scrim fade |
| Modal | 300ms | Scale up from center + scrim |

### Data Viz Animations
| Element | Duration | Easing | Stagger |
|---------|----------|--------|---------|
| Bar chart | 500ms | ease-out | 50ms per bar |
| Line chart | 600ms | ease-out | stroke-dashoffset |
| Pie chart | 500ms | ease-out | 50ms per slice |
| Number counter | 500ms | ease-out | JS counter tick |
| Table rows | 200ms | ease-out | 50ms per row |

### Onboarding Sequential Reveal
1. Background fade (200ms, 0ms delay)
2. Headline slide-up (300ms, 100ms delay)
3. Hero image/animation (500ms, 200ms delay)
4. Body text fade (300ms, 400ms delay)
5. CTA scale-in pulse (200ms, 600ms delay)
6. Tooltip appear (200ms, 800ms delay)

---

## Figma → Video Production Pipeline

### Workflow
```
Figma Design → Motion Spec (JSON) → Animation Tool → Render → Deliver
```

**Figma → After Effects:** Use Convertify or Overlord plugins to export native AE layers
**Figma → Rive:** Import components, define state machine, animate transitions
**Figma → Lottie:** After Effects + bodymovin plugin → JSON export
**Figma → CSS/GSAP:** Manual specification from motion tokens

### Motion Spec Format
```json
{
  "animation": "card-enter",
  "element": "metric-card",
  "trigger": "viewport-enter",
  "keyframes": [
    { "time": 0, "opacity": 0, "y": 20 },
    { "time": 0.3, "opacity": 1, "y": 0 }
  ],
  "easing": "spring(100, 12, 1)",
  "duration": 300,
  "stagger": 50
}
```

---

## Tools Reference

| Tool | Best For | Output | Performance |
|------|----------|--------|-------------|
| After Effects | Complex sequences, portfolio | MP4, Lottie JSON | Excellent |
| Rive | Interactive, state machines | .riv, MP4 | Excellent (GPU) |
| Spline | 3D UI, visionOS | Native app, MP4 | Excellent (WebGL) |
| Framer Motion | React web animations | React components | Excellent |
| GSAP | Scroll-triggered, complex web | JS/CSS | Excellent |
| CSS transitions | Simple state changes | CSS | Best (native) |
| Lottie | AE → interactive playback | JSON | Very Good |
| Principle | High-fidelity prototypes | Video | Very Good |

---

## Accessibility (MANDATORY)

Every motion implementation must:
- [ ] Respect `prefers-reduced-motion` — disable animations, show static fallback
- [ ] Duration ≤ 5 seconds (or provide pause button)
- [ ] No flashing >3/sec (seizure risk)
- [ ] Color + shape communicate info, never color alone
- [ ] Screen reader announces state changes
- [ ] Keyboard shortcuts for animated interactions
- [ ] Test on low-end hardware (no jank)
- [ ] GPU-accelerated properties only (transform, opacity)

---

## Anti-Patterns

1. **Linear easing everywhere** — almost always wrong; use spring or ease-out
2. **Animating width/height** — causes layout thrash; use transform: scale
3. **No reduced-motion fallback** — accessibility violation
4. **Stagger >300ms total** — users shouldn't wait for last item
5. **Micro-interaction >500ms** — feels sluggish
6. **Infinite spin without pause** — accessibility violation
7. **Hardcoded ms values** — use motion tokens
8. **backdrop-filter animation** — causes jank; animate opacity of blur layer instead
9. **24fps for UI motion** — 60fps minimum (24fps only for cinematic video)
10. **Motion without purpose** — if it doesn't guide attention, provide feedback, or clarify state, remove it

## Rules

1. **Always specify motion tokens** — never hardcode timing or easing
2. **Always include accessibility fallback** — `prefers-reduced-motion` is non-negotiable
3. **Always validate on device** — screenshot, record, measure fps
4. **Always use GPU properties** — transform and opacity only
5. **Always stagger lists** — 50ms per child, max 300ms total
6. **Spring > cubic-bezier** — for anything interactive (iOS especially)
7. **Self-heal** — screenshot after implementation, fix issues, verify
8. **Motion is communication** — every animation must serve a purpose

# Component Catalog — Universal UI Registry

## Purpose
Memoire ships with a pre-loaded catalog of 56 universal UI components derived from industry convention (component.gallery taxonomy). Every component is classified by Atomic Design level, mapped to shadcn/ui primitives where available, and grouped into categories. This catalog serves as the foundation for spec generation, code scaffolding, and design system audits.

## When to Load
- Creating new component specs (use catalog as starting point)
- Auditing a design system for completeness
- Mapping Figma components to code
- Generating a component library from scratch
- Answering "what components should we have?"

## Catalog Location
`src/specs/catalog.ts` — exports `COMPONENT_CATALOG`, category definitions, and helper functions.

## Categories (9)

| Category | Components | Purpose |
|----------|-----------|---------|
| **Buttons** | Button, ButtonGroup, IconButton, Toggle, SegmentedControl, Stepper | Actions and interactive controls |
| **Inputs** | TextInput, Textarea, SearchInput, Select, Combobox, Checkbox, RadioButton, Slider, DateInput, Datepicker, ColorPicker, FileUpload, Label, Fieldset, Form, Rating, RichTextEditor | Form controls |
| **Data Display** | Badge, Avatar, Card, Table, List, File, Skeleton, Separator, Quote | Presenting information |
| **Feedback** | Alert, Toast, ProgressBar, ProgressIndicator, Spinner, EmptyState | Status and notifications |
| **Navigation** | Navigation, Breadcrumbs, Tabs, Pagination, Link, SkipLink, TreeView | Wayfinding |
| **Overlays** | Modal, Drawer, Popover, Tooltip, DropdownMenu | Floating content |
| **Layout** | Accordion, Carousel, Header, Footer, Hero, Stack, VisuallyHidden | Page structure |
| **Media** | Image, Icon, Video | Rich content |
| **Typography** | Heading | Text elements |

## Atomic Distribution

| Level | Count | Rule |
|-------|-------|------|
| Atom | ~22 | Standalone primitives. `composesSpecs` must be empty. |
| Molecule | ~22 | Composes 2-5 atoms. |
| Organism | ~12 | Composes molecules + atoms, manages state. |

## shadcn/ui Mapping

The following catalog components have direct shadcn/ui mappings:

| Catalog | shadcn/ui |
|---------|-----------|
| Button, IconButton, ButtonGroup | Button |
| Toggle | Switch |
| SegmentedControl, Tabs | Tabs |
| TextInput, SearchInput, DateInput | Input |
| Textarea | Textarea |
| Select | Select |
| Checkbox | Checkbox |
| Label | Label |
| Badge | Badge |
| Avatar | Avatar |
| Card, File, EmptyState, Hero | Card |
| Table | Table |
| Skeleton | Skeleton |
| Separator | Separator |
| Tooltip | Tooltip |
| DropdownMenu | DropdownMenu |
| Modal | Dialog |
| Drawer | Sheet |
| ProgressBar | Progress |
| Stepper | Button + Input |
| Combobox | Input + Select |
| Pagination | Button |

Components without shadcn mapping (Accordion, Carousel, Navigation, etc.) generate custom implementations using Tailwind.

## How to Use the Catalog

### 1. Scaffold a spec from catalog
```typescript
import { findCatalogComponent } from "../specs/catalog.js";

const entry = findCatalogComponent("datepicker");
// Returns full CatalogComponent with level, props, variants, shadcnBase
// Use as starting point for ComponentSpec
```

### 2. Audit completeness
```typescript
import { COMPONENT_CATALOG, getCatalogByCategory } from "../specs/catalog.js";

const missing = COMPONENT_CATALOG.filter(c =>
  !registry.hasSpec(c.name)
);
// Shows which catalog components are not yet specced
```

### 3. Generate from catalog entry
When creating a spec, pre-fill from the catalog:
- `level` — use catalog's atomic level
- `shadcnBase` — use catalog's mapping
- `variants` — use catalog's defaults
- `props` — use catalog's prop definitions
- `accessibility` — use catalog's a11y defaults

### 4. Dashboard display
The design-system.html COMPONENTS tab renders all catalog entries grouped by category, with live previews, atomic badges, and variant counts.

## Rules

1. **Catalog is the baseline** — every project should eventually spec all 56 components
2. **Aliases resolve** — `findCatalogComponent("Dialog")` finds Modal, `"Switch"` finds Toggle
3. **Prevalence = priority** — higher prevalence = more design systems use it = implement first
4. **shadcn first** — if a catalog component has a shadcn mapping, use it. Don't build custom.
5. **Extend, don't fork** — add project-specific components alongside catalog components, never replace them

# Design System Reference — Cross-Industry Component Gallery

## Purpose
Master index of real-world design system implementations across 100+ organizations. Each component links to its live documentation in production design systems. Use this to benchmark, audit, research patterns, and scaffold components with awareness of how the industry builds them.

## When to Load
- Auditing a design system for completeness or best practices
- Researching how a specific component is implemented across systems
- Writing component specs that need industry-standard prop APIs
- Comparing interaction patterns (e.g. "how do others handle accordion nesting?")
- Building a new component and need reference implementations
- Answering "who has a good X component?"

## How Agents Should Use This
1. **Spec scaffolding** — When creating a component spec, look up the component here. Cross-reference 3-5 top systems (shadcn, Radix, Headless UI, Carbon, Spectrum) to identify consensus props, states, and accessibility patterns.
2. **Audit gaps** — Compare a project's component list against the categories below to find missing primitives.
3. **Pattern research** — If a user asks "how should X work?", sample 5-8 implementations from this list to identify the dominant pattern.
4. **Naming alignment** — Use the component names here as canonical. If a system calls it "Collapse" but most call it "Accordion", prefer "Accordion".

## Key Systems (Tier 1 — reference these first)
| System | Org | Stack | URL Pattern |
|--------|-----|-------|-------------|
| shadcn/ui | Community | React + Tailwind | ui.shadcn.com |
| Radix Primitives | WorkOS | React headless | radix-ui.com |
| Headless UI | Tailwind Labs | React/Vue headless | headlessui.com |
| Spectrum | Adobe | React | spectrum.adobe.com |
| Carbon | IBM | React/Web Components | carbondesignsystem.com |
| Polaris | Shopify | React | polaris.shopify.com |
| Primer | GitHub | React | primer.style |
| Lightning | Salesforce | Web Components | lightningdesignsystem.com |
| Fluent UI | Microsoft | React | developer.microsoft.com/fluentui |
| Ant Design | Ant Group | React | ant.design |
| Atlassian DS | Atlassian | React | atlassian.design |
| Chakra UI | Community | React | chakra-ui.com |
| Material 3 | Google | Various | m3.material.io |
| PatternFly | Red Hat | React | patternfly.org |
| Geist | Vercel | React | vercel.com/geist |
| GOV.UK | UK Gov | Nunjucks | design-system.service.gov.uk |
| Hero UI | Community | React + Tailwind | heroui.com |
| Gestalt | Pinterest | React | gestalt.pinterest.systems |

---

## Components

### Accordion
Expandable/collapsible content sections. Also known as: Collapse, Disclosure, Expandable, Details, Toggle.

| System | URL |
|--------|-----|
| shadcn/ui | ui.shadcn.com/docs/components/accordion |
| shadcn/ui (Collapsible) | ui.shadcn.com/docs/components/collapsible |
| Radix | radix-ui.com/primitives/docs/components/accordion |
| Radix (Collapsible) | radix-ui.com/primitives/docs/components/collapsible |
| Headless UI | headlessui.com/react/disclosure |
| Ant Design | ant.design/components/collapse |
| Ariakit | ariakit.org/components/disclosure |
| Atlassian | — |
| Carbon | carbondesignsystem.com/components/accordion/usage/ |
| Chakra UI | chakra-ui.com/docs/components/accordion |
| Chakra UI (Collapsible) | chakra-ui.com/docs/components/collapsible |
| Spectrum | — |
| Polaris | — |
| Lightning | lightningdesignsystem.com/components/accordion/ |
| Lightning (Expandable) | lightningdesignsystem.com/components/expandable-section/ |
| Lightning (Summary) | lightningdesignsystem.com/components/summary-detail/ |
| Fluent UI | — |
| Material 3 | — |
| PatternFly | patternfly.org/components/accordion |
| PatternFly (Expandable) | patternfly.org/components/expandable-section |
| GOV.UK | design-system.service.gov.uk/components/accordion/ |
| GOV.UK (Details) | design-system.service.gov.uk/components/details/ |
| Geist | vercel.com/geist/collapse |
| Hero UI | heroui.com/docs/components/accordion |
| Gestalt | gestalt.pinterest.systems/web/accordion |
| Base Web | baseweb.design/components/accordion/ |
| Blueprint | blueprintjs.com/docs/#core/components/collapse |
| Bootstrap | getbootstrap.com/docs/4.3/components/collapse/ |
| Bolt | boltdesignsystem.com/pattern-lab/?p=viewall-components-accordion |
| Cauldron | cauldron.dequelabs.com/components/Accordion |
| Cedar | cedar.rei.com/components/accordion |
| Clarity | clarity.design/documentation/accordion |
| Decathlon | decathlon.design/726f8c765/p/04348b-accordion/b/228a62 |
| Dell | delldesignsystem.com/components/accordion/ |
| eBay (MindPatterns) | ebay.gitbook.io/mindpatterns/disclosure/accordion |
| eBay (Playbook) | playbook.ebay.com/design-system/components/expansion |
| Elastic UI | eui.elastic.co/docs/components/containers/accordion/ |
| Elisa | designsystem.elisa.fi/9b207b2c3/p/418ae1-accordion |
| Flowbite | flowbite.com/docs/components/accordion/ |
| Forma 36 | f36.contentful.com/components/accordion |
| Generic Components | genericcomponents.netlify.app/generic-accordion/demo/index.html |
| giffgaff | giffgaff.design/components/for-web/accordion/ |
| Gold (AU Gov) | gold.designsystemau.org/components/accordion/ |
| Grommet | v2.grommet.io/accordion |
| Helsinki | hds.hel.fi/components/accordion |
| Inclusive Components | inclusive-components.design/collapsible-sections/ |
| Instructure | instructure.design/#ToggleDetails |
| Jokul | jokul.fremtind.no/komponenter/accordion |
| Mozilla Protocol | protocol.mozilla.org/components/detail/details.html |
| Newskit | newskit.co.uk/components/accordion/ |
| NHS | service-manual.nhs.uk/design-system/components/expander |
| NS (Dutch Rail) | design.ns.nl/4a05a30ad/p/54d9a8-expandable |
| British Gas | britishgas.design/docs/components/ns-accordion |
| ONS | ons-design-system.netlify.app/components/accordion/ |
| Ontario | designsystem.ontario.ca/components/detail/accordions.html |
| Orbit (Kiwi) | orbit.kiwi/components/accordion/ |
| GitLab Pajamas | design.gitlab.com/components/accordion |
| Paste (Twilio) | paste.twilio.design/components/disclosure |
| Porsche | designsystem.porsche.com/v3/components/accordion/examples |
| Primer | primer.style/design/components/details |
| Quasar | quasar.dev/vue-components/expansion-item |
| Reach UI | reach.tech/accordion |
| Red Hat | ux.redhat.com/elements/accordion/ |
| Ruter | components.ruter.as/#/Components/Interactive/Accordion |
| Sainsbury's | design-systems.sainsburys.co.uk/components/accordion/ |
| SEB | designlibrary.sebgroup.com/components/accordion/ |
| Seek | seek-oss.github.io/seek-style-guide/accordion |
| Shoelace | shoelace.style/components/details |
| Guardian | theguardian.design/2a1e5182b/p/38c5aa-accordion |
| Stack Overflow | stackoverflow.design/product/components/expandable |
| Sprout Social | sproutsocial.com/seeds/components/collapsible |
| Skyscanner | skyscanner.design/latest/components/accordion/web-sEshz9Z5 |
| Subzero (Axis) | subzero.axis.bank.in/components/accordion |
| USWDS | designsystem.digital.gov/components/accordion/ |
| Visa | design.visa.com/components/accordion/ |
| W3C | design-system.w3.org/components/collapsible-containers.html |
| Wonderflow | design.wonderflow.ai/get-started/components/actions/accordion |
| Web Awesome | webawesome.com/docs/components/details/ |
| TFWM | designsystem.tfwm.org.uk/components/accordion/ |
| Workday Canvas | canvas.workday.com/components/containers/expandable-container |
| Auro (Alaska) | auro.alaskaair.com/components/auro/accordion |
| A11y Style Guide | a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-accordion |
| BBC GEL | bbc.co.uk/gel/guidelines/accordion |
| Brighton & Hove | design.brighton-hove.gov.uk/website-pattern-library.php?p=expandable-helper |
| Talend | design.talend.com/?path=/docs/navigation-accordion--docs |
| Freshworks | crayons.freshworks.com/components/core/accordion/ |

---

### Alert
Notifications, banners, callouts, and inline messages. Also known as: Banner, Callout, Notice, Notification, Message, Flag.

| System | URL |
|--------|-----|
| shadcn/ui | ui.shadcn.com/docs/components/alert |
| Ant Design | ant.design/components/alert |
| Ant Design (Message) | ant.design/components/message |
| Ant Design (Notification) | ant.design/components/notification |
| Atlassian (Banner) | atlassian.design/components/banner/examples |
| Atlassian (Section Message) | atlassian.design/components/section-message/examples |
| Atlassian (Flag) | atlassian.design/components/flag/examples |
| Atlassian (Inline) | atlassian.design/components/inline-message/examples |
| Carbon | carbondesignsystem.com/components/notification/usage/ |
| Chakra UI | chakra-ui.com/docs/components/alert |
| Spectrum (Banner) | spectrum.adobe.com/page/alert-banner/ |
| Spectrum (Inline) | spectrum.adobe.com/page/in-line-alert/ |
| Polaris | polaris.shopify.com/components/feedback-indicators/banner |
| Lightning | lightningdesignsystem.com/components/notifications/ |
| Fluent UI | developer.microsoft.com/en-us/fluentui#/controls/web/messagebar |
| PatternFly (Alert) | patternfly.org/components/alert |
| PatternFly (Banner) | patternfly.org/components/banner |
| PatternFly (Hint) | patternfly.org/components/hint |
| GOV.UK | design-system.service.gov.uk/components/warning-text/ |
| Geist | vercel.com/geist/note |
| Hero UI | heroui.com/docs/components/alert |
| Gestalt | — |
| Reach UI | reach.tech/alert |
| Base Web | baseweb.design/components/notification/ |
| Base Web (Banner) | baseweb.design/components/banner/ |
| Blueprint | blueprintjs.com/docs/#core/components/callout |
| Bootstrap | getbootstrap.com/docs/4.3/components/alerts/ |
| Bolt | boltdesignsystem.com/pattern-lab/?p=viewall-components-banner |
| Bulma | bulma.io/documentation/elements/notification/ |
| Cauldron | cauldron.dequelabs.com/components/Alert |
| Cedar | cedar.rei.com/components/banner |
| Clarity | clarity.design/documentation/alert |
| Decathlon | decathlon.design/726f8c765/p/64b4b5-alert/b/129609 |
| Dell | delldesignsystem.com/components/message-bar/ |
| Duet | duetds.com/components/alert/ |
| eBay (MindPatterns) | ebay.gitbook.io/mindpatterns/messaging/inline-notice |
| eBay (Playbook) | playbook.ebay.com/design-system/components/alert-notice |
| Elastic UI | eui.elastic.co/docs/components/display/callout/ |
| Elisa | designsystem.elisa.fi/9b207b2c3/p/559859-notification |
| Evergreen | evergreen.segment.com/components/alert |
| Flowbite | flowbite.com/docs/components/alerts/ |
| Forma 36 | f36.contentful.com/components/note |
| Generic Components | genericcomponents.netlify.app/generic-alert/demo/ |
| giffgaff | giffgaff.design/components/for-web/alerts/alert/ |
| Gold (AU Gov) | gold.designsystemau.org/components/page-alerts/ |
| HashiCorp Helios | helios.hashicorp.design/components/alert |
| Helsinki | hds.hel.fi/components/notification |
| Inclusive Components | inclusive-components.design/notifications/ |
| Instructure | instructure.design/#Alert |
| Morningstar | design.morningstar.com/systems/product/components/banner |
| Mozilla Protocol | protocol.mozilla.org/components/detail/notification-bar--default.html |
| Newskit (Banner) | newskit.co.uk/components/banner/ |
| Newskit (Inline) | newskit.co.uk/components/inline-message/ |
| NHS | service-manual.nhs.uk/design-system/components/warning-callout |
| Nord | nordhealth.design/components/banner/ |
| NS (Dutch Rail) | design.ns.nl/4a05a30ad/p/58a31a-message-bar |
| British Gas | britishgas.design/docs/components/ns-highlighter |
| ONS | ons-design-system.netlify.app/components/panel/ |
| Ontario | designsystem.ontario.ca/components/detail/page-alerts.html |
| GitLab Pajamas (Alert) | design.gitlab.com/components/alert |
| GitLab Pajamas (Banner) | design.gitlab.com/components/banner |
| Paste (Twilio) | paste.twilio.design/components/alert |
| Pharos | pharos.jstor.org/components/alert |
| Heroku Purple | design.herokai.com/purple3/docs/#banners |
| Quasar | quasar.dev/vue-components/banner |
| Red Hat (Alert) | ux.redhat.com/elements/alert/ |
| Red Hat (Announcement) | ux.redhat.com/elements/announcement/ |
| Ruter | components.ruter.as/#/Components/Notifications/Message |
| Sainsbury's | design-systems.sainsburys.co.uk/components/alerts/ |
| SEB | designlibrary.sebgroup.com/components/alerts/alert-ribbons/ |
| Seek | seek-oss.github.io/seek-style-guide/alert |
| Shoelace | shoelace.style/components/alert |
| Sprout Social | sproutsocial.com/seeds/components/alert |
| Guardian | theguardian.design/2a1e5182b/p/108ed3-user-feedback |
| Stack Overflow (Banners) | stackoverflow.design/product/components/banners |
| Stack Overflow (Notices) | stackoverflow.design/product/components/notices |
| Thumbprint | thumbprint.design/components/alert/react/ |
| Auro (Alaska) | auro.alaskaair.com/components/auro/alert |
| Skyscanner | skyscanner.design/latest/components/banner-alert/web-TyY0O2cu |
| Subzero (Axis) | — |
| USWDS | designsystem.digital.gov/components/alert/ |
| Visa (Banner) | design.visa.com/components/banner/ |
| Visa (Section) | design.visa.com/components/section-message/ |
| W3C | design-system.w3.org/components/notes.html |
| Wonderflow | design.wonderflow.ai/get-started/components/dialogs/snackbar |
| Web Awesome | webawesome.com/docs/components/callout/ |
| TFWM | designsystem.tfwm.org.uk/components/message/ |
| Wise | wise.design/components/alert |
| Workday Canvas | canvas.workday.com/components/indicators/banner/ |
| Brighton & Hove | design.brighton-hove.gov.uk/website-pattern-library.php?p=in-page-alerts |
| Talend | design.talend.com/?path=/docs/messaging-message--docs |
| Freshworks | crayons.freshworks.com/components/core/inline-message/ |
| GC Collab (Canada) | design.gccollab.ca/component/system-messaging |

---

### Avatar
User identity representations. Also known as: Profile Image, User Icon.

| System | URL |
|--------|-----|
| shadcn/ui | ui.shadcn.com/docs/components/avatar |
| Radix | radix-ui.com/primitives/docs/components/avatar |
| Ant Design | ant.design/components/avatar |
| Atlassian | atlassian.design/components/avatar/examples |
| Chakra UI | chakra-ui.com/docs/components/avatar |
| Spectrum | spectrum.adobe.com/page/avatar/ |
| Polaris | — |
| Lightning | lightningdesignsystem.com/components/avatar/ |
| PatternFly | patternfly.org/components/avatar |
| Geist | vercel.com/geist/avatar |
| Hero UI | heroui.com/docs/components/avatar |
| Gestalt | gestalt.pinterest.systems/web/avatar |
| Primer | primer.style/design/components/avatar |
| Primer (Pair) | primer.style/design/components/avatar-pair |
| Primer (Stack) | primer.style/design/components/avatar-stack |
| Base Web | baseweb.design/components/avatar/ |
| Elastic UI | eui.elastic.co/docs/components/display/avatar/ |
| Evergreen | evergreen.segment.com/components/avatar |
| Flowbite | flowbite.com/docs/components/avatar/ |
| GitLab Pajamas | design.gitlab.com/components/avatar |
| Instructure | instructure.design/#Avatar |
| Momentum | momentum.design/components/avatar |
| Morningstar | design.morningstar.com/systems/product/components/avatar |
| Nord | nordhealth.design/components/avatar/ |
| Quasar | quasar.dev/vue-components/avatar |
| Red Hat | ux.redhat.com/elements/avatar/ |
| Shoelace | shoelace.style/components/avatar |
| Stack Overflow | stackoverflow.design/product/components/avatars |
| Thumbprint | thumbprint.design/components/avatar/react/ |
| Auro (Alaska) | auro.alaskaair.com/components/auro/avatar |
| eBay (Playbook) | playbook.ebay.com/design-system/components/avatar |
| Freshworks | crayons.freshworks.com/components/core/avatar/ |
| Decathlon | — |
| Subzero (Axis) | subzero.axis.bank.in/components/avatar |
| Visa | design.visa.com/components/avatar/ |
| Wonderflow | design.wonderflow.ai/get-started/components/widgets/avatar |
| Web Awesome | webawesome.com/docs/components/avatar/ |
| Wise | wise.design/components/avatar |

---

### Badge
Status indicators and labels. Also known as: Tag, Chip, Pill, Lozenge, Label, Token, Status, Signal.

| System | URL |
|--------|-----|
| shadcn/ui | ui.shadcn.com/docs/components/badge |
| Ant Design (Badge) | ant.design/components/badge |
| Ant Design (Tag) | ant.design/components/tag |
| Atlassian (Badge) | atlassian.design/components/badge/examples |
| Atlassian (Lozenge) | atlassian.design/components/lozenge/examples |
| Atlassian (Tag) | atlassian.design/components/tag/examples |
| Carbon | carbondesignsystem.com/components/tag/usage/ |
| Chakra UI (Badge) | chakra-ui.com/docs/components/badge |
| Chakra UI (Tag) | chakra-ui.com/docs/components/tag |
| Chakra UI (Status) | chakra-ui.com/docs/components/status |
| Spectrum (Tag) | spectrum.adobe.com/page/tag/ |
| Spectrum (Badge) | spectrum.adobe.com/page/badge/ |
| Polaris (Tag) | polaris.shopify.com/components/selection-and-input/tag |
| Polaris (Badge) | polaris.shopify.com/components/feedback-indicators/badge |
| Lightning (Badge) | lightningdesignsystem.com/components/badges/ |
| Lightning (Pills) | lightningdesignsystem.com/components/pills/ |
| PatternFly (Badge) | patternfly.org/components/badge |
| PatternFly (Label) | patternfly.org/components/label |
| GOV.UK | design-system.service.gov.uk/components/tag/ |
| Geist | vercel.com/geist/badge |
| Hero UI (Badge) | heroui.com/docs/components/badge |
| Hero UI (Chip) | heroui.com/docs/components/chip |
| Gestalt (Badge) | gestalt.pinterest.systems/web/badge |
| Gestalt (Tag) | gestalt.pinterest.systems/web/tag |
| Primer (Counter) | primer.style/design/components/counter-label |
| Primer (Label) | primer.style/design/components/label |
| Primer (State) | primer.style/design/components/state-label |
| Primer (Token) | primer.style/design/components/token |
| Material 3 | m3.material.io/components/badges/overview |
| Base Web (Tag) | baseweb.design/components/tag/ |
| Base Web (Badge) | baseweb.design/components/badge/ |
| Blueprint (Tag) | blueprintjs.com/docs/#core/components/tag |
| Bootstrap | getbootstrap.com/docs/4.3/components/badge/ |
| Bulma | bulma.io/documentation/elements/tag/ |
| Cauldron (Badge) | cauldron.dequelabs.com/components/Badge |
| Cauldron (Tag) | cauldron.dequelabs.com/components/Tag |
| Clarity (Badge) | clarity.design/documentation/badge |
| Clarity (Label) | clarity.design/documentation/label |
| Decathlon (Badge) | decathlon.design/726f8c765/p/465f7c-badge/b/5496b9 |
| Decathlon (Tag) | decathlon.design/726f8c765/p/129f57-tag/b/065880 |
| Dell (Badge) | delldesignsystem.com/components/badge/ |
| Dell (Tag) | delldesignsystem.com/components/tag/ |
| eBay (Badge) | playbook.ebay.com/design-system/components/badge |
| eBay (Signal) | playbook.ebay.com/design-system/components/signal |
| Elastic UI | eui.elastic.co/docs/components/display/badge/ |
| Elisa | designsystem.elisa.fi/9b207b2c3/p/9356c3-badge |
| Evergreen | evergreen.segment.com/components/badges |
| Flowbite | flowbite.com/docs/components/badge/ |
| Forma 36 | f36.contentful.com/components/badge |
| Gold (AU Gov) | gold.designsystemau.org/components/tags/ |
| HashiCorp Helios (Badge) | helios.hashicorp.design/components/badge |
| HashiCorp Helios (Tag) | helios.hashicorp.design/components/tag |
| Helsinki (Status) | hds.hel.fi/components/status-label |
| Helsinki (Tag) | hds.hel.fi/components/tag |
| Instructure (Badge) | instructure.design/#Badge |
| Instructure (Pill) | instructure.design/#Pill |
| Instructure (Tag) | instructure.design/#Tag |
| Jokul | jokul.fremtind.no/komponenter/tag |
| Momentum (Badge) | momentum.design/components/badge |
| Momentum (Chip) | momentum.design/components/chip |
| Morningstar | design.morningstar.com/systems/product/components/tag |
| NHS | service-manual.nhs.uk/design-system/components/tag |
| Nord | nordhealth.design/components/badge/ |
| NS (Dutch Rail) | design.ns.nl/4a05a30ad/p/97c5c0-badge |
| Newskit (Tag) | newskit.co.uk/components/tag/ |
| Newskit (Flag) | newskit.co.uk/components/flag/ |
| Orbit (Badge) | orbit.kiwi/components/badge/ |
| Orbit (Tag) | orbit.kiwi/components/tag/ |
| GitLab Pajamas (Badge) | design.gitlab.com/components/badge |
| GitLab Pajamas (Label) | design.gitlab.com/components/label |
| Porsche (Tag) | designsystem.porsche.com/v3/components/tag/examples |
| Heroku Purple | design.herokai.com/purple3/docs/#badges |
| Quasar (Badge) | quasar.dev/vue-components/badge |
| Quasar (Chip) | quasar.dev/vue-components/chip |
| Red Hat (Badge) | ux.redhat.com/elements/badge/ |
| Red Hat (Tag) | ux.redhat.com/elements/tag/ |
| Ruter | components.ruter.as/#/Components/Badges/StatusBadge |
| Sainsbury's | design-systems.sainsburys.co.uk/components/tag/ |
| Seek (Pill) | seek-oss.github.io/seek-style-guide/pill |
| Seek (Badge) | seek-oss.github.io/seek-style-guide/badge |
| Shoelace (Badge) | shoelace.style/components/badge |
| Shoelace (Tag) | shoelace.style/components/tag |
| Sprout Social | sproutsocial.com/seeds/components/badge |
| Skyscanner | skyscanner.design/latest/components/badge/overview-SAeHUC0G |
| Stack Overflow (Badges) | stackoverflow.design/product/components/badges |
| Stack Overflow (Tags) | stackoverflow.design/product/components/tags |
| Subzero (Badge) | subzero.axis.bank.in/components/badge |
| Subzero (Chip) | subzero.axis.bank.in/components/chip |
| Subzero (Tag) | subzero.axis.bank.in/components/tag |
| Thumbprint | thumbprint.design/components/pill/react/ |
| USWDS | designsystem.digital.gov/components/tag/ |
| Visa (Badge) | design.visa.com/components/badge/ |
| Visa (Chips) | design.visa.com/components/chips/ |
| Wonderflow | design.wonderflow.ai/get-started/components/widgets/chip |
| Web Awesome (Badge) | webawesome.com/docs/components/badge/ |
| Web Awesome (Tag) | webawesome.com/docs/components/tag/ |
| Workday Canvas (Status) | canvas.workday.com/components/indicators/status-indicator/ |
| Workday Canvas (Pill) | canvas.workday.com/components/indicators/pill |
| Auro (Alaska) | auro.alaskaair.com/components/auro/badge |
| Bolt | boltdesignsystem.com/pattern-lab/?p=viewall-components-chip |
| Talend (Tag) | design.talend.com/?path=/docs/messaging-tag--docs |
| Talend (Badge) | design.talend.com/?path=/docs/messaging-badge--docs |
| Talend (Status) | design.talend.com/?path=/docs/feedback-status--docs |
| Freshworks (Label) | crayons.freshworks.com/components/core/label/ |
| Freshworks (Tag) | crayons.freshworks.com/components/core/tag/ |
| Freshworks (Pill) | crayons.freshworks.com/components/core/pill/ |
| GC Collab (Canada) | design.gccollab.ca/component/badges |

---

### Breadcrumbs
Hierarchical navigation trail. Also known as: Breadcrumb.

| System | URL |
|--------|-----|
| shadcn/ui | ui.shadcn.com/docs/components/breadcrumb |
| Ant Design | ant.design/components/breadcrumb |
| Atlassian | atlassian.design/components/breadcrumbs/examples |
| Carbon | carbondesignsystem.com/components/breadcrumb/usage/ |
| Chakra UI | chakra-ui.com/docs/components/breadcrumb |
| Spectrum | spectrum.adobe.com/page/breadcrumbs/ |
| Polaris | — |
| Lightning | lightningdesignsystem.com/components/breadcrumbs/ |
| PatternFly | patternfly.org/components/breadcrumb |
| GOV.UK | design-system.service.gov.uk/components/breadcrumbs/ |
| Hero UI | heroui.com/docs/components/breadcrumbs |
| Gestalt | — |
| Primer | — |
| Base Web | baseweb.design/components/breadcrumbs/ |
| Blueprint | blueprintjs.com/docs/#core/components/breadcrumbs |
| Bootstrap | getbootstrap.com/docs/4.3/components/breadcrumb/ |
| Bulma | bulma.io/documentation/components/breadcrumb/ |
| Bolt | boltdesignsystem.com/pattern-lab/?p=viewall-components-breadcrumb |
| Cauldron | cauldron.dequelabs.com/components/Breadcrumb |
| Cedar | cedar.rei.com/components/breadcrumb |
| Clarity | — |
| Decathlon | decathlon.design/726f8c765/p/95fc13-breadcrumb/b/0027e1 |
| Dell | delldesignsystem.com/components/breadcrumb/ |
| eBay (MindPatterns) | ebay.gitbook.io/mindpatterns/navigation/breadcrumbs |
| eBay (Playbook) | playbook.ebay.com/design-system/components/breadcrumb |
| Elastic UI | eui.elastic.co/docs/components/navigation/breadcrumbs/ |
| Elisa | designsystem.elisa.fi/9b207b2c3/p/717203-breadcrumbs-you-are-here |
| Flowbite | flowbite.com/docs/components/breadcrumb/ |
| Fluent UI | developer.microsoft.com/en-us/fluentui#/controls/web/breadcrumb |
| giffgaff | giffgaff.design/components/for-web/breadcrumbs/ |
| Gold (AU Gov) | gold.designsystemau.org/components/breadcrumbs/ |
| HashiCorp Helios | helios.hashicorp.design/components/breadcrumb |
| Helsinki | — |
| Instructure | instructure.design/#Breadcrumb |
| Jokul | jokul.fremtind.no/komponenter/breadcrumb |
| Mozilla Protocol | protocol.mozilla.org/components/detail/breadcrumb.html |
| Newskit | newskit.co.uk/components/breadcrumbs/ |
| NHS | service-manual.nhs.uk/design-system/components/breadcrumbs |
| NS (Dutch Rail) | design.ns.nl/4a05a30ad/p/3007f8-breadcrumbs |
| ONS | ons-design-system.netlify.app/components/breadcrumbs/ |
| Orbit (Kiwi) | orbit.kiwi/components/breadcrumbs |
| GitLab Pajamas | design.gitlab.com/components/breadcrumb |
| Pharos | pharos.jstor.org/components/breadcrumb |
| Quasar | quasar.dev/vue-components/breadcrumbs |
| Red Hat | ux.redhat.com/elements/breadcrumb/ |
| Ruter | components.ruter.as/#/Components/Navigation/Breadcrumbs |
| Sainsbury's | design-systems.sainsburys.co.uk/components/breadcrumb/ |
| SEB | designlibrary.sebgroup.com/components/breadcrumbs/ |
| Shoelace | — |
| Skyscanner | skyscanner.design/latest/components/breadcrumb/web-rxEpDVCn |
| Stack Overflow | stackoverflow.design/product/components/breadcrumbs |
| Subzero (Axis) | subzero.axis.bank.in/components/breadcrumb |
| USWDS | — |
| Visa | design.visa.com/components/breadcrumbs/ |
| W3C | design-system.w3.org/components/breadcrumbs.html |
| Web Awesome | webawesome.com/docs/components/breadcrumb/ |
| TFWM | designsystem.tfwm.org.uk/components/breadcrumb/ |
| Workday Canvas | canvas.workday.com/components/navigation/breadcrumbs |
| GC Collab (Canada) | design.gccollab.ca/component/breadcrumbs |
| Talend | design.talend.com/?path=/docs/navigation-breadcrumbs--docs |

---

### Button
Primary action triggers. Also known as: CTA, Action Button, Icon Button, FAB.

| System | URL |
|--------|-----|
| shadcn/ui (Button) | ui.shadcn.com/docs/components/button |
| shadcn/ui (Toggle) | ui.shadcn.com/docs/components/toggle |
| Headless UI | headlessui.com/react/button |
| Ariakit | ariakit.org/components/button |
| Ant Design | ant.design/components/button |
| Ant Design (Float) | ant.design/components/float-button |
| Atlassian | atlassian.design/components/button/examples |
| Carbon | carbondesignsystem.com/components/button/usage/ |
| Chakra UI | chakra-ui.com/docs/components/button |
| Chakra UI (Icon) | chakra-ui.com/docs/components/icon-button |
| Spectrum (Action) | spectrum.adobe.com/page/action-button/ |
| Spectrum (Button) | spectrum.adobe.com/page/button/ |
| Polaris | polaris.shopify.com/components/actions/button |
| Lightning | lightningdesignsystem.com/components/buttons/ |
| Fluent UI | developer.microsoft.com/en-us/fluentui#/controls/web/button |
| Material 3 | m3.material.io/components/all-buttons |
| PatternFly | patternfly.org/components/button |
| GOV.UK | design-system.service.gov.uk/components/button/ |
| Geist | vercel.com/geist/button |
| Hero UI | heroui.com/docs/components/button |
| Gestalt | gestalt.pinterest.systems/web/button |
| Gestalt (Icon) | gestalt.pinterest.systems/web/iconbutton |
| Primer | primer.style/design/components/button |
| Primer (Icon) | primer.style/design/components/icon-button |
| Base Web | baseweb.design/components/button/ |
| Blueprint | blueprintjs.com/docs/#core/components/buttons |
| Bootstrap | getbootstrap.com/docs/4.3/components/buttons/ |
| Bulma | bulma.io/documentation/elements/button/ |
| Cauldron | cauldron.dequelabs.com/components/Button |
| Cedar | cedar.rei.com/components/button |
| Clarity | clarity.design/documentation/button |
| Decathlon | decathlon.design/726f8c765/p/8008f8-button/b/50afe1 |
| Dell | delldesignsystem.com/components/button/ |
| Duet | duetds.com/components/button/ |
| eBay | playbook.ebay.com/design-system/components/button |
| Elastic UI | eui.elastic.co/docs/components/navigation/buttons/button/ |
| Elisa | designsystem.elisa.fi/9b207b2c3/p/37fb17-button |
| Evergreen | — |
| Flowbite | flowbite.com/docs/components/buttons/ |
| Forma 36 | f36.contentful.com/components/button |
| giffgaff | giffgaff.design/components/for-web/buttons/ |
| Gold (AU Gov) | gold.designsystemau.org/components/buttons/ |
| Grommet | v2.grommet.io/button |
| HashiCorp Helios | helios.hashicorp.design/components/button |
| Helsinki | hds.hel.fi/components/button |
| Inclusive Components | — |
| Instructure | instructure.design/#Button |
| Jokul | jokul.fremtind.no/komponenter/buttons |
| Morningstar | design.morningstar.com/systems/product/components/button |
| Mozilla Protocol | protocol.mozilla.org/components/detail/button--primary.html |
| Newskit | newskit.co.uk/components/button/ |
| NHS | service-manual.nhs.uk/design-system/components/buttons |
| Nord | nordhealth.design/components/button/ |
| NS (Dutch Rail) | design.ns.nl/4a05a30ad/p/886087-button |
| ONS | ons-design-system.netlify.app/components/button/ |
| Ontario | designsystem.ontario.ca/components/detail/buttons.html |
| Orbit (Kiwi) | orbit.kiwi/components/button/ |
| GitLab Pajamas | design.gitlab.com/components/button |
| Paste (Twilio) | paste.twilio.design/components/button |
| Pharos | pharos.jstor.org/components/button |
| Porsche | designsystem.porsche.com/v3/components/button/examples |
| Heroku Purple | design.herokai.com/purple3/docs/#buttons |
| Quasar | quasar.dev/vue-components/button |
| Red Hat | ux.redhat.com/elements/button/ |
| Ruter | components.ruter.as/#/Components/Buttons/Button |
| Sainsbury's | design-systems.sainsburys.co.uk/components/button/ |
| SEB | designlibrary.sebgroup.com/components/forms/button/ |
| Seek | seek-oss.github.io/seek-style-guide/button |
| Shoelace | shoelace.style/components/button |
| Sprout Social | sproutsocial.com/seeds/components/button |
| Guardian | theguardian.design/2a1e5182b/p/435225-button |
| Stack Overflow | stackoverflow.design/product/components/buttons |
| Thumbprint | thumbprint.design/components/button/usage/ |
| Skyscanner | skyscanner.design/latest/components/button/overview-sxyKum4C |
| Subzero (Axis) | subzero.axis.bank.in/components/button |
| USWDS | designsystem.digital.gov/components/button/ |
| Visa | design.visa.com/components/button/ |
| W3C | design-system.w3.org/styles/buttons.html |
| Wonderflow | design.wonderflow.ai/get-started/components/actions/button |
| Web Awesome | webawesome.com/docs/components/button/ |
| TFWM | designsystem.tfwm.org.uk/components/buttons/ |
| Wise | wise.design/components/button |
| Workday Canvas | canvas.workday.com/components/buttons/button |
| Auro (Alaska) | auro.alaskaair.com/components/auro/button |
| 98.css | jdan.github.io/98.css/#button |
| A11y Style Guide | a11y-style-guide.com/style-guide/section-general.html#kssref-general-buttons |
| Brighton & Hove | design.brighton-hove.gov.uk/website-pattern-library.php?p=in-page-buttons |
| Talend | design.talend.com/?path=/docs/clickable-button--docs |
| Freshworks | crayons.freshworks.com/components/core/button/ |
| GC Collab (Canada) | design.gccollab.ca/component/buttons |
| Nostyle | nostyle.onrender.com/components/button |

---

### Button Group
Grouped action buttons. Also known as: Button Set, Action Bar, Button Dock, Command Bar.

| System | URL |
|--------|-----|
| shadcn/ui | ui.shadcn.com/docs/components/toggle-group |
| Spectrum (Action Group) | spectrum.adobe.com/page/action-group/ |
| Spectrum (Button Group) | spectrum.adobe.com/page/button-group/ |
| Polaris | polaris.shopify.com/components/actions/button-group |
| Polaris (Page Actions) | polaris.shopify.com/components/actions/page-actions |
| Primer (Action Bar) | primer.style/design/components/action-bar |
| Primer (Button Group) | primer.style/design/components/button-group |
| Base Web | baseweb.design/components/button-group/ |
| Blueprint | blueprintjs.com/docs/#core/components/button-group |
| Bootstrap | getbootstrap.com/docs/4.3/components/button-group/ |
| Clarity | clarity.design/documentation/button-group |
| Elastic UI | eui.elastic.co/docs/components/navigation/buttons/group/ |
| Elisa | designsystem.elisa.fi/9b207b2c3/p/923d96-buttongroup |
| Flowbite | flowbite.com/docs/components/button-group/ |
| Fluent UI | developer.microsoft.com/en-us/fluentui#/controls/web/commandbar |
| Forma 36 | f36.contentful.com/components/button-group |
| Gestalt | gestalt.pinterest.systems/web/buttongroup |
| HashiCorp Helios | helios.hashicorp.design/components/button-set |
| Lightning | lightningdesignsystem.com/components/button-groups/ |
| Mozilla Protocol | protocol.mozilla.org/components/detail/button-container--default.html |
| Nord | nordhealth.design/components/button-group/ |
| NS (Dutch Rail) | design.ns.nl/4a05a30ad/p/61b5f9-button-group |
| Orbit (Kiwi) | orbit.kiwi/components/buttongroup/ |
| PatternFly | patternfly.org/components/action-list |
| Porsche | designsystem.porsche.com/v3/components/button-group/examples |
| Quasar | quasar.dev/vue-components/button-group |
| Ruter | components.ruter.as/#/Components/Buttons/ButtonGroup |
| Seek | seek-oss.github.io/seek-style-guide/button-group |
| Shoelace | shoelace.style/components/button-group |
| Stack Overflow | stackoverflow.design/product/components/button-groups |
| Thumbprint | thumbprint.design/components/button-row/react/ |
| Web Awesome | webawesome.com/docs/components/button-group/ |
| Workday Canvas | canvas.workday.com/components/buttons/action-bar |
| Talend | design.talend.com/?path=/docs/form-buttons--docs |
| Freshworks | crayons.freshworks.com/components/core/button-group/ |

---

### Card
Content containers. Also known as: Tile, Panel, Document Card, Content Card, Product Card.

| System | URL |
|--------|-----|
| shadcn/ui | ui.shadcn.com/docs/components/card |
| Ant Design | ant.design/components/card |
| Carbon | — |
| Chakra UI | chakra-ui.com/docs/components/card |
| Spectrum | spectrum.adobe.com/page/cards/ |
| Polaris | polaris.shopify.com/components/layout-and-structure/card |
| Lightning | lightningdesignsystem.com/components/cards/ |
| Fluent UI | developer.microsoft.com/en-us/fluentui#/controls/web/documentcard |
| Material 3 | m3.material.io/components/cards/overview |
| PatternFly | patternfly.org/components/card |
| Geist | — |
| Hero UI | heroui.com/docs/components/card |
| Gestalt | gestalt.pinterest.systems/web/activationcard |
| Base Web | baseweb.design/components/card/ |
| Blueprint | blueprintjs.com/docs/#core/components/card |
| Bootstrap | getbootstrap.com/docs/4.3/components/card/ |
| Bolt | boltdesignsystem.com/pattern-lab/?p=viewall-components-card |
| Bulma | bulma.io/documentation/components/card/ |
| Cedar | cedar.rei.com/components/card |
| Clarity | clarity.design/documentation/card |
| Decathlon | decathlon.design/726f8c765/p/88fc2b-card/b/51e109 |
| Dell | delldesignsystem.com/components/card/ |
| Duet | duetds.com/components/card/ |
| eBay (Tile) | ebay.gitbook.io/mindpatterns/navigation/tile |
| eBay (Playbook) | playbook.ebay.com/design-system/components/item-tile |
| Elastic UI | eui.elastic.co/docs/components/containers/card/ |
| Elisa | designsystem.elisa.fi/9b207b2c3/p/850b09-card |
| Evergreen | — |
| Flowbite | flowbite.com/docs/components/card/ |
| Forma 36 | f36.contentful.com/components/card |
| giffgaff | giffgaff.design/components/for-web/cards/ |
| Gold (AU Gov) | gold.designsystemau.org/components/card/ |
| HashiCorp Helios | helios.hashicorp.design/components/card |
| Helsinki | hds.hel.fi/components/card |
| Inclusive Components | inclusive-components.design/cards/ |
| Jokul | jokul.fremtind.no/komponenter/card |
| Morningstar | design.morningstar.com/systems/product/components/card |
| Mozilla Protocol | protocol.mozilla.org/components/detail/card--overview.html |
| Newskit | newskit.co.uk/components/card/ |
| NHS | service-manual.nhs.uk/design-system/components/card |
| Nord | nordhealth.design/components/card/ |
| NS (Dutch Rail) | design.ns.nl/4a05a30ad/p/26b3c4-tile |
| British Gas | britishgas.design/docs/components/ns-card |
| ONS | ons-design-system.netlify.app/components/card/ |
| Orbit (Kiwi) | orbit.kiwi/components/card/ |
| GitLab Pajamas | design.gitlab.com/components/card |
| Paste (Twilio) | paste.twilio.design/components/card |
| Pharos | pharos.jstor.org/components/image-card |
| Polaris (Callout) | polaris.shopify.com/components/layout-and-structure/callout-card |
| Quasar | quasar.dev/vue-components/card |
| Red Hat (Card) | ux.redhat.com/elements/card/ |
| Red Hat (Tile) | ux.redhat.com/elements/tile/ |
| Ruter | components.ruter.as/#/Components/Cards/Card |
| Sainsbury's (Content) | design-systems.sainsburys.co.uk/components/content-card/ |
| Sainsbury's (Product) | design-systems.sainsburys.co.uk/components/product-card/ |
| SEB | designlibrary.sebgroup.com/components/card/ |
| Seek | seek-oss.github.io/seek-style-guide/card |
| Shoelace | shoelace.style/components/card |
| Stack Overflow | stackoverflow.design/product/components/cards |
| Thumbprint | thumbprint.design/components/service-card/usage/ |
| Skyscanner | skyscanner.design/latest/components/content-cards/web-n7qSZpec |
| Visa | design.visa.com/components/content-card/ |
| W3C | design-system.w3.org/components/cards.html |
| Wonderflow | design.wonderflow.ai/get-started/components/layouts/card |
| Web Awesome | webawesome.com/docs/components/card/ |
| TFWM | designsystem.tfwm.org.uk/components/content-card/ |
| Workday Canvas | canvas.workday.com/components/containers/card |
| Auro (Alaska) | auro.alaskaair.com/components/auro/card |
| A11y Style Guide | a11y-style-guide.com/style-guide/section-cards.html |
| Talend | design.talend.com/?path=/docs/layout-card--docs |
| GC Collab (Canada) | design.gccollab.ca/component/cards |

---

### Carousel
Scrollable content rotators. Also known as: Slider, Filmstrip, Content Slider.

| System | URL |
|--------|-----|
| shadcn/ui | ui.shadcn.com/docs/components/carousel |
| Ant Design | ant.design/components/carousel |
| Material 3 | m3.material.io/components/carousel/overview |
| Porsche | designsystem.porsche.com/v3/components/carousel/examples |
| Auro (Alaska) | auro.alaskaair.com/components/auro/carousel |
| BBC GEL | bbc.co.uk/gel/guidelines/carousel |
| Bootstrap | getbootstrap.com/docs/4.3/components/carousel/ |
| Cedar | cedar.rei.com/components/filmstrip |
| eBay (MindPatterns) | ebay.gitbook.io/mindpatterns/disclosure/carousel |
| eBay (Playbook) | playbook.ebay.com/design-system/components/carousel |
| Elisa | designsystem.elisa.fi/9b207b2c3/p/362948-carousel-wip |
| Flowbite | flowbite.com/docs/components/carousel/ |
| Grommet | v2.grommet.io/carousel |
| Inclusive Components | inclusive-components.design/a-content-slider/ |
| Lightning | lightningdesignsystem.com/components/carousel/ |
| Quasar | quasar.dev/vue-components/carousel |
| Sainsbury's | design-systems.sainsburys.co.uk/components/carousel/ |
| Skyscanner | skyscanner.design/latest/components/calendar/web-DDIY8XIe |
| Subzero (Axis) | subzero.axis.bank.in/components/carousel |
| Thumbprint | thumbprint.design/components/carousel/react/ |
| W3C | design-system.w3.org/components/slider.html |
| Web Awesome | webawesome.com/docs/components/carousel/ |

---

### Checkbox
Binary selection inputs. Also known as: Checkbox Card, Check.

| System | URL |
|--------|-----|
| shadcn/ui | ui.shadcn.com/docs/components/checkbox |
| Radix | radix-ui.com/primitives/docs/components/checkbox |
| Headless UI | headlessui.com/react/checkbox |
| Ariakit | ariakit.org/components/checkbox |
| Ant Design | ant.design/components/checkbox |
| Atlassian | atlassian.design/components/checkbox/examples |
| Carbon | carbondesignsystem.com/components/checkbox/usage/ |
| Chakra UI | chakra-ui.com/docs/components/checkbox |
| Chakra UI (Card) | chakra-ui.com/docs/components/checkbox-card |
| Spectrum | spectrum.adobe.com/page/checkbox/ |
| Polaris | polaris.shopify.com/components/selection-and-input/checkbox |
| Lightning | lightningdesignsystem.com/components/checkbox/ |
| Fluent UI | developer.microsoft.com/en-us/fluentui#/controls/web/checkbox |
| Material 3 | m3.material.io/components/checkbox/overview |
| PatternFly | patternfly.org/components/forms/checkbox |
| GOV.UK | design-system.service.gov.uk/components/checkboxes/ |
| Geist | vercel.com/geist/checkbox |
| Hero UI | heroui.com/docs/components/checkbox |
| Gestalt | gestalt.pinterest.systems/web/checkbox |
| Primer | primer.style/design/components/checkbox |
| Reach UI | reach.tech/checkbox |
| Base Web | baseweb.design/components/checkbox/ |
| Blueprint | blueprintjs.com/docs/#core/components/checkbox |
| Cauldron | cauldron.dequelabs.com/components/Checkbox |
| Cedar | cedar.rei.com/components/checkbox |
| Clarity | clarity.design/documentation/checkbox |
| Decathlon | decathlon.design/726f8c765/p/953c37-checkbox/b/5496b9 |
| Dell | delldesignsystem.com/components/checkbox/ |
| Duet | duetds.com/components/checkbox/ |
| eBay | playbook.ebay.com/design-system/components/checkbox |
| Elastic UI | eui.elastic.co/docs/components/forms/selection/checkbox-and-checkbox-group/ |
| Elisa | designsystem.elisa.fi/9b207b2c3/p/904ea9-checkbox |
| Evergreen | evergreen.segment.com/components/checkbox |
| Flowbite | flowbite.com/docs/forms/checkbox/ |
| Forma 36 | f36.contentful.com/components/checkbox |
| giffgaff | giffgaff.design/components/for-web/form-inputs/checkbox/ |
| Gold (AU Gov) | gold.designsystemau.org/components/control-input/#checkbox |
| Grommet | v2.grommet.io/checkbox |
| HashiCorp Helios | helios.hashicorp.design/components/form/checkbox |
| Helsinki | hds.hel.fi/components/checkbox |
| Instructure | instructure.design/#Checkbox |
| Jokul | jokul.fremtind.no/komponenter/checkbox |
| Momentum | momentum.design/components/checkbox |
| Morningstar | design.morningstar.com/systems/product/components/checkbox |
| Mozilla Protocol | protocol.mozilla.org/components/detail/checkboxes.html |
| Newskit | newskit.co.uk/components/checkbox/ |
| NHS | service-manual.nhs.uk/design-system/components/checkboxes |
| Nord | nordhealth.design/components/checkbox/ |
| NS (Dutch Rail) | design.ns.nl/4a05a30ad/p/87cb23-checkbox |
| ONS | ons-design-system.netlify.app/components/checkboxes/ |
| Ontario | designsystem.ontario.ca/components/detail/checkboxes.html |
| Orbit (Kiwi) | orbit.kiwi/components/checkbox/ |
| GitLab Pajamas | design.gitlab.com/components/checkbox |
| Pharos | pharos.jstor.org/components/checkbox |
| Porsche | designsystem.porsche.com/v3/components/checkbox-wrapper/examples |
| Quasar | quasar.dev/vue-components/checkbox |
| Ruter | components.ruter.as/#/Components/Forms/Checkbox |
| Sainsbury's | design-systems.sainsburys.co.uk/components/checkbox/ |
| SEB | designlibrary.sebgroup.com/components/forms/checkbox/ |
| Seek | seek-oss.github.io/seek-style-guide/checkbox |
| Shoelace | shoelace.style/components/checkbox |
| Sprout Social | sproutsocial.com/seeds/components/checkbox |
| Guardian | theguardian.design/2a1e5182b/p/466fad-checkbox |
| Stack Overflow | stackoverflow.design/product/components/checkbox |
| Subzero (Axis) | subzero.axis.bank.in/components/checkbox |
| Thumbprint | thumbprint.design/components/checkbox/react/ |
| USWDS | — |
| Visa | design.visa.com/components/checkbox/ |
| W3C | design-system.w3.org/styles/forms.html#checkboxes |
| Web Awesome | webawesome.com/docs/components/checkbox/ |
| TFWM | designsystem.tfwm.org.uk/components/checkboxes/ |
| Wise | wise.design/components/checkbox |
| Workday Canvas | canvas.workday.com/components/inputs/checkbox |
| Auro (Alaska) | auro.alaskaair.com/components/auro/checkbox |
| Skyscanner | skyscanner.design/latest/components/checkbox/web-iTrW8zds |
| 98.css | jdan.github.io/98.css/#checkbox |
| Talend | design.talend.com/?path=/docs/form-fields-checkbox--docs |
| Freshworks | crayons.freshworks.com/components/core/checkbox/ |
| Nostyle | nostyle.onrender.com/components/checkboxes |

---

### Color Picker
Color selection interfaces. Also known as: Color Area, Color Slider, Swatch Picker, Palette Picker.

| System | URL |
|--------|-----|
| Chakra UI | chakra-ui.com/docs/components/color-picker |
| Spectrum (Area) | spectrum.adobe.com/page/color-area/ |
| Spectrum (Slider) | spectrum.adobe.com/page/color-slider/ |
| Spectrum (Wheel) | spectrum.adobe.com/page/color-wheel/ |
| Fluent UI | developer.microsoft.com/en-us/fluentui#/controls/web/colorpicker |
| Elastic UI | eui.elastic.co/docs/components/forms/other/color-picker/ |
| Lightning | lightningdesignsystem.com/components/color-picker/ |
| Quasar | quasar.dev/vue-components/color-picker |
| Sainsbury's | design-systems.sainsburys.co.uk/components/colour-swatch/ |
| Shoelace | shoelace.style/components/color-picker |
| Visa | design.visa.com/components/color-selector/ |
| Web Awesome | webawesome.com/docs/components/color-picker/ |
| Workday Canvas | canvas.workday.com/components/inputs/color-input |
| Talend | design.talend.com/?path=/docs/form-fields-color--docs |

---

### Combobox
Searchable selection inputs. Also known as: Autocomplete, Autosuggest, Typeahead, Lookup, Super Select.

| System | URL |
|--------|-----|
| shadcn/ui | ui.shadcn.com/docs/components/combobox |
| Headless UI | headlessui.com/react/combobox |
| Ariakit | ariakit.org/components/combobox |
| Ant Design | ant.design/components/auto-complete |
| Spectrum | spectrum.adobe.com/page/combo-box/ |
| Lightning | lightningdesignsystem.com/components/combobox/ |
| Fluent UI | developer.microsoft.com/en-us/fluentui#/controls/web/combobox |
| Geist | vercel.com/geist/combobox |
| Reach UI | reach.tech/combobox |
| Base Web | baseweb.design/components/combobox/ |
| Bolt | boltdesignsystem.com/pattern-lab/?p=viewall-components-typeahead |
| Cauldron | cauldron.dequelabs.com/components/Combobox |
| Clarity | clarity.design/documentation/combobox |
| Dell | delldesignsystem.com/components/dropdown/ |
| eBay | playbook.ebay.com/design-system/components/combobox |
| Elastic UI | eui.elastic.co/docs/components/forms/selection/super-select/ |
| Elisa | designsystem.elisa.fi/9b207b2c3/p/082dd3-combobox |
| Evergreen | evergreen.segment.com/components/combobox |
| Forma 36 | f36.contentful.com/components/autocomplete |
| Generic Components | genericcomponents.netlify.app/generic-listbox/demo/index.html |
| Morningstar | design.morningstar.com/systems/product/components/combo-box |
| NS (Dutch Rail) | design.ns.nl/4a05a30ad/p/07c070-autosuggest |
| ONS | ons-design-system.netlify.app/components/autosuggest/ |
| Paste (Twilio) | paste.twilio.design/components/combobox |
| Pharos | pharos.jstor.org/components/combobox |
| Primer | primer.style/design/components/autocomplete |
| Sainsbury's | design-systems.sainsburys.co.uk/components/combobox/ |
| Seek | seek-oss.github.io/seek-style-guide/autosuggest |
| Visa | design.visa.com/components/combobox/ |
| W3C | design-system.w3.org/styles/forms.html#auto-complete |
| Wonderflow | design.wonderflow.ai/get-started/components/inputs/autocomplete |
| Skyscanner | skyscanner.design/latest/components/autosuggest/web-1dnVX8RX |
| Talend | design.talend.com/?path=/docs/form-fields-combobox--fieldcombobox |
| Nostyle | nostyle.onrender.com/components/autocomplete |

---

### Date Input
Text-based date entry fields. Also known as: Date Field, Memorable Date, Compact Date Input.

| System | URL |
|--------|-----|
| Hero UI | heroui.com/docs/components/date-input |
| Gestalt | gestalt.pinterest.systems/web/datefield |
| GOV.UK | design-system.service.gov.uk/components/date-input/ |
| Helsinki | hds.hel.fi/components/date-input |
| Instructure | instructure.design/#DateInput |
| Mozilla Protocol | protocol.mozilla.org/components/detail/input--date.html |
| NHS | service-manual.nhs.uk/design-system/components/date-input |
| Nord | nordhealth.design/components/date-picker/ |
| NS (Dutch Rail) | design.ns.nl/4a05a30ad/p/5190ba-date-input |
| TFWM | designsystem.tfwm.org.uk/components/date-input/ |
| Wise | wise.design/components/date-input |
| Wise (Compact) | wise.design/components/compact-date-input |
| Brighton & Hove | design.brighton-hove.gov.uk/website-pattern-library.php?p=date-input |
| giffgaff | giffgaff.design/components/for-web/form-inputs/date-input/ |
| Nostyle | nostyle.onrender.com/components/memorable-date |
| Talend | design.talend.com/?path=/docs/form-fields-date--docs |

---

### Datepicker
Calendar-based date selection. Also known as: Calendar, Date Picker, Date Range, Month Picker.

| System | URL |
|--------|-----|
| shadcn/ui | ui.shadcn.com/docs/components/calendar |
| Ant Design | ant.design/components/date-picker |
| Atlassian | atlassian.design/components/datetime-picker/examples |
| Carbon | carbondesignsystem.com/components/date-picker/usage/ |
| Material 3 | m3.material.io/components/date-pickers/overview |
| Lightning | lightningdesignsystem.com/components/datepickers/ |
| Fluent UI | developer.microsoft.com/en-us/fluentui#/controls/web/datepicker |
| PatternFly | patternfly.org/components/date-and-time/date-picker |
| Geist | vercel.com/geist/calendar |
| Hero UI (Calendar) | heroui.com/docs/components/calendar |
| Hero UI (Range) | heroui.com/docs/components/range-calendar |
| Gestalt | gestalt.pinterest.systems/web/datepicker |
| Gestalt (Range) | gestalt.pinterest.systems/web/daterange |
| Base Web | baseweb.design/components/datepicker/ |
| Blueprint | blueprintjs.com/docs/#datetime2/date-picker3 |
| Clarity | clarity.design/documentation/datepicker |
| Dell | delldesignsystem.com/components/date-picker/ |
| eBay | playbook.ebay.com/design-system/components/date-picker |
| Elastic UI | eui.elastic.co/docs/components/forms/date-and-time/date-picker/ |
| Elisa | designsystem.elisa.fi/9b207b2c3/p/185f64-datepicker |
| Flowbite | flowbite.com/docs/components/datepicker/ |
| Jokul | jokul.fremtind.no/komponenter/datepicker |
| Morningstar | design.morningstar.com/systems/product/components/date-picker |
| Nord | nordhealth.design/components/calendar/ |
| NS (Dutch Rail) | design.ns.nl/4a05a30ad/p/30e5a5-datepicker-input |
| British Gas | britishgas.design/docs/components/ns-datepicker |
| GitLab Pajamas | design.gitlab.com/components/date-picker |
| Quasar | quasar.dev/vue-components/date |
| Ruter | components.ruter.as/#/Components/Interactive/DatePicker |
| Sainsbury's | design-systems.sainsburys.co.uk/components/date-picker/ |
| SEB | designlibrary.sebgroup.com/components/date-picker/ |
| Seek | seek-oss.github.io/seek-style-guide/monthpicker |
| Subzero (Axis) | subzero.axis.bank.in/components/date-picker |
| Visa | design.visa.com/components/date-selector/ |
| Skyscanner | skyscanner.design/latest/components/datepicker/web-QqbdTkly |
| Freshworks | crayons.freshworks.com/components/core/datepicker/ |
| Nostyle | nostyle.onrender.com/components/date-picker |

---

### Drawer
Slide-in panels from screen edges. Also known as: Sheet, Side Panel, Bottom Sheet, Flyout, Tray.

| System | URL |
|--------|-----|
| shadcn/ui (Drawer) | ui.shadcn.com/docs/components/drawer |
| shadcn/ui (Sheet) | ui.shadcn.com/docs/components/sheet |
| Ant Design | ant.design/components/drawer |
| Atlassian | atlassian.design/components/drawer/examples |
| Chakra UI | chakra-ui.com/docs/components/drawer |
| Spectrum | spectrum.adobe.com/page/tray/ |
| PatternFly (Drawer) | patternfly.org/components/drawer |
| PatternFly (Notification) | patternfly.org/components/notification-drawer |
| Geist | vercel.com/geist/drawer |
| Hero UI | heroui.com/docs/components/drawer |
| Material 3 | m3.material.io/components/side-sheets/guidelines |
| Base Web | baseweb.design/components/drawer/ |
| Blueprint | blueprintjs.com/docs/#core/components/drawer |
| Cauldron (Bottom Sheet) | cauldron.dequelabs.com/components/BottomSheet |
| Cauldron (Drawer) | cauldron.dequelabs.com/components/Drawer |
| Dell | delldesignsystem.com/components/drawer/ |
| eBay (Bottom Sheet) | playbook.ebay.com/design-system/components/bottom-sheet |
| eBay (Panel) | playbook.ebay.com/design-system/components/panel |
| Flowbite | flowbite.com/docs/components/drawer/ |
| HashiCorp Helios | helios.hashicorp.design/components/flyout |
| Instructure | instructure.design/#DrawerLayout |
| Newskit | newskit.co.uk/components/drawer/ |
| Nord | nordhealth.design/components/drawer/ |
| NS (Dutch Rail) | design.ns.nl/4a05a30ad/p/17e19a-side-drawer |
| Orbit (Kiwi) | orbit.kiwi/components/drawer/ |
| GitLab Pajamas | design.gitlab.com/components/drawer |
| Porsche | designsystem.porsche.com/v3/components/flyout/examples |
| Sainsbury's | design-systems.sainsburys.co.uk/components/drawer/ |
| Shoelace | shoelace.style/components/drawer |
| Sprout Social | sproutsocial.com/seeds/components/drawer |
| Subzero (Axis) | subzero.axis.bank.in/components/bottom-sheet |
| Visa (Nav Drawer) | design.visa.com/components/navigation-drawer/ |
| Visa (Panel) | design.visa.com/components/panel/ |
| Wonderflow | design.wonderflow.ai/get-started/components/dialogs/drawer |
| Web Awesome | webawesome.com/docs/components/drawer/ |
| Workday Canvas | canvas.workday.com/components/containers/side-panel |
| Skyscanner | skyscanner.design/latest/components/drawer/web-QAxL5e0N |
| Talend | design.talend.com/?path=/docs/navigation-floatingdrawer--docs |

---

### Dropdown Menu
Context menus and action menus. Also known as: Menu, Context Menu, Action Menu, Options Menu, Listbox.

| System | URL |
|--------|-----|
| Ariakit (Menu) | ariakit.org/components/menu |
| Ariakit (Menubar) | ariakit.org/components/menubar |
| Ant Design | ant.design/components/dropdown |
| Atlassian | atlassian.design/components/dropdown-menu/examples |
| Carbon | carbondesignsystem.com/components/overflow-menu/usage/ |
| Headless UI | headlessui.com/react/menu |
| Spectrum | — |
| Lightning | — |
| Fluent UI (Dropdown) | developer.microsoft.com/en-us/fluentui#/controls/web/dropdown |
| Fluent UI (Context) | developer.microsoft.com/en-us/fluentui#/controls/web/contextualmenu |
| Geist | vercel.com/geist/menu |
| Gestalt | gestalt.pinterest.systems/web/dropdown |
| Blueprint | blueprintjs.com/docs/#core/components/menu |
| Bootstrap | getbootstrap.com/docs/4.3/components/dropdowns/ |
| Bulma | bulma.io/documentation/components/dropdown/ |
| Cauldron | cauldron.dequelabs.com/components/OptionsMenu |
| Clarity | clarity.design/documentation/dropdown |
| Dell | delldesignsystem.com/components/action-menu/ |
| eBay (Listbox) | ebay.gitbook.io/mindpatterns/input/listbox-button |
| Elastic UI | eui.elastic.co/docs/components/navigation/context-menu/ |
| Evergreen | evergreen.segment.com/components/select-menu |
| Flowbite | flowbite.com/docs/components/dropdowns/ |
| Forma 36 | f36.contentful.com/components/menu |
| Grommet | v2.grommet.io/menu |
| Decathlon | decathlon.design/726f8c765/p/42d824-dropdown/b/6647a9 |
| Freshworks | crayons.freshworks.com/components/core/menu/ |
| Talend | design.talend.com/?path=/docs/clickable-dropdown--docs |

---

## Coverage Statistics

| Category | Components Listed | Avg Systems per Component |
|----------|-------------------|--------------------------|
| Layout | Accordion, Carousel | ~40 |
| Navigation | Breadcrumbs | ~45 |
| Actions | Button, Button Group | ~70, ~35 |
| Data Display | Avatar, Badge, Card | ~35, ~65, ~55 |
| Feedback | Alert | ~60 |
| Inputs | Checkbox, Color Picker, Combobox, Date Input, Datepicker | ~60, ~14, ~30, ~16, ~30 |
| Overlays | Drawer, Dropdown Menu | ~35, ~25 |

**Total unique design systems indexed: 110+**
**Total component-to-system mappings: 900+**

---

## Agent Quick-Reference

When scaffolding a new component:
1. Find the component category above
2. Check shadcn/ui first (our primary mapping target)
3. Cross-reference Radix/Headless UI for headless primitives
4. Sample 3 additional systems for prop consensus
5. Note naming variants (the "Also known as" line) for search

When auditing completeness:
1. Walk each category header
2. Check if the project has an equivalent
3. Flag missing components by priority (Buttons/Inputs are critical, Color Picker is niche)