design-guide

Name: design-guide
Author: getpaperclipai

bygetpaperclipai· 24 skills

Installs

243k

Stars

Forks

How to install design-guide?

getpaperclipai/paperclip/design-guide

$npx -y skills add getpaperclipai/paperclip --skill design-guide

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/getpaperclipai/paperclip" --skill "getpaperclipai/paperclip/design-guide"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/getpaperclipai/paperclip" that are relevant to the current task. Run `npx skills add "https://github.com/getpaperclipai/paperclip"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	# Paperclip Design Guide
2
3	Paperclip's UI is a professional-grade control plane — dense, keyboard-driven, dark-themed by default. Every pixel earns its place.
4
5	Always use with: `frontend-design` (visual polish) and `web-design-guidelines` (web best practices).
6
7	---
8
9	## 1. Design Principles
10
11	- Dense but scannable. Maximum information without clicks to reveal. Whitespace separates, not pads.
12	- Keyboard-first. Global shortcuts (Cmd+K, C, [, ]). Power users rarely touch the mouse.
13	- Contextual, not modal. Inline editing over dialog boxes. Dropdowns over page navigations.
14	- Dark theme default. Neutral grays (OKLCH), not pure black. Accent colors for status/priority only. Text is the primary visual element.
15	- Component-driven. Prefer reusable components that capture style conventions. Build at the right abstraction — not too granular, not too monolithic.
16
17	---
18
19	## 2. Tech Stack
20
21	- React 19 + TypeScript + Vite
22	- Tailwind CSS v4 with CSS variables (OKLCH color space)
23	- shadcn/ui (new-york style, neutral base, CSS variables enabled)
24	- Radix UI primitives (accessibility, focus management)
25	- Lucide React icons (16px nav, 14px inline)
26	- class-variance-authority (CVA) for component variants
27	- clsx + tailwind-merge via `cn()` utility
28
29	Config: `ui/components.json` (aliases: `@/components`, `@/components/ui`, `@/lib`, `@/hooks`)
30
31	---
32
33	## 3. Design Tokens
34
35	All tokens defined as CSS variables in `ui/src/index.css`. Both light and dark themes use OKLCH.
36
37	### Colors
38
39	Use semantic token names, never raw color values:
40
41	\| Token \| Usage \|
42	\|-------\|-------\|
43	\| `--background` / `--foreground` \| Page background and primary text \|
44	\| `--card` / `--card-foreground` \| Card surfaces \|
45	\| `--primary` / `--primary-foreground` \| Primary actions, emphasis \|
46	\| `--secondary` / `--secondary-foreground` \| Secondary surfaces \|
47	\| `--muted` / `--muted-foreground` \| Subdued text, labels \|
48	\| `--accent` / `--accent-foreground` \| Hover states, active nav items \|
49	\| `--destructive` \| Destructive actions \|
50	\| `--border` \| All borders \|
51	\| `--ring` \| Focus rings \|
52	\| `--sidebar-*` \| Sidebar-specific variants \|
53	\| `--chart-1` through `--chart-5` \| Data visualization \|
54
55	### Radius
56
57	Single `--radius` variable (0.625rem) with derived sizes:
58
59	- `rounded-sm` — small inputs, pills
60	- `rounded-md` — buttons, inputs, small components
61	- `rounded-lg` — cards, dialogs
62	- `rounded-xl` — card containers, large components
63	- `rounded-full` — badges, avatars, status dots
64
65	### Shadows
66
67	Minimal shadows: `shadow-xs` (outline buttons), `shadow-sm` (cards). No heavy shadows.
68
69	---
70
71	## 4. Typography Scale
72
73	Use these exact patterns — do not invent new ones:
74
75	\| Pattern \| Classes \| Usage \|
76	\|---------\|---------\|-------\|
77	\| Page title \| `text-xl font-bold` \| Top of pages \|
78	\| Section title \| `text-lg font-semibold` \| Major sections \|
79	\| Section heading \| `text-sm font-semibold text-muted-foreground uppercase tracking-wide` \| Section headers in design guide, sidebar \|
80	\| Card title \| `text-sm font-medium` or `text-sm font-semibold` \| Card headers, list item titles \|
81	\| Body \| `text-sm` \| Default body text \|
82	\| Muted \| `text-sm text-muted-foreground` \| Descriptions, secondary text \|
83	\| Tiny label \| `text-xs text-muted-foreground` \| Metadata, timestamps, property labels \|
84	\| Mono identifier \| `text-xs font-mono text-muted-foreground` \| Issue keys (PAP-001), CSS vars \|
85	\| Large stat \| `text-2xl font-bold` \| Dashboard metric values \|
86	\| Code/log \| `font-mono text-xs` \| Log output, code snippets \|
87
88	---
89
90	## 5. Status & Priority Systems
91
92	### Status Colors (consistent across all entities)
93
94	Defined in `StatusBadge.tsx` and `StatusIcon.tsx`:
95
96	\| Status \| Color \| Entity types \|
97	\|--------\|-------\|-------------\|
98	\| active, achieved, completed, succeeded, approved, done \| Green shades \| Agents, goals, issues, approvals \|
99	\| running \| Cyan \| Agents \|
100	\| paused \| Orange \| Agents \|
101	\| idle, pending \| Yellow \| Agents, approvals \|
102	\| failed, error, rejected, blocked \| Red shades \| Runs, agents, approvals, issues \|
103	\| archived, planned, backlog, cancelled \| Neutral gray \| Various \|
104	\| todo \| Blue \| Issues \|
105	\| in_progress \| Indigo \| Issues \|
106	\| in_review \| Violet \| Issues \|
107
108	### Priority Icons
109
110	Defined in `PriorityIcon.tsx`: critical (red/AlertTriangle), high (orange/ArrowUp), medium (yellow/Minus), low (blue/ArrowDown).
111
112	### Agent Status Dots
113
114	Inline colored dots: running (cyan, animate-pulse), active (green), paused (yellow), error (red), offline (neutral).
115
116	---
117
118	## 6. Component Hierarchy
119
120	Three tiers:
121
122	1. shadcn/ui primitives (`ui/src/components/ui/`) — Button, Card, Input, Badge, Dialog, Tabs, etc. Do not modify these directly; extend via composition.
123	2. Custom composites (`ui/src/components/`) — StatusBadge, EntityRow, MetricCard, etc. These capture Paperclip-specific design language.
124	3. Page components (`ui/src/pages/`) — Compose primitives and composites into full views.
125
126	See [references/component-index.md](references/component-index.md) for the complete component inventory with usage guidance.
127
128	### When to Create a New Component
129
130	Create a reusable component when:
131	- The same visual pattern appears in 2+ places
132	- The pattern has interactive behavior (status changing, inline editing)
133	- The pattern encodes domain logic (status colors, priority icons)
134
135	Do NOT create a component for:
136	- One-off layouts specific to a single page
137	- Simple className combinations (use Tailwind directly)
138	- Thin wrappers that add no semantic value
139
140	---
141
142	## 7. Composition Patterns
143
144	These patterns describe how components work together. They may not be their own component, but they must be used consistently across the app.
145
146	### Entity Row with Status + Priority
147
148	The standard list item for issues and similar entities:
149
150	```tsx
151	<EntityRow
152	leading={<><StatusIcon status="in_progress" /><PriorityIcon priority="high" /></>}
153	identifier="PAP-001"
154	title="Implement authentication flow"
155	subtitle="Assigned to Agent Alpha"
156	trailing={<StatusBadge status="in_progress" />}
157	onClick={() => {}}
158	/>
159	```
160
161	Leading slot always: StatusIcon first, then PriorityIcon. Trailing slot: StatusBadge or timestamp.
162
163	### Grouped List
164
165	Issues grouped by status header + entity rows:
166
167	```tsx
168	<div className="flex items-center gap-2 px-4 py-2 bg-muted/50 rounded-t-md">
169	<StatusIcon status="in_progress" />
170	<span className="text-sm font-medium">In Progress</span>
171	<span className="text-xs text-muted-foreground ml-1">2</span>
172	</div>
173	<div className="border border-border rounded-b-md">
174	<EntityRow ... />
175	<EntityRow ... />
176	</div>
177	```
178
179	### Property Row
180
181	Key-value pairs in properties panels:
182
183	```tsx
184	<div className="flex items-center justify-between py-1.5">
185	<span className="text-xs text-muted-foreground">Status</span>
186	<StatusBadge status="active" />
187	</div>
188	```
189
190	Label is always `text-xs text-muted-foreground`, value on the right. Wrap in a container with `space-y-1`.
191
192	### Metric Card Grid
193
194	Dashboard metrics in a responsive grid:
195
196	```tsx
197	<div className="grid md:grid-cols-2 xl:grid-cols-4 gap-4">
198	<MetricCard icon={Bot} value={12} label="Active Agents" description="+3 this week" />
199	...
200	</div>
201	```
202
203	### Progress Bar (Budget)
204
205	Color by threshold: green (<60%), yellow (60-85%), red (>85%):
206
207	```tsx
208	<div className="w-full h-2 bg-muted rounded-full overflow-hidden">
209	<div className="h-full rounded-full bg-green-400" style={{ width: `${pct}%` }} />
210	</div>
211	```
212
213	### Comment Thread
214
215	Author header (name + timestamp) then body, in bordered cards with `space-y-3`. Add comment textarea + button below.
216
217	### Cost Table
218
219	Standard `<table>` with `text-xs`, header row with `bg-accent/20`, `font-mono` for numeric values.
220
221	### Log Viewer
222
223	`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.
224
225	---
226
227	## 8. Interactive Patterns
228
229	### Hover States
230
231	- Entity rows: `hover:bg-accent/50`
232	- Nav items: `hover:bg-accent/50 hover:text-accent-foreground`
233	- Active nav: `bg-accent text-accent-foreground`
234
235	### Focus
236
237	`focus-visible:ring-ring focus-visible:ring-[3px]` — standard Tailwind focus-visible ring.
238
239	### Disabled
240
241	`disabled:opacity-50 disabled:pointer-events-none`
242
243	### Inline Editing
244
245	Use `InlineEditor` component — click text to edit, Enter saves, Escape cancels.
246
247	### Popover Selectors
248
249	StatusIcon and PriorityIcon use Radix Popover for inline selection. Follow this pattern for any clickable property that opens a picker.
250
251	---
252
253	## 9. Layout System
254
255	Three-zone layout defined in `Layout.tsx`:
256
257	```
258	┌──────────┬──────────────────────────────┬──────────────────────┐
259	│ Sidebar │ Breadcrumb bar │ │
260	│ (w-60) ├──────────────────────────────┤ Properties panel │
261	│ │ Main content (flex-1) │ (w-80, optional) │
262	└──────────┴──────────────────────────────┴──────────────────────┘
263	```
264
265	- Sidebar: `w-60`, collapsible, contains CompanySwitcher + SidebarSections
266	- Properties panel: `w-80`, shown on detail views, hidden on lists
267	- Main content: scrollable, `flex-1`
268
269	---
270
271	## 10. The /design-guide Page
272
273	Location: `ui/src/pages/DesignGuide.tsx`
274	Route: `/design-guide`
275
276	This is the living showcase of every component and pattern in the app. It is the source of truth for how things look.
277
278	### Rules
279
280	1. When you add a new reusable component, you MUST add it to the design guide page. Show all variants, sizes, and states.
281	2. When you modify an existing component's API, update its design guide section.
282	3. When you add a new composition pattern, add a section demonstrating it.
283	4. Follow the existing structure: `<Section title="...">` wrapper with `<SubSection>` for grouping.
284	5. Keep sections ordered logically: foundational (colors, typography) first, then primitives, then composites, then patterns.
285
286	### Adding a New Section
287
288	```tsx
289	<Section title="My New Component">
290	<SubSection title="Variants">
291	{/* Show all variants */}
292	</SubSection>
293	<SubSection title="Sizes">
294	{/* Show all sizes */}
295	</SubSection>
296	<SubSection title="States">
297	{/* Show interactive/disabled states */}
298	</SubSection>
299	</Section>
300	```
301
302	---
303
304	## 11. Component Index
305
306	See [references/component-index.md](references/component-index.md) for the full component inventory.
307
308	When you create a new reusable component:
309	1. Add it to the component index reference file
310	2. Add it to the /design-guide page
311	3. Follow existing naming and file conventions
312
313	---
314
315	## 12. File Conventions
316
317	- shadcn primitives: `ui/src/components/ui/{component}.tsx` — lowercase, kebab-case
318	- Custom components: `ui/src/components/{ComponentName}.tsx` — PascalCase
319	- Pages: `ui/src/pages/{PageName}.tsx` — PascalCase
320	- Utilities: `ui/src/lib/{name}.ts`
321	- Hooks: `ui/src/hooks/{useName}.ts`
322	- API modules: `ui/src/api/{entity}.ts`
323	- Context providers: `ui/src/context/{Name}Context.tsx`
324
325	All components use `cn()` from `@/lib/utils` for className merging. All components use CVA for variant definitions when they have multiple visual variants.
326
327	---
328
329	## 13. Common Mistakes to Avoid
330
331	- Using raw hex/rgb colors instead of CSS variable tokens
332	- Creating ad-hoc typography styles instead of using the established scale
333	- Hardcoding status colors instead of using StatusBadge/StatusIcon
334	- Building one-off styled elements when a reusable component exists
335	- Adding components without updating the design guide page
336	- Using `shadow-md` or heavier — keep shadows minimal (xs, sm only)
337	- Using `rounded-2xl` or larger — max is `rounded-xl` (except `rounded-full` for pills)
338	- Forgetting dark mode — always use semantic tokens, never hardcode light/dark values

6 picks

Type

Run `npx skills use "https://github.com/getpaperclipai/paperclip" --skill "getpaperclipai/paperclip/design-guide"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/getpaperclipai/paperclip" that are relevant to the current task. Run `npx skills add "https://github.com/getpaperclipai/paperclip"` and select the relevant skills, then follow their instructions.

design-guide

How to install design-guide?

Related

design-guide

How to install design-guide?

Related