design-system-showcaselisted

# Design System Showcase Skill Create a portable design-system skill package and its showcase site from a real project, product, or brand. The output is an npm package: researched visual language, CSS tokens, a one-page cheatsheet, reference docs, HTML mockup templates, a React showcase SPA, demo HTML files with PDF exports, and TypeScript verification. ## Core Principles - Start from real artifacts, not generic taste. Use official product pages, docs, repositories, screenshots, logos, decks, or user-provided materials. - Keep `SKILL.md` procedural and lean — a task routing table, not a brochure. Put detailed design rules in `references/`. - `CHEATSHEET.md` is the daily driver. Agents read it before every mockup or component task. Full rationale lives in `references/tokens.md`. - Use progressive disclosure. Tell the agent exactly when to read each reference file. - Generate assets only after the design language is documented. The showcase, templates, and demos must all consume the same `src/tokens.css`. - Never invent brand facts, logos, screenshots, product UI, metrics, dates, or partnerships. Mark gaps or ask once. ## Target Repository Shape ```text . ├── CHEATSHEET.md # One-page quick reference (invariants, color table, typography, spacing, quick decisions) ├── LICENSE ├── README.md # Install + usage + verify ├── SKILL.md # Lean execution guide with task routing ├── package.json # npm package: exports, scri