Docs / skills / frontend-design

Prime · frontend-design

frontend-design is the flagship Prime — colour, typography, motion, spacing, accessibility, and component patterns on top of the protocol.

domain.yaml

name: frontend-design
version: "1.0.0"
description: Design knowledge for AI agents — color, typography, motion, spacing,
             accessibility, and component patterns.

# Hints to the retriever about the dominant taxonomy.
hierarchy: visual-hierarchy

# Multi-axis tags the retriever boosts on when intent matches.
axes:
  - layout
  - typography
  - spacing
  - color
  - motion
  - accessibility

# Default contract scaffolds applied when a method doesn't override.
contract:
  typography: atom-12-array
  color: atom-token-semantic

# L5 validator hooks.
validators:
  - name: html-semantic
    checker: regex
    pattern: '^<([a-z][a-z0-9]*)\b[^>]*>'
  - name: color-token
    checker: ai-judge
    rubric: '@frontend-design/rubric-color-token'

Personas as design lineage

The persona kind is used here to bundle a coherent aesthetic — a "design lineage" or brand system. A frontend-design L1 produces an intent like { axes: ["layout", "color"], persona: "@stripe-fintech", ... }; the matching persona atom carries the voice + companion atoms that define that lineage.

See also

• Architecture → Domain plugin — how domain.yaml is wired into the runtime.
• Extending → domain.yaml — full field reference.
• Spec → Atoms — the persona kind.
• Marketplace — install the corpus.