Design Reference Skill — {PROJECT_NAME}

Enforce visual and interaction consistency across code and Figma.

Mindset

Never make a colour, spacing, typography, or component decision from memory. Always read the reference sheet first. The reference sheet is the contract — code is the implementation. When in doubt, check the token; when the token is wrong, update the reference sheet first, then the code.

When to activate

• Before adding or editing any CSS or inline style
• Before creating a new React/HTML component
• Before reviewing a PR that touches UI files
• When asked “is this on brand?”, “does this match the design?”, or “check the style”
• Before making a Figma decision on colour, spacing, or type

Workflow

Step 1 — Read the reference sheet

Use the Read tool on docs/design/design-reference.md.

Step 2 — Identify the relevant section

Step 3 — Apply the rules

{Paste the 6–8 most important project-specific rules from the generated reference sheet here.}

Step 4 — Output format for reviews

When reviewing files for style consistency, output findings as:

file:line — [RULE] description

Group findings by category: COLOUR, TYPOGRAPHY, SPACING, LAYOUT, COMPONENT, ACCESSIBILITY, DARK MODE, MOTION.

Anti-patterns to catch

Token quick-reference

{Paste the colour, font, and spacing tokens in the compact format from docs/design/design-reference.md.}