Paperclip — гайд по дизайн-системе React-компонентов

design

design-guide is a Claude Code skill that guides the creation of consistent, reusable UI components within the Paperclip design system. It covers a full stack of React 19 + TypeScript + Tailwind CSS v4 with OKLCH CSS variables, shadcn/ui (new-york style), Radix UI primitives, and Lucide React icons, along with a complete token system: semantic color variables, border radii, a ten-pattern typography scale, and status/priority color schemes defined in StatusBadge, StatusIcon, and PriorityIcon components. Aimed at frontend developers building or modifying pages and components in Paperclip's dense, dark-themed, keyboard-first control plane interface. The skill defines a three-tier component hierarchy — shadcn/ui primitives, custom composites, and page components — and sets clear rules for when to extract reusable pieces; it is designed to be used alongside the frontend-design and web-design-guidelines skills.