calm-ui — restrained product design system

This skill is an opinionated constraint system for product UI in React, Next.js, TypeScript, and shadcn/ui. It is not generic guidance. Most rules are prompts to apply when reviewing a screen. A handful — type scale ceilings, radius, shadow, spacing tokens, CSS variable usage — are hard limits. Follow those literally.

Relationship to adjacent UI skills

• ui-principles is the framework-agnostic core of this aesthetic — rules, not numbers. calm-ui is its React/Next.js/shadcn binding with the numbers filled in. On stacks without React/shadcn, use ui-principles; the two never disagree.
• calm-ui owns visual/interface constraints: spacing, hierarchy, component refinement, tokens, density, responsive rhythm, and shadcn adaptation.
• product-design owns the product critique for existing screens, flows, forms, dashboards, and workflows. If the question is whether the experience solves the right user problem, use product-design first.
• craft-ds owns generating or maintaining components/ds.tsx layout primitives and prose typography. Do not use calm-ui to create that artifact from scratch.
• When a project runs the design-loop skill, these rules (especially the hard limits) can seed /design.md — the contract the loop enforces surface by surface.

Non-negotiables