design-system
SkillBuild or audit a design system including component library, design tokens, naming conventions, contribution model, and documentation. Use this skill whenever the user wants to build a design system, audit an existing system, define design tokens at the system level, structure a component library, or
Install
git clone https://github.com/rampstackco/claude-skills.git ~/.claude/skills/design-systemWhat is design-system?
Build or audit a design system including component library, design tokens, naming conventions, contribution model, and documentation. Use this skill whenever the user wants to build a design system, audit an existing system, define design tokens at the system level, structure a component library, or set up design system governance. Triggers on design system, component library, design tokens, atomic design, atoms, molecules, organisms, design system documentation, Storybook, Figma library, system governance, design contribution model. Also triggers when teams are inconsistent across products and a system is the answer.
What this can do
Capabilities declared in this component's own frontmatter — not inferred.
Inherit all session tools
Declares no tool restrictions — inherits every session tool
~156 tokens of context used while enabled, before you invoke anything
Documentation
README · ~5 min readDesign System
Build, evolve, or audit a design system. Stack-agnostic in principle. Implementation is stack-specific (Figma, Storybook, code library, etc.) but the structure and governance principles transfer.
This skill is for building the system. For applying a system to specific pages or components, use design-standards. For brand visual identity, use brand-identity.
When to use
- Building a design system from scratch
- Auditing an existing system for gaps or fragmentation
- Defining design tokens at the system level
- Structuring a component library
- Establishing contribution and governance models
Reviews
Log in to leave a review.
No reviews yet — be the first.
Explore related
Other things in this space — across every part of the ecosystem, not just skills.
Skillssimilar to this one
All skills →ECC
The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
235.3K stars
ui-ux-pro-max-skill
An AI SKILL that provide design intelligence for building professional UI/UX multiple platforms
111.3K stars
claude-mem
Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More
88.9K stars
MCP Servers
All mcp servers →context7
Context7 Platform -- Up-to-date code documentation for LLMs and AI code editors
60K stars
codebase-memory-mcp
High-performance code intelligence MCP server. Indexes codebases into a persistent knowledge graph — average repo in milliseconds. 158 languages, sub-ms queries, 99% fewer tokens. Single static binary, zero dependencies.
36.7K stars
Figma-Context-MCP
MCP server to provide Figma layout information to AI coding agents like Cursor
15.5K stars
Subagents
All subagents →ECC
The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
235.3K stars
code-architect
Designs feature architectures by analyzing existing codebase patterns and conventions, then providing comprehensive implementation blueprints with specific files to create/modify, component designs, data flows, and build sequences
32.8K stars
claude-security
The dedicated Claude Security orchestrator. Hand it an unattended job — "fully scan this repository and patch what you find; I understand it will use a lot of tokens" — and it runs the whole thing itself: capturing the revision, driving the multi-agent scan through the claude-security:scan workflow,
32.8K stars
Commands
All commands →modernize-harden
Security vulnerability scan with a reviewable remediation patch — OWASP, CWE, CVE, secrets, injection
32.8K stars
modernize-status
Where am I in the modernization workflow — artifact inventory, staleness, secrets hygiene, next step
32.8K stars
create-plugin
Guided end-to-end plugin creation workflow with component design, implementation, and validation
32.8K stars
Plugins
All plugins →claude-security
Deep vulnerability scanning of your own code, run entirely inside your Claude Code session at a chosen effort tier, with every finding challenged before it is reported and the verification tally computed in code. Turns surviving findings into targeted patches, each verified by a panel of agents, tha
32.9K stars
claude-md-management
Tools to maintain and improve CLAUDE.md files - audit quality, capture session learnings, and keep project memory current.
32.9K stars
math-olympiad
Solve competition math (IMO, Putnam, USAMO) with adversarial verification that catches what self-verification misses. Fresh-context verifiers attack proofs with specific failure patterns. Calibrated abstention over bluffing.
32.9K stars