Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
Creates design systems with CSS tokens for typography, colors, spacing, elevation; React components like buttons; Markdown docs and governance. Use for component libraries and UI consistency.
npx claudepluginhub secondsky/claude-skills --plugin design-system-creationHow this skill is triggered — by the user, by Claude, or both
Slash command
/design-system-creation:design-system-creationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Build comprehensive design systems for consistent UI development across teams.
Manages design systems by detecting reusable UI patterns, extracting design tokens, organizing components with Atomic Design, and warning on hard-coded values or duplicates. Activates on component libraries, style guides, or patterns.
Guides building and maintaining a design system—coordinating tokens, components, documentation, and tooling for UI consistency across products.
Build or audit a design system: component library, design tokens, naming conventions, contribution model, documentation. Use when teams are inconsistent across products.
Share bugs, ideas, or general feedback.
Build comprehensive design systems for consistent UI development across teams.
:root {
/* Colors */
--color-primary-50: #eff6ff;
--color-primary-500: #3b82f6;
--color-primary-900: #1e3a8a;
/* Semantic colors */
--color-success: #22c55e;
--color-warning: #f59e0b;
--color-error: #ef4444;
/* Typography */
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'Fira Code', monospace;
/* Type scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
/* Spacing (4px base) */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-4: 1rem;
--space-8: 2rem;
/* Elevation */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}
## Button
### Anatomy
- Container (padding, background)
- Label (text)
- Icon (optional)
### Variants
- Primary: Main actions
- Secondary: Alternative actions
- Ghost: Subtle actions
### States
- Default, Hover, Active, Disabled, Loading
### Accessibility
- Role: button
- Keyboard: Enter/Space to activate
- Focus: Visible focus ring
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'ghost';
size?: 'sm' | 'md' | 'lg';
loading?: boolean;
disabled?: boolean;
children: React.ReactNode;
}
function Button({ variant = 'primary', size = 'md', loading, disabled, children }: ButtonProps) {
return (
<button
className={`btn btn-${variant} btn-${size}`}
disabled={disabled || loading}
aria-busy={loading}
>
{loading ? <Spinner /> : children}
</button>
);
}