Contents

• Overview
• How the skills work together
• The 15 skills
• Live examples
• Quick start
• Learning paths
• Design system
• Repository structure
• Notes & license

Overview

This repo is two things at once:

1. A curriculum — 15 Agent Skills covering the full arc of building digital products, from first principles to production delivery. Each skill is a self-contained SKILL.md (with references/) that Claude Code discovers and invokes automatically when your request matches it. The knowledge is framework-agnostic — it applies whether you reach for Tailwind, Material, Bootstrap, or hand-rolled CSS.

2. A component library — six single-file HTML examples that apply the curriculum to real interfaces, each verified in a real browser. One brand, one token layer, three visual systems so you can compare approaches side by side.

Everything is token-driven, ships light + dark, and is held to an explicit accessibility / anti-AI-pattern checklist.

How the skills work together

The skills aren't a flat list — they compose into one production pipeline. Five Tier-1 foundations underpin every phase, while the rest flow left-to-right from a brief to a shipped product.

flowchart LR
    brief([Product brief]):::io --> D
    D -- design specs --> B -- components --> I -- shared library --> S -- release --> prod([Shipped product]):::io

    D["<b>01 · Design</b><br/>Tier 2 · UX/UI"]:::phase
    B["<b>02 · Build</b><br/>Tier 2 · Frontend"]:::phase
    I["<b>03 · Integrate</b><br/>Tier 3"]:::phase
    S["<b>04 · Ship</b><br/>Tier 3"]:::phase

    F["<b>Tier 1 · Foundations</b><br/>applied at every phase"]:::found
    F -.-> D & B & I & S

    classDef phase fill:#fce1ec,stroke:#E61876,color:#8a0d43,rx:6,ry:6;
    classDef found fill:#E61876,stroke:#94104B,color:#ffffff;
    classDef io fill:#ffffff,stroke:#94104B,color:#94104B;

The 15 skills

Tier 1 · Core Foundations

Cross-cutting knowledge applied in every phase.

Tier 2 · Domain-Specific

Tier 3 · Workflow Integration

Live examples

Six self-contained pages in skills/examples/ — open any in a browser (framework CSS/JS load from CDN). Each was driven and console-checked in a real browser. The same brand seed (#E61876) runs through all three visual systems.

The point of shipping three frameworks: the skills' principles are universal. Flat/Tailwind, Material, and Bootstrap are just delivery vehicles for the same tokens, accessibility rules, and brand.

Quick start

Use the skills in Claude Code

Skills are auto-discovered from a .claude/skills/ directory.

git clone git@github.com:plugin87/full-stack-design-skills.git
cd full-stack-design-skills

# install globally (all projects)
cp -R .claude/skills/*/ ~/.claude/skills/

# — or — use per-project (already shipped here in .claude/skills/)

A skill fires when your request matches its description, or invoke one by name (e.g. /design-fundamentals). Ask an accessibility question → web-accessibility-a11y surfaces; ask to "de-slop this UI" → anti-ai-design-patterns steps in.

Open the examples

cd skills/examples
python3 -m http.server 8000   # visit http://localhost:8000/

Learning paths

Design system

The examples run on one small, deliberate, framework-agnostic token layer:

Full documentation lives in design-system.html.

Repository structure

.
├── .claude/skills/              # 15 skills, flat — auto-discovered by Claude Code
├── skills/                      # source curriculum + docs
│   ├── manifest.json            #   skill registry & learning paths
│   ├── tier-1-core-foundations/
│   ├── tier-2-domain-specific/
│   ├── tier-3-workflow-integration/
│   └── examples/                # 6 live HTML examples (3 frameworks)
└── master-skills-architecture.zip

Notes & license

• Fonts — examples ship with a plain system-ui stack; no fonts are bundled. The original demos used a commercial typeface, deliberately removed. Point the font token at your own licensed font for production.
• License — MIT. Use, adapt, and redistribute the curriculum, references, and examples freely.