Frontend Design Skills

Opinionated web design skills distilled from curated sources. One install, every major AI coding tool.

Quick Start

npx @flitzrrr/frontend-design-skills install

Detects installed platforms and provisions skills for each. Target a single platform with:

npx @flitzrrr/frontend-design-skills install <platform>

Where <platform> is one of: claude-code, cursor, windsurf, lovable, codex, copilot, antigravity, opencode, aider.

git clone [email protected]:flitzrrr/frontend-design-skills.git
cd frontend-design-skills

# Symlink into target platform(s):
ln -sf $(pwd)/skills-src/* ~/.copilot/skills/          # VS Code / GitHub Copilot
ln -sf $(pwd)/skills-src/* ~/.codex/skills/             # Codex
ln -sf $(pwd)/skills-src/* ~/.gemini/antigravity/skills/ # Antigravity
ln -sf $(pwd)/skills-src/* ~/.config/opencode/skills/   # OpenCode

Platform Support

Skill Categories

All skills follow the Agent Skills spec format (YAML frontmatter + Markdown body).

Sources

809 pages across 12 sources, synthesized into a 19-domain Enterprise Design Specification (3,409 lines).

Architecture

graph LR
    subgraph Sources
        direction TB
        T1[Tier 1 — Deep]
        T2[Tier 2 — Awards]
        T3[Tier 3 — Galleries]
        T4[Tier 4 — Community]
    end

    subgraph Pipeline
        direction TB
        scrape[scrape.py]
        diff[diff-content.py]
        spec[19 Domain Specs]
        skills[SKILL.md x 21]
        build[build-skills.py]
    end

    subgraph Platforms
        direction TB
        claude[Claude Code]
        cursor[Cursor]
        windsurf[Windsurf]
        copilot[Copilot]
        codex[Codex]
        aider[Aider]
    end

    Sources --> scrape --> diff --> spec -->|AI Synthesis| skills --> build --> Platforms

Evolution Pipeline

graph LR
    cron(Cron — Sundays 3am) --> scrape

    subgraph Scrape & Diff
        scrape[scrape.py<br/>Crawl 12 sources] --> manifest[(manifest.json)]
        manifest --> diff[diff-content.py<br/>Compare hashes]
    end

    subgraph Map & Synthesize
        diff --> cmap[(content-map.json)]
        cmap --> domains[spec/domains/*.md<br/>19 domain files]
        domains -->|AI synthesis| skills[skills-src/<br/>SKILL.md x 21]
    end

    subgraph Build & Ship
        skills --> builder[build-skills.py]
        builder --> out1[Claude Code]
        builder --> out2[Cursor]
        builder --> out3[Windsurf]
        builder --> out4[+ 6 more]
    end

Directory Structure

frontend-design-skills/
  skills-src/               21 canonical skills (Agent Skills spec)
    _template/              Skill authoring template
    webdesign-review/       Meta-skill (orchestrates all domains)
    ui-design/              ...through to...
    agent-ui-design/        ...all 21 skill directories
  spec/                     Enterprise Design Specification
    design-spec.md          Master index (19 domains)
    domains/                Per-domain spec files (01-19)
    content-map.json        URL-to-domain mapping
  tools/                    Cross-tool adapter system
    adapters/               6 Python adapters + common.py
    FORMAT-SPECS.md         Output format reference
  scripts/                  Build and automation
    build-skills.py         Canonical -> tool-specific outputs
    validate-skills.py      Agent Skills spec validation
    update-counts.js        Dynamic README badge management
    scrape.py               Tiered source scraper
    diff-content.py         Content change detection
    evolve.py               Evolution pipeline orchestrator
    config.yaml             Source configuration (12 sources, 4 tiers)
  data/                     Persistent scraping data
    manifest.json           URL/hash/date index
    changelog.md            Evolution log
    scraped/                Raw markdown (gitignored)
    versions/               Manifest snapshots for rollback
  bin/                      CLI (npx)
  output/                   Generated tool outputs (gitignored)
  docs/                     Project documentation

Skill Format

Each skill follows the Agent Skills specification:

skills-src/<name>/
  SKILL.md          < 500 lines, YAML frontmatter (name, description)
  references/       Detailed patterns, code examples, checklists

The build pipeline transforms this canonical format into tool-specific outputs via 6 adapters (Claude Code copies directly; Cursor generates .mdc; Windsurf/Gemini/Codex/Aider concatenate into single files with inlined references).

Naming Convention

Skills are named by domain: ui-design, web-typography, accessibility. The meta-skill webdesign-review orchestrates all 20 domain skills for comprehensive design reviews.

Validation

python3 scripts/validate-skills.py

Validates all 21 skills against the Agent Skills spec: frontmatter fields (name, description), naming conventions (lowercase-hyphen, max 64 chars), line limits (< 500), and directory-name consistency.

License

MIT -- applies to all code, skills, and documentation in this repository.