Retro Design System — скилл

---
name: retro-design
description: Pick and apply a retro UI style from the local catalog of 53 historical systems (Windows 95, CRT phosphor, DOS CGA, vaporwave, Bauhaus, IBM 3270, etc). Use when the user wants a vintage/retro aesthetic, names a specific era ("80s terminal", "Y2K", "90s web"), references a specific old OS/terminal, or asks to generate styled HTML from a retro style reference. Different from frontend-design (general aesthetic guidance) — this one is keyed to specific historical systems stored on disk.
when_to_use: retro UI, vintage interface, Windows 95, CRT terminal, vaporwave, pixel art, brutalist, Bauhaus, Swiss style, pick a retro style, apply retro aesthetic, filter style catalog, manifest, 80s 90s Y2K aesthetic, specific old OS look
argument-hint: [slug | vibe | "list"]
allowed-tools: Read Glob Grep Bash(jq:*) Bash(git rev-parse:*) Bash(node:*)
---

# retro-design

Pick a retro UI style from this repo's 53-system catalog and apply it to the user's target component or page.

## Catalog root

This skill ships inside the `retro-design-system` repo, so RDS_ROOT is the repo root itself. Resolve it on load:

!`git rev-parse --show-toplevel`

Use the returned absolute path as `RDS_ROOT` for every path in the workflow below.

## Workflow

### Step 1 — Load the compact catalog

Read `${CLAUDE_SKILL_DIR}/references/styles-index.md`. It is a 53-row table (slug, name, era, year, top 3 palette colors, tags). Do not read `manifest.json` or individual `styles/*/index.html` yet — that happens only after a slug is picked.

### Step 2 — Interpret `$ARGUMENTS`

- `list` or empty → render the full table to the user and stop.
- A slug like `09-crt-phosphor` → skip Step 3, go straight to Step 4 with that slug.
- A vibe (`80s green terminal`, `playful 90s web`, `pastel synthwave`, `minimal Swiss`) → continue to Step 3.
- A specific named system the user mentions (`Windows 95`, `Game Boy`, `C64`) → map to the closest slug via the catalog, confirm with the user, continue.

### Step 3 — Recommend 3 candidates

From the table, pick 3 slugs that best match the vibe (weight era, palette, and tags). For each, output:

```
- `NN-slug` — Name (Era, Year). One sentence why it fits. Palette: `#aaa` `#bbb` `#ccc`.
```

Ask the user to pick one (or accept the first). Do not read full HTML references for all 3 — only the chosen one.

### Step 4 — Load reference and generate