Guide · Agent skill
How to use the Paperclip Design Guide agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Paperclip Design Guide skill (named design-guide) teaches an AI agent Paperclip's internal frontend design system, so new or changed UI code uses the same React, Tailwind and shadcn/ui building blocks, colour and typography tokens, and status and priority indicators as the rest of the app. This guide explains what an agent skill is, how to install this one, how to trigger it, and what it needs before you rely on it.
Paperclip Design Guidepaperclipai/paperclip · MIT Download the skill Quick start
- 1Check the repository. Make sure you have the Paperclip repository checked out so ui/src, ui/components.json and references/component-index.md exist.
- 2Download the ZIP. Download the design-guide skill ZIP from this page.
- 3Unzip into a skills folder. Unzip into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 4Or upload in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the ZIP.
- 5Install the companion skills. Add frontend-design and web-design-guidelines, which the guide says to use alongside it.
- 6Ask for UI work in plain language. Describe the component or screen you want, naming Paperclip where relevant, so the skill's description matches.
- 7Review the output. Check that colours use semantic tokens, status uses the defined badges and icons, and shadcn primitives were not edited directly.
What is an agent skill and what does this one do?
An agent skill is a folder containing a SKILL.md file with instructions that a Claude agent can load when a task matches the skill's description. The design-guide skill applies when the agent creates UI components, modifies existing ones, adds pages or features to the frontend, styles UI elements, or needs to understand the design language.
Once loaded, the agent follows Paperclip's conventions: it prefers reusable components, uses semantic colour tokens such as --background and --muted-foreground rather than raw colour values, uses the documented typography patterns, and shows status and priority with the defined icons and badges. It also points to references/component-index.md for the full component inventory.
- Dark theme default, with neutral OKLCH grays and accent colours reserved for status and priority.
- Tech stack guidance: React 19, TypeScript, Vite, Tailwind CSS v4, shadcn/ui, Radix UI, Lucide icons, CVA and the cn() utility.
- Component tiers: shadcn/ui primitives in ui/src/components/ui/, custom composites in ui/src/components/, page components in ui/src/pages/.
- Composition patterns for entity rows, grouped lists, property rows, metric card grids and budget progress bars.
How do you install the design-guide skill?
There are two routes. For Claude Code, download the skill's ZIP from this page and unzip it into ~/.claude/skills/ for a personal install, or into a project's .claude/skills/ folder to share it with one repository. For the Claude apps, upload the ZIP under Settings → Capabilities → Skills.
After unzipping, the folder should contain SKILL.md and references/component-index.md. If you installed it into a project, make sure that project is the Paperclip repository, because the skill points to files such as ui/src and ui/components.json that must exist.
- Claude Code, personal: unzip into ~/.claude/skills/
- Claude Code, project: unzip into .claude/skills/ inside the project
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
How do you trigger the skill with a natural request?
You do not need a special command. The skill loads when your request matches its description, so ask for UI work in plain language and name the Paperclip context. The skill's description lists its triggers: creating new UI components, modifying existing ones, adding pages or features, styling UI elements, and questions about the design language.
If the agent does not seem to use the conventions, say so directly, for example: 'Use the design-guide skill for this.' The skill also includes a /design-guide showcase page as a reference when you run the Paperclip frontend.
- Create a reusable status badge for deployment states using Paperclip's status colour rules.
- Add a settings page to the Paperclip frontend that matches the existing property rows and cards.
- Restyle this card to use the muted text and border tokens.
- Explain which component should show issue priority in a list row.
What does the skill need to run well?
The skill is documentation, not a tool. It does not run scripts and does not use the network. It does depend on the Paperclip repository being present, because it refers to ui/src, ui/components.json and references/component-index.md, and it says to use two companion skills alongside it: frontend-design for visual quality and web-design-guidelines for web best practices.
Install those companion skills too. Without the Paperclip checkout, the agent can still read the conventions, but it cannot check them against the real component files.
- Paperclip repository checked out locally
- Companion skills: frontend-design and web-design-guidelines
- Runs scripts: no
- Uses network: no
Is it safe to install?
According to the item assessment, the skill runs no scripts and makes no network requests. Its files are SKILL.md and references/component-index.md, which you can read before installing. Review them as you would any instructions an agent will follow, since they will shape the code the agent writes.
The skill tells the agent not to modify shadcn/ui primitives directly and to extend them through composition instead. Keep that rule in your review of agent-generated diffs.
- Read SKILL.md and references/component-index.md before installing.
- Review agent diffs in ui/src/components/ui/, which the skill says should not be edited directly.
What tips help you get consistent output?
Pair the skill with its companions in the same request when the work is visual, since the guide asks for both. Be specific about the screen or component, and point the agent at the existing pattern it should copy. The skill's own rule is to create a component only when the same pattern appears in two or more places, has interactive behaviour, or encodes domain logic; otherwise a one-off layout or plain Tailwind classes are preferred.
- Name the existing component or pattern to reuse, such as EntityRow or StatusBadge.
- Ask the agent to check component-index.md before creating anything new.
- Use the status tables for colours rather than choosing your own.
What people use it for
- Building a new custom composite, such as a status-aware row, that matches EntityRow conventions.
- Adding a dashboard page with a MetricCard grid using the documented responsive classes.
- Reviewing a UI change to confirm it uses the typography scale and status colours.
- Deciding whether a repeated layout should become a reusable component.
Frequently asked questions
What is the Paperclip Design Guide agent skill?
It is an agent skill named design-guide that gives an agent Paperclip's frontend design system: React, Tailwind and shadcn/ui building blocks, colour and typography tokens, and status and priority conventions. It applies when the agent creates or changes UI code in Paperclip.
How do I install the design-guide skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for a personal install, or into a project's .claude/skills/ folder. In the Claude apps, upload the ZIP under Settings → Capabilities → Skills.
What does the design-guide skill require?
It requires the Paperclip repository checked out so the referenced files exist, and the companion skills frontend-design and web-design-guidelines, which the guide says to use alongside it. It runs no scripts and uses no network.
Can I use this skill outside Paperclip?
The item assessment says it is not for projects outside Paperclip, because the tokens, status colours and component names are specific to its codebase. It also does not teach design from scratch, so it is not a general-purpose design system.
Is the design-guide skill free and MIT licensed?
The item is listed under the MIT licence. Check the licence file in the repository for the full terms before redistributing it.
Why isn't my agent following the design-guide conventions?
Ask for the skill by name in your request, confirm the ZIP unzipped into the right skills folder with SKILL.md present, and make sure the Paperclip repository is checked out so the referenced files can be read.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you contribute UI code to the Paperclip frontend, want new screens to match its existing components and tokens, or are reviewing whether a UI change follows its design language. Skip it for any project outside Paperclip or if you need a general-purpose design system that teaches design from first principles.
Download the skill