Skip to content
Get packs

Paperclip Design Guide

Build UI components for the Paperclip frontend consistently, using its design tokens and conventions.

Source Download skill
Repository
paperclipai/paperclip
Stars
110,078
Licence
MIT
Files
2 files

What it does

When installed, the agent follows Paperclip's internal frontend design system when creating or changing user interface code. It knows which React, Tailwind and shadcn/ui building blocks to use, which colour and typography tokens to apply, how status and priority indicators should look, and when to build a reusable component instead of a one-off layout. It also points the agent to a component inventory file for details.

Great for

  • Developers contributing UI code to the Paperclip frontend
  • Teams that want new screens to match Paperclip's existing look and component patterns
  • Designers reviewing whether a UI change follows the design language

Skip it if

  • Projects outside Paperclip, since the tokens, status colours and component names are specific to its codebase
  • Anyone wanting a general-purpose design system, because it documents one product's conventions rather than teaching design from scratch

Try asking

  • “Create a new reusable StatusBadge-style component for the agents list following Paperclip conventions”
  • “Add a new settings page to the Paperclip frontend using the existing typography scale”
  • “Review this component for correct design tokens and shadcn/ui usage”
  • “Show me which existing component to use for an issue row with status and priority”
Step-by-step guide: how to use Paperclip Design GuideInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    design-guide.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip design-guide.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip design-guide.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at a specific component or page so it reads the matching files before editing
  • Install the companion frontend-design and web-design-guidelines skills, since this guide expects them to be used together
  • Check the agent's changes against the token and typography tables, as the guide asks for exact class patterns

What's inside

  • references/component-index.md
  • SKILL.md

Redistributed unmodified from paperclipai/paperclip under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.