What problem does it solve? Multi-session frontend work often drifts in typography, color, spacing, and component styling because design decisions live only in chat history. This Skill establishes a durable, agent-readable DESIGN.md contract that keeps visual identity consistent across sessions, agents, and implementation passes. ## Core Features & Use Cases - Read and apply existing DESIGN.md: Parse YAML front matter tokens and Markdown rationale, compare them against real implementation tokens, and feed only the relevant subset to frontend workers. - Create from project truth: Build DESIGN.md from brand assets, current UI, tokens, components, and Figma sources rather than fabricating a generic design system. - Validate and detect drift: Use the upstream Google Labs CLI (lint, diff, token export to Tailwind or DTCG) plus rendered UI and accessibility checks to confirm the contract matches production. - Use Case: A team notices agents keep producing inconsistent button styles across sessions. Use this Skill to encode semantic color roles, type hierarchy, and component states into DESIGN.md, then verify each new UI change against it. ## Quick Start Read the project's DESIGN.md and update the button component styles to match its semantic tokens and rationale.
