skills.rest
Douglas-v
Douglas-vCOMMUNITY
Explore all skills by this author →
GitHub

design-guide

Guides creation of consistent React UI components using Paperclip design tokens and patterns.

Updated Jul 14, 2026
Search Tags:#frontend#react#design system#design tokens#shadcn/ui#tailwind css#ui components
One-click install
npx skills add https://github.com/Douglas-v/strategic-ai-paperclip-lab --skill design-guide-douglas-v
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/Douglas-v/strategic-ai-paperclip-lab/tree/main/paperclip/.claude/skills/design-guide
Command: npx skills add https://github.com/Douglas-v/strategic-ai-paperclip-lab --skill design-guide-douglas-v

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building frontend features without a shared design system leads to inconsistent styling, ad-hoc typography, hardcoded colors, and duplicated components. This Skill enforces the Paperclip UI design language so every new component, page, or feature matches the existing control-plane interface. ## Core Features & Use Cases - Design Tokens & Typography: Provides the exact CSS variable tokens (OKLCH colors, radius, shadows) and typography scale to use instead of inventing new styles. - Component Hierarchy & Patterns: Documents the three-tier component structure (shadcn/ui primitives, custom composites, pages) plus composition patterns like EntityRow, grouped lists, property rows, and metric card grids. - Status & Priority Systems: Defines consistent status colors, priority icons, and agent status dots across all entity types. - Use Case: When adding a new dashboard page, use this Skill to compose MetricCard components in a responsive grid, apply semantic color tokens, and register the new components on the /design-guide showcase page. ## Quick Start Use the design-guide skill to create a new issue list page with grouped EntityRow components following the Paperclip design system.

Frequently Asked Questions about design-guide

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a new UI component in the Paperclip frontend?▼

Create a PascalCase file in ui/src/components/, use cn() for class merging and CVA for variants, and style with semantic CSS variable tokens. Then add the component to the component index and the /design-guide showcase page with all variants and states.

What design tokens should I use instead of hardcoded colors in Tailwind?▼

Use semantic CSS variables like --background, --foreground, --card, --muted, --accent, --border, and --destructive, all defined in OKLCH in ui/src/index.css. Never use raw hex or rgb values, since tokens handle both light and dark themes automatically.

When should I create a reusable component versus using Tailwind classes directly?▼

Create a component when the same visual pattern appears in two or more places, has interactive behavior, or encodes domain logic like status colors. Do not create components for one-off layouts or simple className combinations.

Does the Paperclip design system support dark mode?▼

Yes, dark theme is the default and both themes use OKLCH CSS variables. Always use semantic tokens rather than hardcoded light or dark values so components adapt automatically.

Why should I avoid shadow-md and rounded-2xl in this design system?▼

The system keeps shadows minimal (shadow-xs and shadow-sm only) and caps radius at rounded-xl, with rounded-full reserved for pills and badges. Heavier shadows and larger radii break the dense, professional control-plane aesthetic.

Related Skills

Explore More Design & Creative Skills→
nthplusionthplusio

shadcn-dev

Configures and scaffolds shadcn/ui in React projects with Tailwind CSS v4.

Official
Intermediate
raulnqraulnq

add_frontend_feature

Generate React 19 frontend feature files with routing and data fetching.

Community
Intermediate
alexzhang1030alexzhang1030

i-polish

Review frontend interfaces for visual, copy, and interaction issues before release.

Community
Advanced
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Official
Advanced