🗺️ Frontend Engineering · Journey Playbooks

Playbook: Bootstrap a design system that sticks

Stand up tokens, primitives, and docs a team actually adopts.

journey~60 minFrontend EngineersFull-Stack DevelopersDesign Engineers

Journey Steps

1Step 1 — Build layouts that survive real content: start with "Design mobile-first with min-width queries only"
2Step 2 — Add motion that guides attention: start with "Define durations: 150ms feedback, 250ms transitions, 400ms entrances max"
3How it fits together: Tokens before components. A system nobody consumes is decoration.

Commands

Install all referenced skills

$ npx skills add aniruddhaadak80/skills --skill css-design-systems-responsive-layout-system && npx skills add aniruddhaadak80/skills --skill css-design-systems-animation-craft

Tags

#playbook#journey#frontend-engineering

Install this skill

$ npx skills add aniruddhaadak80/skills --skill playbook-frontend-engineering-design-system-bootstrap -a opencode

SKILL.md

# Playbook: Bootstrap a design system that sticks

> Stand up tokens, primitives, and docs a team actually adopts.

## When to Use This Skill

Stand up tokens, primitives, and docs a team actually adopts.

## Steps

1. Step 1 — Build layouts that survive real content: start with "Design mobile-first with min-width queries only"
2. Step 2 — Add motion that guides attention: start with "Define durations: 150ms feedback, 250ms transitions, 400ms entrances max"
3. How it fits together: Tokens before components. A system nobody consumes is decoration.

View source on GitHub ↗

Take retrieval-augmented answers from empty repo to evaluated production feature.

🗺️ AI Engineering·~135m

Open →

🗺️Playbook: Harden an agent before giving it toolsjourney

Ship an autonomous agent whose failure modes are cheap, visible, and reversible.

🗺️ AI Engineering·~125m

Open →

🗺️Playbook: Cut LLM costs without quality collapsejourney

Reduce monthly inference spend measurably while keeping answer quality within tolerance.

🗺️ AI Engineering·~95m

Open →