mcpField
K
kitchen-sink-design-system

kitchen-sink-design-system

github.com/genericserviceDesign & UI081 installsUpdated 24w ago
Repository

About kitchen-sink-design-system

kitchen-sink-design-system is a workflow skill for auditing a codebase’s design system, fixing components, and assembling a page that showcases them. It uses an auditor script to identify components, design drift, and missing primitives.

Key features

  1. 01Auditing components and design drift
  2. 02Finding missing design primitives
  3. 03Mapping tokens to an existing guide
  4. 04Refactoring components to semantic tokens
  5. 05Building a component showcase page
  6. 06Running build, lint, and accessibility checks

Use cases

  1. 01Taking inventory of a codebase’s components
  2. 02Finding hardcoded colors and arbitrary Tailwind values
  3. 03Creating a page to review design tokens and components

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/genericservice/claude-skills --skill kitchen-sink-design-system

After installing, type/kitchen-sink-design-systemin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

examples/
minimal-sink.tsx
references/
component-catalog.md
design-system-discovery.md
image-reinterpretation.md
motion-guidelines.md
voice-and-tone.md
scripts/
audit_design_system.py
scan-components.sh

Details

From the project README

Kitchen Sink Design System

Build every component for real, wire it into a single sink page, and let the page prove the design system works.

This workflow uses a Script-First approach: an auditor script handles the "labor" of crawling the codebase and identifying drift, leaving the agent to handle the "judgment" of fixing components and assembling the sink.

Usage

When asked for a Kitchen Sink page, Design System Audit, or Component Inventory:

  1. Run the auditor script:

    python3 ~/.agents/skills/kitchen-sink-design-system/scripts/audit_design_system.py \
  --root "." \
  --out "design_audit.json"

  2. Read the report: Load design_audit.json to see:

    • Detected framework (Next.js, Astro, etc.).
    • Inventory of existing components.
    • Design Drift Report: Hardcoded hex values and arbitrary Tailwind values (-[...]) found in component files.
    • Checklist Gap: Tier 1 primitives (Button, Card, etc.) missing from the codebase.

  3. Establish/Adopt:

    • If a guide exists: Map discovered tokens to the guide.
    • If no guide exists: Propose a design-tokens.md based on de-facto tokens found in the drift report.

Phase 1: Build & Fix Components

For every MISSING item or file with DRIFT:

  • Refactor to use semantic design tokens.
  • Apply the base + variant pattern (CVA for React, Props for Astro).
  • Wire into the sink page immediately.

Phase 2: Assemble Sink Page

Create the sink route (e.g., app/sink/page.tsx or src/pages/sink.astro) following the standard section order:

  1. Header & Franchise declaration
  2. Design Tokens visualization
  3. Voice & Tone
  4. Illustration Gallery (via omni-image)
  5. Component categories (Typography, Buttons, Forms, etc.)

Phase 3: Verify

pnpm build
pnpm lint
pnpm dlx @axe-core/cli http://localhost:3000/sink

Anti-patterns (The "Hot Take" List)

  • Agent labor: Don't manually grep for hex codes; use the script.
  • Draft placeholders: Build real components or nothing.
  • Arbitrary values: w-[37px] is a failure of the design system.
  • Count drift: Deriving counts from collections, not hardcoding strings.

Comments

Markdown supported