skills.rest
Baphomet480
Baphomet480COMMUNITY
Explore all skills by this author →
GitHub

kitchen-sink-design-system

...

1|Updated Feb 6, 2026
Search Tags:#developer workflow#design system#component library#frontend development#ui audit#framework agnostic
One-click install
npx skills add https://github.com/Baphomet480/claude-skills --skill kitchen-sink-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kitchen-sink-design-system
Source: https://github.com/Baphomet480/claude-skills/tree/main/skills/kitchen-sink-design-system
Command: npx skills add https://github.com/Baphomet480/claude-skills --skill kitchen-sink-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about kitchen-sink-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit my existing UI components for design system consistency?▼

A comprehensive design system workflow audits existing UI components by discovering current design direction, detecting semantic design tokens for colors and typography, and assembling a living sink page for visual verification and reference.

Can I use this design system workflow with SvelteKit or Astro projects?▼

This design system workflow is framework agnostic and fully supports SvelteKit, Astro, Next.js, Hugo, Nuxt, and static HTML projects, allowing you to establish or audit components across any of these frontend stacks.

What is the best way to start a design system from scratch in Next.js?▼

The best way to start a design system from scratch is to follow a full workflow: discover existing design direction, establish new design tokens and voice, enforce a base plus variant component architecture, and assemble a living sink page for reference.

How do design tokens and component variants work together in a component library?▼

Design tokens and component variants work together by enforcing a base plus variant pattern, like CVA, which uses semantic design tokens for colors, typography, and spacing to ensure predictable and maintainable component architecture across the library.

Does this design system workflow require any specific frontend dependencies?▼

This design system workflow has no external dependencies, relying entirely on a framework-agnostic implementation depth that supports multiple frontend frameworks natively without requiring additional libraries to manage tokens or component architecture.

Related Skills

Explore More Software Engineering Skills→
SophiasuuSophiasuu
5

generate

Generate static SEO pages from entities using Sophon framework adapters.

Community
Intermediate
shredbxshredbx

frontend-storyboard-artist

Automate Storybook component library creation with MDX docs, props tables, and visual regression tests.

Community
Intermediate
serguei9090serguei9090

tailwind-design-system

Build component libraries and design tokens with Tailwind CSS v4 CSS-first configuration.

Community
Intermediate
amanhsnamanhsn

ui-design-system

Generate design tokens from brand colors using Python scripts.

Community
Advanced