01
It starts by itself
UI components change. Runs in Claude Code routine.
- ↻ UI components change
pull request touches ui/src/components or ui/src/pages
paperclipai · 361 installsPaperclip Design Guide skill
Runs by itself, UI components change.
Keep components and design guide synced.
Install the Paperclip Design Guide skill and make it a habit: follow https://gethabit.dev/skills/paperclipai/design-guide.md
- 1Copy
- 2Paste into Claude Code, Codex or Cursor
- 3It runs by itself
361 installs106K starsMIT licenceSource on GitHub ↗
Paperclip Design Guide
by paperclipai · 361 installs
The skill
The Paperclip Design Guide skill covers the Paperclip UI design system: tokens, typography scale, status and priority systems, component tiers, composition patterns, layout and the /design-guide showcase page.
Only when you ask.
The habit
Keep components and design guide synced.
↻ Runs by itselfUI components change
How the habit works.
You don't have to.
When does it start? How does it check its work? What does it remember?
One run, step by step.
Then it stops.
Stops after 5 components or one retry per run.
- 01
Load companion skills
Your agent uses frontend-design and web-design-guidelines alongside this guide.
- 02
Check tokens
It checks colors use CSS variable tokens, not raw hex or rgb.
- 03
Check typography
It checks text uses the set scale, not ad hoc styles.
- 04
Check status
It checks status colors come from StatusBadge and StatusIcon.
- 05
Update the guide
It adds or updates sections on /design-guide with variants, sizes and states.
- 06
Update the index
It adds new components to references/component-index.md and builds.
What it may do.
Nothing more.
It writes only in its own folder and asks you before anything goes out.
- Writes only inui/src/**, references/component-index.md
- Talks tono outside service
- Sendsnothing
- Your OKNothing goes out, so it needs no OK.
Is it for you?
Use it when it fits.
Read both lists. If the left one sounds like you, the Paperclip Design Guide skill helps.
Use it when
- ✓ You add a Paperclip UI component
- ✓ You style a new page
- ✓ You update the design guide page
Skip it when
- – You work outside the Paperclip UI
- – You change only backend code
Paperclip Design Guide skill, answered.
Can I edit shadcn primitives?
No. Extend them by composition in ui/src/components.
When should I make a new component?
When a pattern appears in 2 or more places, has behavior or encodes domain logic.
How do I install the Paperclip Design Guide skill?
Copy the prompt at the top into your agent. It installs the skill from paperclipai/paperclip and sets up the habit. Or run npx skills add paperclipai/paperclip --skill design-guide.
Is the Paperclip Design Guide skill free?
Yes. It is published under MIT. Habit is free too.
Paperclip Design Guide. Now as a habit.
Install the Paperclip Design Guide skill and make it a habit: follow https://gethabit.dev/skills/paperclipai/design-guide.md
All paperclipai skills →More design skills →
Works in
- Claude Code
- Codex
- Cursor
- ChatGPT
- Claude app
Made by paperclipai, published under MIT. Habit links to the original and never changes it. Is this your skill?