frontend-playbook

Use when starting a greenfield frontend project, a new page or section, or a restyle pass that spans the full design-to-verify flow — design tokens, UI build, animation/motion, performance audit, and end-to-end testing — across React, Vue, Svelte, or vanilla stacks. Do NOT use for single-component tweaks, pure backend/API work, bug fixes in existing code, or one-off questions about a single skill (load design-md, frontend-design, gsap-*, performance-optimization, or webapp-testing directly instead).

Establish a design-system baseline for a frontend project using Google's DESIGN.md format (a single file with YAML design tokens plus markdown rationale that gives coding agents a persistent, structured understanding of the visual identity). Use when starting or restyling a frontend project, when the user mentions DESIGN.md, design tokens, design system, brand-to-UI, or wants colors/typography/spacing/radius locked down before UI work. Author and lint a DESIGN.md, then export tokens to Tailwind or W3C DTCG so frontend-design and gsap skills build against concrete values instead of guessing.