design-guide

Overview

design-guide is a Claude Code skill from the Paperclip project that serves as a comprehensive UI design system reference for building consistent, reusable frontend components. It codifies Paperclip's design philosophy: a professional-grade control plane that is dense, keyboard-driven, and dark-themed by default. The skill is intended to be used alongside the frontend-design skill (for visual polish) and web-design-guidelines skill (for web best practices) whenever you create or modify UI components.

Key Features

• Design token system: Defines all colors, spacing, and radii as CSS variables using the OKLCH color space, with semantic token names for backgrounds, borders, accents, and chart colors
• Component creation conventions: Covers the full tech stack (React 19, TypeScript, Tailwind CSS v4, shadcn/ui, Radix UI primitives, CVA for variants) with clear guidance on when to build new components vs. composing existing ones
• Status and priority systems: Provides standardized color-coded status indicators (todo, in-progress, done, blocked) and priority levels (urgent, high, medium, low) with consistent styling across the application
• Typography and density guidelines: Establishes text sizing, font weights, and spacing rules optimized for information-dense interfaces where every pixel earns its place
• Keyboard-first interaction model: Emphasizes global shortcuts (Cmd+K, C, [, ]) and contextual inline editing over modal dialogs, reflecting a power-user-oriented interface

Who is this for?

• Frontend developers working on the Paperclip project who need to build new UI components that match the existing design language
• Designers and engineers creating dense, data-rich control plane interfaces who want a proven dark-theme design system as a reference
• Teams adopting shadcn/ui and Tailwind CSS v4 who want structured guidance on design tokens, component variants, and composition patterns