AntonBronnfjell

Tooling Agent Skill Markdown HTML Design System — Design skill for Claude Code

Design community

Agent skill that decides and builds a complete, accessible HTML/CSS design system (130 components, DTCG tokens, themes) — installs into Claude Code, Codex, Cursor, Copilot, Gemini CLI, Windsurf, Cline.

How to install Tooling Agent Skill Markdown HTML Design System

This entry records only its repository, not the path inside it, so there is no exact command to give. Open AntonBronnfjell/tooling-agent-skill-markdown_html-design-system and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Tooling Agent Skill Markdown HTML Design System does

Alternatives in Design

Theme Factory — Style artifacts with professional themes including 10 pre-set color/font combinations 94.1k ★
NotebookLM Automation — Complete programmatic access to Google NotebookLM—including capabilities not exposed in the web UI 6.8k ★
Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★

README

html-design-system

**An agent skill that turns your AI coding assistant into a design-system team.**

Decides *which* design system your product needs, then builds a *complete* one: tokens, 136 components, every state, docs, Storybook, `DESIGN.md`, npm package and CI.

[![Agent Skill](https://img.shields.io/badge/agent_skill-SKILL.md-7c3aed)](SKILL.md) [![Components](https://img.shields.io/badge/components-136-2563eb)](#component-coverage-136) [![WCAG 2.2 AA](https://img.shields.io/badge/a11y-WCAG_2.2_AA-15803d)](references/component-contract.md) [![Design tokens](https://img.shields.io/badge/tokens-DTCG-0891b2)](references/tokens.md) [![Storybook 10](https://img.shields.io/badge/Storybook-10-ff4785?logo=storybook&logoColor=white)](references/storybook.md) [![Python 3.8+](https://img.shields.io/badge/python-3.8%2B-3776ab?logo=python&logoColor=white)](scripts/ds.py) [![Last commit](https://img.shields.io/github/last-commit/AntonBronnfjell/tooling-agent-skill-markdown_html-design-system)](https://github.com/AntonBronnfjell/tooling-agent-skill-markdown_html-design-system/commits/main)

[Quick start](#quick-start) · [How it works](#what-it-does-step-by-step) · [Your stack](#use-it-with-your-stack) · [Install](#install-any-agent) · [CLI](#cli-reference-scriptsdspy-python-38-no-dependencies) · [Limits](#known-limits)

Agents	Claude Code · Codex · Cursor · GitHub Copilot · Gemini CLI · Windsurf/Devin · Cline · Kiro · Roo Code · OpenCode · Amp · Goose · Junie · Continue
Stacks	Static HTML · React · Vue · Svelte · Angular · Web Components · Laravel · Symfony · Django · Flask/FastAPI · Rails · Spring · ASP.NET/Blazor · Phoenix · Go · Rust/WASM

[!NOTE] The output is plain HTML, CSS and design tokens, so it works in any stack. Only the way components reach your app, and how you view them in isolation, changes per stack. See [Use it with your stack](#use-it-wi