Design System — Onboarding + Shared Brand Tokens — Development

The design-system skill captures a user's brand identity once through a 10-question onboarding wizard, validates WCAG 2.2 AA contrast, and derives 12 CSS custom properties stored in a config file that all markdown-html converters consume. It ensures consistent, accessible branding across generated HTML documents.

markdown-html claude-code

📂 View skill on GitHub ↗ 🚀 How to use

✨ What it does

10-question interactive onboarding wizard with defaults and non-interactive flags.
Validates body-text and link contrast against WCAG 2.2 AA (4.5:1).
Derives 12 CSS custom properties in HSL space for document rendering.
Enforces project > global > defaults precedence with deep merge.
Provides MARKDOWN_HTML_NO_CONFIG=1 bypass for headless runs.
Checks output directory writability before saving.

🎯 When to use it

First-time conversion of markdown to HTML in a workspace where no design system config exists.
User wants to set up or reset brand identity (colors, fonts, style) for markdown-html outputs.
User needs to override brand settings per project or change a single field non-interactively.
Running in CI or headless environments where zero-touch defaults or config bypass is required.

🚀 How to use

Trigger by running the onboarding script or asking to set up the brand. The skill expects answers to 10 questions (colors, fonts, style, output dir, etc.) or flags like --defaults, --set, --reset. Example prompts:

python3 markdown-html/skills/design-system/scripts/onboard.py
python3 .../onboard.py --set brand.primary=#FF6B35 --set design_style=editorial

📄 Output: A JSON config file (design-system.json) containing brand tokens and derived palette, stored globally or per-project.

📦 Add this skill to Claude Code

# 1. Get the skills repo
git clone --depth 1 https://github.com/alirezarezvani/claude-skills /tmp/claude-skills

# 2. Copy this skill into your project (or ~/.claude/skills for all projects)
mkdir -p .claude/skills
cp -r /tmp/claude-skills/markdown-html/skills/design-system .claude/skills/design-system

Skill source: markdown-html/skills/design-system/SKILL.md

⚠️ Good to know

Requires at least one brand HEX and accepts Google Fonts only; enforces contrast but not full accessibility auditing.

❓ FAQ

What happens if I skip onboarding?

Converters will use placeholder defaults, producing unbranded output.

How do I change just the primary color?

Run onboard.py with --set brand.primary=#HEX, e.g., python3 .../onboard.py --set brand.primary=#FF6B35.

What does MARKDOWN_HTML_NO_CONFIG=1 do?

It bypasses saved config and uses built-in defaults, useful for CI or ephemeral sessions.

🤖 Overview, features, install steps and FAQ were generated from the project's SKILL.md on Sep 4, 2026. Always check the original source before running commands.