Skip to content
AI & Agents
Command

/cs-design-system

Run the one-time markdown-html design-system onboarding wizard. Captures brand primary/accent (HEX) + heading/body Google Fonts + design style (editorial/technical/minimal/playful) + default output directory + syntax theme + TOC behavior + optional logo/company. WCAG-AA

From plugin
claude-skills
30k169 skills127 agents169 commands2 MCP
$ npx -y skills add alirezarezvani/claude-skills --agent claude-code

Command definition

cs-design-system.md
disable-model-invocation: true
description: Run the one-time markdown-html design-system onboarding wizard. Captures brand primary/accent (HEX) + heading/body Google Fonts + design style (editorial/technical/minimal/playful) + default output directory + syntax theme + TOC behavior + optional logo/company. WCAG-AA validates body-text contrast; refuses if it fails. Stores at ~/.config/markdown-html/design-system.json (or project-scoped with --scope project). Every converter reads this config via config_loader.py before rendering.
argument-hint: "[--defaults | --show | --reset | --set key=value | --scope global|project]"

/cs-design-system — Markdown-HTML design-system onboarding

Run the design-system wizard:

python3 ${CLAUDE_PLUGIN_ROOT}/skills/design-system/scripts/onboard.py $ARGUMENTS

Modes

| Flag | Behavior | |---|---| | (no flag) | Interactive — walks 10 questions one at a time. Default. | | `--defaults` | Zero-touch: writes built-in defaults (`#0A1628` navy + `#00D4AA` teal + Inter + technical + sticky TOC + `./markdown-html-out/`) without prompting. Useful for CI or first-test. | | `--set key=value` | Non-interactive override (repeatable). Dotted keys supported: `brand.primary=#FF6B35`, `typography.heading_font=Lora`, `design_style=editorial`. | | `--show` | Print the 10 questions + the current effective config (project > global > defaults). | | `--reset` | Delete the saved config at the chosen scope. | | `--scope project` | Save to `./.markdown-html/design-system.json` (per-repo override) instead of global `~/.config/markdown-html/design-system.json`. |

The 10 questions

1. Default output directory (path; must be writable) 2. Brand primary HEX 3. Brand accent HEX (optional; auto-derives if blank) 4. Heading Google Font (12 safe defaults) 5. Body Google Font 6. Design style: editorial / technical / minimal / playful 7. Syntax-highlighting theme: light / dark / auto 8. TOC behavior: sticky-sidebar / collapsible-top / inline / none 9. Company / project name (optional, shows in footer) 10. Logo URL (optional, base64-embedded at render time)

Hard refusals

  • `default_output_dir` empty or unwritable → exit 3. Pick a path you control.
  • WCAG AA body-text contrast fails (< 4.5:1) → exit 4. Pick a darker primary, blank `brand.bg`/`brand.text` to let derivation pick a passing pair, or override `brand.text` explicitly.
  • WCAG link contrast walked iteratively; falls back to a passing color if accent on bg can't reach 4.5:1.

After onboarding

Inspect the effective config:

python3 ${CLAUDE_PLUGIN_ROOT}/skills/design-system/scripts/config_loader.py --show
python3 ${CLAUDE_PLUGIN_ROOT}/skills/design-system/scripts/config_loader.py --status

Then convert markdown via `/cs-markdown-html <path>.md`.

Bypass

`MARKDOWN_HTML_NO_CONFIG=1` skips saved config and returns DEFAULTS only. Useful for headless CI, ephemeral test containers, and evaluator loops. Never set it silently for an interactive user.

Read more
@alirezarezvani
Ships withclaude-skills

411 production-ready skills for Claude Code and 12 other coding agents, covering engineering, product, marketing, compliance, finance and the C-suite. We test whether each skill loads when you ask in plain words, and publish the results.

30k200 skills127 agents2 MCP
Get the whole plugin

Stars on GitHub

Momentum

stars in total
29.6k
Star history of alirezarezvani/claude-skills on GitHub, a chart by star-history.com

Other commands on claude-skills.

focused-fix

focused-fix

Command

Deep-dive feature repair — systematically fix an entire feature/module across all its files and dependencies. Usage: /focused-fix…

plugin-audit

plugin-audit

Command

Comprehensive audit pipeline for skills, plugins, agents, and commands. Validates structure, quality, security, marketplace…

More commands from other plugins.

devbox-entrypoint

devbox-entrypoint

Command

Context: runloop resumes a devbox by re-running the same entrypoint script, which invokes `cn serve --id <agentId> ...`. Because…

continue13d36k
@continuedev@continuedevInstall Command
c

c

Command

Shortcut for "continue working" — pick the work in flight back up exactly where it stopped and keep going until it is done or…

lifeos2w20k
@danielmiessler@danielmiesslerInstall Command
sidecar

sidecar

Command

Spawn a read-only sidecar subagent to investigate something in this checkout without editing files, moving branches, or touching…

@builderio@builderioInstall Command