domains / design / design-system-creation / design-system
The three skills share the name 'design-system' but perform fundamentally different tasks. The first (microsoft) is a generator for a specific mobile stack (Expo/Tamagui) that creates a brand spec, tokens, and an HTML gallery. The second (jezweb) is an extractor that reverse-engineers a design system from an existing website or screenshot into a DESIGN.md file. The third (sickn33) is a set of mechanical implementation invariants (performance, FOUT prevention, token architecture) for frontend code. Because they cover generation, extraction, and implementation rules respectively, no single copy is the 'original' that the others reproduce; they are distinct tools for different stages of the design process.
| Repository | Path |
|---|---|
| microsoft/power-platform-skills | plugins/mobile-apps/skills/design-system/SKILL.md |
| jezweb/claude-skills | plugins/frontend/skills/design-system/SKILL.md |
| sickn33/agentic-awesome-skills | skills/design-system/SKILL.md |
| Role | Repository | Path |
|---|---|---|
| peer | microsoft/power-platform-skills | plugins/mobile-apps/skills/design-system/SKILL.md |
| peer | jezweb/claude-skills | plugins/frontend/skills/design-system/SKILL.md |
| peer | sickn33/agentic-awesome-skills | skills/design-system/SKILL.md |
# Design System This skill covers three distinct aspects of design system work: generation, extraction, and implementation invariants. ## 1. Generation (Mobile/Expo) Use this when creating a new brand system for an Expo/React Native app. - **Artifacts**: `brand/design-system.md` (spec), `brand/tokens.ts` (Tamagui tokens), `brand/design-system.html` (gallery). - **Inputs**: Brand docs, logos, URLs, or Figma links. - **Modes**: Standalone, refresh, reskin, or dark-mode addition. ## 2. Extraction (Web) Use this when reverse-engineering a design system from an existing source. - **Sources**: Live URL (via Playwright), local HTML, screenshot, or Google Stitch project. - **Process**: 1. Identify source. 2. Extract raw data (HTML/CSS, screenshots). 3. Analyze tokens (colors, typography, components, spacing). 4. Synthesize into a semantic `DESIGN.md`. ## 3. Implementation Invariants Use these rules when building components or pages to ensure quality. - **Token Architecture**: Map all colors to primitives (Foreground, Background, Border, Brand, Semantic). Never hardcode hex. - **Typography**: Clear hierarchy via size, weight, and letter-spacing. Use monospace with `tabular-nums` only for aligned data. - **Loading Order**: Prioritize above-the-fold content. Self-host WOFF2 fonts. Preload critical assets. Lazy-load below-the-fold. - **FOUT Prevention**: Never use `font-display: swap` for critical text. Gate visibility on `document.fonts.ready` with a safety timeout. - **Graceful Loading**: Avoid ugly intermediate states for slow-loading content (images, video, WebGL). Use placeholders and progressive enhancement.