crafting-design-systemslisted

# Crafting Design Systems Create or edit a design system that themes HTML output from workbench producer skills. Producers (`writing-spec`, `writing-plans`, `brainstorming`, `systematic-debugging`, `crafting-html`, `crafting-presentations`, `research:research`) apply the active design system on their own; this skill is for authoring the design system itself. ## When to use this skill - Create a new design system at project or user scope. - Edit an existing design system. ## When NOT to use this skill - Producing any HTML artifact: the producer skill applies the active design system on its own. - Designing a UI or product component: use `frontend-design`. ## Steps 1. **Pick scope.** Project (`.workbench/design-systems/<name>/` at repo root) for repo-wide themes that travel with the codebase. User (`~/.claude/workbench/design-systems/<name>/`) for personal themes that cross every project. Project wins if the same name exists at both scopes. 2. **Pick a kebab-case name.** Examples: `brand-2026`, `dark-print`, `personal`. 3. **Create the directory and copy the starter CSS:** ```bash NAME=<your-name> DSDIR=.workbench/design-systems/$NAME # or ~/.claude/workbench/design-systems/$NAME mkdir -p "$DSDIR" cp <path-to-skill>/references/starter-colors.css "$DSDIR/colors.css" ``` `<path-to-skill>` resolves to wherever the skill is installed (Claude Code: `~/.claude/plugins/cache/pgoell-claude-tools/workbench/<version>/skills/crafting-design-systems`). 4. *