What problem does it solve? Building or restyling UI components without a fixed design reference leads to visual drift: ad-hoc colors, one-off type sizes, and generic component defaults that erode a product's identity. This Skill enforces a researched, locked visual direction — white canvas, IBM Plex Mono figures, hairline rules, one charcoal action — so every screen stays consistent with the established system. ## Core Features & Use Cases - Locked design reference: A documented "Blueprint on Paper" direction with explicit preserve/borrow/reject rules, so styling decisions are checked against a source rather than taste. - Token and recipe reference: A references/tokens.md file with every color, type scale, radius, spacing, and shadow token plus per-component recipes for the card, countdown, score table, textarea, and sparkline. - Screen layout rules: Concrete layout specifications for the drill, feedback, and dashboard screens, including responsive behavior below 720px and accessibility constraints like focus rings and contrast floors. - Use Case: When adding a new shadcn/ui component or restyling the score table, consult the lock and token tables to pick the correct color role, type size, and radius instead of inventing values. ## Quick Start Ask the AI to restyle a component under src/ according to the locked design system, reading references/tokens.md before writing any CSS.
