design-guide

Name: design-guide
Author: getpaperclipai

157kinstalls1forks

How to install design-guide?

getpaperclipai/paperclip/design-guide

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

Installs into the current project.

Summary

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.

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: run

People who liked this also viewed

6 picks

Type

design-guide

157kinstalls1forks

View on GitHub

How to install design-guide?

getpaperclipai/paperclip/design-guide

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

Installs into the current project.

Summary

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: run

People who liked this also viewed

6 picks

Type