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 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.

Published by @Alireza Rezvani·0 agent reads / 30d·0 saves·

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

Run the design-system wizard:

python3 markdown-html/skills/design-system/scripts/onboard.py $ARGUMENTS

Modes

FlagBehavior
(no flag)Interactive — walks 10 questions one at a time. Default.
--defaultsZero-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=valueNon-interactive override (repeatable). Dotted keys supported: brand.primary=#FF6B35, typography.heading_font=Lora, design_style=editorial.
--showPrint the 10 questions + the current effective config (project > global > defaults).
--resetDelete the saved config at the chosen scope.
--scope projectSave 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 markdown-html/skills/design-system/scripts/config_loader.py --show
python3 markdown-html/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.

Bundled with this artifact

2 files

Reference files that ship alongside this artifact. Agents pull these in only when the task needs them.

More on the bench

SKILL0

Cs Md Review

Convert a markdown PR writeup or code review (with ```diff blocks and > [!BLOCKER]/[!MAJOR]/[!MINOR]/[!NIT] severity callouts) into a single-file 2-column HTML review. Top jump-nav lists every finding by severity. Diff on the left, severity-tagged annotation cards on the right, mandatory named reviewer footer. Refuses without --reviewer (a code review must name a human) or if no diff hunks present.

software-engineering+2
0
SKILL0

Senior Frontend

Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.

software-engineering+2
0
SKILL0

User Research Synthesizer

Synthesize user research findings from interviews, surveys, and analytics. Create insight reports, customer journey maps, and actionable recommendations based on research data and qualitative findings.

product-management+2
0