Skills
.Work. You
Rest

hatch3r-design-system-detect

Official

Inventory your UI tokens before building.

Software Engineering#theming#design system#UI components#frontend audit#token inventory#responsive strategy
Authorhatch3r
Version1.0.0
Installs0

System Documentation

What problem does it solve?

It prevents UI fragmentation by helping teams discover existing design tokens, component libraries, and responsive/theming conventions before implementing new primitives.

Core Features & Use Cases

  • Design System Inventory output: Produces a concise inventory (library, token source, color space, responsive strategy, primitives) to drive consistent downstream implementation.
  • Canonical-source reconciliation guardrails: Detects multiple token sources and forces a single-source-of-truth decision before new tokens are authored.
  • Platform-aware component discovery: Scans for common signals (package.json, tokens locations, shadcn components.json, Tailwind v3/v4 patterns) and classifies container-vs-media responsive strategy.
  • Reuse/extend/create decision support: Captures an explicit verdict to reuse existing primitives, extend via composition, or create only when justified.

Quick Start

Ask the AI to run hatch3r-design-system-detect and write the resulting Design System Inventory to .audit-workspace/design-system-inventory.md before any UI code is generated.

Dependency Matrix

Required Modules

None required

Components

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: hatch3r-design-system-detect
Download link: https://github.com/hatch3r/hatch3r/archive/main.zip#hatch3r-design-system-detect

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.