design-system

Files (1)

• SKILL.md

SKILL.md (first lines)

# Design System Skill (oh-my-antigravity)

## Quick Start

- Choose a source, extract tokens, map semantic names, then update DESIGN.md.

Use this skill when the user wants to extract, create, or synchronize design system tokens.

## Quick Start

1. **Token Extraction** — Extract design tokens from:
   - Live URLs (color palette, typography, spacing from computed styles)
   - Existing CSS/SCSS/Tailwind config files
   - Figma exports or design specs
   - Screenshot images (via multimodal analysis)

2. **DESIGN.md Sync** — Update DESIGN.md sections:
   - Color Palette & Roles (Section 2)
   - Typography Rules (Section 3)
   - Layout Principles (Section 5)
   - Depth & Elevation (Section 6)

3. **Token Format Generation** — Output tokens as:
   - CSS custom properties (`--color-primary: #hex`)
   - Tailwind config extensions
   - SCSS variables
   - JSON token files (Style Dictionary compatible)

## Workflow

1. **Source** — Identify where tokens come from (URL, file, image, manual spec)
2. **Extract** — Parse and normalize token values
3. **Map** — Assign semantic roles (primary, secondary, accent, surface, etc.)
4. **Write** — Update DESIGN.md and/or generate token config files
5. **Verify** — Check contrast ratios, validate completeness

## Token Categories

| Category | Required Tokens |
|----------|----------------|
| Colors | primary, secondary, accent, background, surface, text, border, error, success, warning |
| Typography | heading (h1-h6), body, caption, overline font specs |
| Spacing | scale from 4px base (4, 8, 12, 16, 24, 32, 48, 64, 96) |
| Elevation | shadow-sm, shadow-md, shadow-lg, shadow-xl |
| Radius | sm (4px), md (8px), lg (16px), full (9999px) |

## Rules

- Always output tokens with semantic names, never raw values only
- Validate color contrast ratios (WCAG AA: 4.5:1 for text, 3:1 for large text)
- Preserve existing DESIGN.md sections when updating — only modify relevant sections
- Generate both human-readable (DESIGN.md) and machine-readable (CSS/JSON) outputs

From r3dlex/oh-my-antigravity, MIT.

More from r3dlex/oh-my-antigravity