What problem does it solve? Building frontend features without a shared design language leads to inconsistent styling, ad-hoc typography, hardcoded colors, and duplicated one-off components. This Skill encodes the Paperclip UI design system so every new component, page, or feature follows the same tokens, typography scale, status colors, and composition patterns. ## Core Features & Use Cases - Design Tokens & Typography: Enforces semantic CSS variables (OKLCH), a fixed typography scale, radius and shadow rules for Tailwind CSS v4 with shadcn/ui. - Component Conventions: Defines the three-tier hierarchy (shadcn primitives, custom composites like StatusBadge and EntityRow, page components) plus rules for when to create reusable components. - Composition Patterns: Provides ready-made patterns for entity rows, grouped lists, property panels, metric cards, progress bars, log viewers, and the mandatory /design-guide showcase page. - Use Case: When adding a new issues list page, use this Skill to compose EntityRow with StatusIcon and PriorityIcon, apply the grouped-list pattern, and register the result on the /design-guide page. ## Quick Start Use the design-guide skill to create a new reusable UI component following the Paperclip design system and add it to the /design-guide page.
