What problem does it solve? Agents building video compositions or UI surfaces often invent inconsistent colors, fonts, and spacing. This Skill supplies a catalog of 153 curated design system packages so an agent can pick a style by ID and read its complete visual contract instead of hand-writing arbitrary hex values. ## Core Features & Use Cases - Style Enumeration: Read design-systems/catalog.json to list all available styles with id, name, and origin (e.g., neobrutalism, glassmorphism, apple, stripe). - Visual Contract Reading: For a chosen style ID, read DESIGN.md (design prose on color roles, typography, components, motion), tokens.css (semantic tokens like --bg, --fg, --accent, --radius), and tailwind-v4.css (utility-class mapping). - App-Agnostic Reference: The packages are business-neutral style definitions reused from Open Design; any video creation App such as remotion-studio can consume them without video-specific adaptation. - Use Case: Before writing a Remotion composition, ask the agent to apply the Linear design system; it reads linear-app/DESIGN.md and tokens.css and applies the palette and typography to the composition's inline styles. ## Quick Start Use the recut-design-system skill to list available styles and apply the glassmorphism design system to my video composition.
