kennyolofsson23-netizen/design-system-creation
skills/design-system-creation/SKILL.md
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
development
Updated Apr 17, 2026
$ install --global
skillsauthnpx skillsauth add kennyolofsson23-netizen/claude-code-config design-system-creationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 17, 2026, 4:53 AM4.4s1 file scanned
SKILL.md
- name:
- design-system-creation
- description:
- |
- 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
- license:
- MIT
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
Related Skills
kennyolofsson23-netizen/vercel-react-best-practices
development
VerifiedTrustedCommunity
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
SKILL.mdUpdated Apr 17, 2026
kennyolofsson23-netizen/qa
testing
VerifiedTrustedCommunity
Full QA pass: run all tests, check types, catch regressions, write missing tests. Use when the user says "run tests", "QA", "verify changes", "check for regressions", "test everything", or "make sure it works".
SKILL.mdUpdated Apr 17, 2026
kennyolofsson23-netizen/property-based-testing
development
VerifiedTrustedCommunity
Provides guidance for property-based testing across multiple languages and smart contracts. Use when writing tests, reviewing code with serialization/validation/parsing patterns, designing features, or when property-based testing would provide stronger coverage than example-based tests.
SKILL.mdUpdated Apr 17, 2026
kennyolofsson23-netizen/project-init
development
VerifiedTrustedCommunity
Initialize a new project with Kenny's universal conventions and stack-appropriate infrastructure. Use this skill whenever: setting up a new project, creating a new repo, scaffolding a new app, starting fresh on a new idea, 'init project', 'new project', 'set up a new app', 'create a project for X', or any variant of starting a new codebase from scratch. Also trigger when the user says 'bootstrap', 'scaffold', or 'kickstart'. This skill ensures every project gets the same quality gates and conventions while adapting infrastructure to the chosen stack.
SKILL.mdUpdated Apr 17, 2026