kitchen-sink-design-system
CommunityBuild and audit design systems for any stack.
Software Engineering#developer workflow#design system#component library#frontend development#ui audit#framework agnostic
AuthorBaphomet480
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides a comprehensive workflow for establishing, auditing, and implementing design systems across various frontend frameworks, ensuring consistency and maintainability.
Core Features & Use Cases
- Framework Agnostic: Works with Next.js, Hugo, Astro, SvelteKit, Nuxt, and static HTML.
- Full Workflow: Covers discovery, inventory, component building, sink page assembly, and verification.
- Design Token Management: Detects and enforces semantic design tokens for colors, typography, and spacing.
- Component Architecture: Enforces a base + variant pattern for predictable component development.
- Voice & Tone Integration: Incorporates content guidelines and brand personality into the design system.
- Use Case: When starting a new project or refactoring an existing one, use this Skill to define a robust design system from scratch or audit and improve an existing one, ensuring all components are built to spec and documented.
Quick Start
Use the kitchen-sink-design-system skill to establish a design system for a new Next.js project.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: kitchen-sink-design-system Download link: https://github.com/Baphomet480/claude-skills/archive/main.zip#kitchen-sink-design-system Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.