design-system-stack

Applied workflow skill for producing Awwwards-caliber animated landing pages using Claude Design as the orchestrator, with motionsites.ai (animated backgrounds), higgsfield.io or Kling 3 (AI animation generation), Dribbble (component inspiration), shots.so (animation showcase/video edit), and land-book (landing page templates) as the accelerator toolchain. Use when the user asks to design, prototype, animate, or ship a landing page with motion — from bare idea to code-ready handoff. Orchestrates on top of the three design-system skills in this stack (extract-design-system, design-system-patterns, awesome-design-systems) and hands off to existing animation-code skills (awwwards-animations, modern-web-design) for implementation.

Curated catalog of 185 publicly documented design systems (Material, Carbon, Polaris, Fluent, GOV.UK, Atlassian, Salesforce Lightning, Chakra, Mantine, shadcn/ui, Radix, etc.) indexed by feature flags — Components, Voice & Tone, Designers Kit, Source code. Use when researching design-system precedents, benchmarking a component against shipped systems, finding Figma/Sketch kits to reference, sourcing editorial voice guidelines, looking up a system by name, or citing real-world prior art. Complements the primary skills extract-design-system and design-system-patterns by supplying the "who has already built this" catalog they reason over.