craft — single-file design system

This skill enforces a specific approach to building design systems: one file, semantic HTML, sensible defaults, escape hatches via cn(). It is not generic guidance — it is an opinionated constraint system for layout primitives and prose typography.

Relationship to adjacent UI skills

• craft-ds owns the components/ds.tsx contract: layout primitives, prose typography, semantic HTML, one-file discipline, and cn() escape hatches.
• calm-ui owns the restrained product interface language for shadcn/ui components and visual refinement. Use its token constraints when choosing defaults, but do not recreate shadcn components in ds.tsx.
• product-design owns product/UX critique for existing experiences. Only reach for craft-ds from that workflow when the approved plan needs a design-system artifact.
• When a project runs the design-loop skill, ds.tsx primitives belong in /design.md, and this file's defaults should trace to that contract.

Inspired by craft-ds. Read every rule before generating ds.tsx. Every rule is testable — you should be able to look at the file and answer yes/no.

Core Principle

One file. Semantic HTML. Tailwind or CSS defaults. cn() for everything else.

A design system is a contract between the codebase and every developer (human or AI) who touches it. The ds.tsx file is that contract. It provides: