Menu
Build and maintain design systems. Use when creating component libraries, design tokens, or style guides. Covers atomic design and tokens.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Render a self-contained HTML "tab-bar" presentation from a markdown PRD, Spec, ADR, or implementation Plan. Use when the user asks to "make a presentation", "render slides", "turn this prd/spec/adr/plan into a deck", "present this doc", "export to html", or "show this on screen". INPUT is ONE markdown file (a PRD, Spec, ADR, or Plan). OUTPUT is ONE .html slideshow that opens directly in a browser. Render only — do not invent content.
Design scalable, reliable software systems. Use when planning new systems, major features, or architecture changes. Covers C4 diagrams, trade-off analysis, and system decomposition.
Create execution roadmaps for projects. Use when planning multi-phase projects or feature rollouts. Covers phased delivery and milestone planning.
Create Product Requirements Documents. Use when defining new features, projects, or initiatives. Covers user stories, acceptance criteria, and scope definition.
Apply cloud-native architecture patterns. Use when designing for scalability, resilience, or cloud deployment. Covers microservices, containers, and distributed systems.
Apply Domain-Driven Design patterns. Use when modeling complex business domains, defining bounded contexts, or designing aggregates. Covers entities, value objects, and repositories.
| name | design-systems |
| description | Build and maintain design systems. Use when creating component libraries, design tokens, or style guides. Covers atomic design and tokens. |
| allowed-tools | Read, Write, Glob, Grep |
A collection of reusable components, guided by clear standards, that can be assembled to build applications.
Atoms: Basic building blocks
Molecules: Simple combinations
Organisms: Complex components
Templates: Page layouts
Pages: Specific instances
{
"color": {
"primary": {
"50": "#f0f9ff",
"500": "#0ea5e9",
"900": "#0c4a6e"
},
"neutral": {
"100": "#f5f5f5",
"900": "#171717"
}
},
"spacing": {
"1": "0.25rem",
"2": "0.5rem",
"4": "1rem",
"8": "2rem"
},
"font": {
"family": {
"sans": "Inter, sans-serif",
"mono": "JetBrains Mono, monospace"
},
"size": {
"sm": "0.875rem",
"base": "1rem",
"lg": "1.125rem"
}
},
"radius": {
"sm": "0.25rem",
"md": "0.375rem",
"lg": "0.5rem"
}
}
interface ButtonProps {
variant: 'primary' | 'secondary' | 'ghost';
size: 'sm' | 'md' | 'lg';
disabled?: boolean;
loading?: boolean;
leftIcon?: ReactNode;
rightIcon?: ReactNode;
children: ReactNode;
onClick?: () => void;
}
Each component should document: