Design System Guide
Explains tokens, typography and component patterns for consistent UI.
Install
npx skills add paperclipai/paperclip --skill design-guide -g -a claude-code -y- Repository
- paperclipai/paperclip110k
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 2,919 tokens
- Runs scripts
- No, instructions only
What it does
Paperclip UI design system guide for building consistent, reusable frontend components. Use when creating new UI components, modifying existing ones, adding pages or features to the frontend, styling UI elements, or when you need to understand the design language and conventions. Covers: component creation, design tokens, typography, status/priority systems, composition patterns, and the /design-guide showcase page. Always use this skill alongside the frontend-design skill (for visual quality) and the web-design-guidelines skill (for web best practices).
Paperclip Design Guide
Paperclip's UI is a professional-grade control plane, dense, keyboard-driven, dark-themed by default. Every pixel earns its place.
Always use with: frontend-design (visual polish) and web-design-guidelines (web best practices).
1. Design Principles
- Dense but scannable. Maximum information without clicks to reveal. Whitespace separates, not pads.
- Keyboard-first. Global shortcuts (Cmd+K, C, [, ]). Power users rarely touch the mouse.
- Contextual, not modal. Inline editing over dialog boxes. Dropdowns over page navigations.
- Dark theme default. Neutral grays (OKLCH), not pure black. Accent colors for status/priority only. Text is the primary visual element.
- Component-driven. Prefer reusable components that capture style conventions. Build at the right abstraction, not too granular, not too monolithic.
2. Tech Stack
- React 19 + TypeScript + Vite
- Tailwind CSS v4 with CSS variables (OKLCH color space)
- shadcn/ui (new-york style, neutral base, CSS variables enabled)
- Radix UI primitives (accessibility, focus management)
- Lucide React icons (16px nav, 14px inline)
- class-variance-authority (CVA) for component variants
- clsx + tailwind-merge via
cn()utility
Config: ui/components.json (aliases: @/components, @/components/ui, @/lib, @/hooks)
3. Design Tokens
All tokens defined as CSS variables in ui/src/index.css. Both light and dark themes use OKLCH.
Colors
Use semantic token names, never raw color values:
