Download .claude/skills/design-guide/SKILL.md from the publisher, or copy the path and open the repository. PlugMCP lists the skill and does not host the file.
Where does design-guide live?
The publisher keeps it at https://github.com/paperclipai/paperclip.
Which agents can use design-guide?
Claude, Cursor, and Codex can read a SKILL.md you add from the publisher's repository.
>
name: design-guide
description: >
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)
Author header (name + timestamp) then body, in bordered cards with space-y-3. Add comment textarea + button below.
Cost Table
Standard <table> with text-xs, header row with bg-accent/20, font-mono for numeric values.
Log Viewer
bg-neutral-950 rounded-lg p-3 font-mono text-xs container. Color lines by level: default (foreground), WARN (yellow-400), ERROR (red-400), SYS (blue-300). Include live indicator dot when streaming.
8. Interactive Patterns
Hover States
Entity rows: hover:bg-accent/50
Nav items: hover:bg-accent/50 hover:text-accent-foreground
Active nav: bg-accent text-accent-foreground
Focus
focus-visible:ring-ring focus-visible:ring-[3px] — standard Tailwind focus-visible ring.
Disabled
disabled:opacity-50 disabled:pointer-events-none
Inline Editing
Use InlineEditor component — click text to edit, Enter saves, Escape cancels.
Popover Selectors
StatusIcon and PriorityIcon use Radix Popover for inline selection. Follow this pattern for any clickable property that opens a picker.
This is the living showcase of every component and pattern in the app. It is the source of truth for how things look.
Rules
When you add a new reusable component, you MUST add it to the design guide page. Show all variants, sizes, and states.
When you modify an existing component's API, update its design guide section.
When you add a new composition pattern, add a section demonstrating it.
Follow the existing structure: <Section title="..."> wrapper with <SubSection> for grouping.
Keep sections ordered logically: foundational (colors, typography) first, then primitives, then composites, then patterns.
Adding a New Section
<Section title="My New Component">
<SubSection title="Variants">
{/* Show all variants */}
</SubSection>
<SubSection title="Sizes">
{/* Show all sizes */}
</SubSection>
<SubSection title="States">
{/* Show interactive/disabled states */}
</SubSection>
</Section>
All components use cn() from @/lib/utils for className merging. All components use CVA for variant definitions when they have multiple visual variants.
13. Common Mistakes to Avoid
Using raw hex/rgb colors instead of CSS variable tokens
Creating ad-hoc typography styles instead of using the established scale
Hardcoding status colors instead of using StatusBadge/StatusIcon
Building one-off styled elements when a reusable component exists
Adding components without updating the design guide page
Using shadow-md or heavier — keep shadows minimal (xs, sm only)
Using rounded-2xl or larger — max is rounded-xl (except rounded-full for pills)
Forgetting dark mode — always use semantic tokens, never hardcode light/dark values
How do I install design-guide?
Download .claude/skills/design-guide/SKILL.md from the publisher, or copy the path and open the repository. PlugMCP lists the skill and does not host the file.
Where does design-guide live?
The publisher keeps it at https://github.com/paperclipai/paperclip.
Which agents can use design-guide?
Claude, Cursor, and Codex can read a SKILL.md you add from the publisher's repository.