Design system creation
Welcome to the skill-jam ☄️🏀
npx -y skills add VRIL-LABS/skill-jam --skill design-system-creationAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency. Keywords: design-tokens, typography, spacing, color-palette, components, patterns, variables, dark-mode, theming, CSS-variables, accessibility, WCAG, responsive, grid-system, breakpoints, design-scale, semantic-tokens, component-library, style-guide, documentation, Figma, Storybook, brand-consistency, design-principles
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
3.0 KB, as published. Nobody here has run it
Design System Creation
Build comprehensive design systems for consistent UI development across teams.
Design System Layers
- Foundation: Colors, typography, spacing, elevation
- Components: Buttons, inputs, cards, navigation
- Patterns: Forms, layouts, empty states
Foundation - Design Tokens
: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);
}
Component Documentation
## 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
Component Example (React)
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>
);
}
Governance
- Review Committee: Approves new components
- Contribution Process: RFC → Review → Implementation
- Versioning: Semantic versioning for releases
- Deprecation: 3-month notice with migration guide
Best Practices
- Start with foundational tokens
- Document every component thoroughly
- Ensure WCAG 2.1 AA compliance
- Support dark mode from the start
- Include usage guidelines with do/don't examples
Gives 0 of the 12 instructions most design systems skills give
Counted across 528 of the 534 authors here whose files we hold, read 2026-08-06
- create a custom theme if neededin 54 of 528, across 10 files
- read the corresponding theme filein 54 of 528, across 10 files
- ask which theme to applyin 53 of 528, across 9 files
- show the theme showcasein 53 of 528, across 9 files
- maintain visual identity across all slidesin 50 of 528, across 6 files
- apply the specified colors and fontsin 47 of 528, across 3 files
- get explicit confirmationin 45 of 528, across 1 file
- Generate a design system before codingin 19 of 528, across 6 files
- Maintain at least 4.5:1 color contrast ratioin 19 of 528, across 8 files
- Describe component shapes, colors, shadows, and interaction statesin 18 of 528, across 4 files
- Check Python installation and install if missingin 17 of 528, across 4 files
- Default to html-tailwind if stack is unspecifiedin 17 of 528, across 4 files
Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.