How to use the Paperclip Capsules Design Guide agent skill

What the paperclip-capsules skill makes the agent do

Agent skills are folders of instructions and reference files that an AI agent loads when a task matches the skill's description. This one covers Paperclip capsule visuals. Its central rule is that the capsule is the agent: a capsule should only appear where the surface involves agents or agent status, not as a generic button, badge or background decoration.

• Keeps agent gradient palettes out of buttons, text, page backgrounds, cards and general UI chrome.
• Helps choose the right capsule type: individual agent, heartbeat status marker, hero banner, generated layout or seeded identicon.
• Asks the agent to record the seed, template, palette, dimensions and source workflow for generated assets.
• Points the agent to the existing app files such as ui/src/components/AgentCapsule.tsx and ui/src/lib/status-colors.ts instead of rebuilding them from memory.
• Asks for reduced-motion fallbacks for any pulsing, blinking or wave animation.

Install the skill from the ZIP or the Claude apps

Download the paperclip-capsules ZIP from the directory page and unzip it. The skill folder contains SKILL.md and a references folder with four files. There are two ways to make it available to the agent.

For a personal setup, place the unzipped skill folder inside ~/.claude/skills/. For a single project, place it inside that project's .claude/skills/ folder. Either way, the agent should find SKILL.md in the skill folder.

If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

• Personal install: ~/.claude/skills/paperclip-capsules/
• Project install: .claude/skills/paperclip-capsules/ inside your project
• App install: Settings → Capabilities → Skills

Trigger the skill with natural requests

You do not need a special command. The agent decides to load the skill when your request matches its description, which covers capsule art, agent capsules, heartbeat status capsules, identicons, capsule banks and brand-usage validation. Name the surface and the task in your request so the agent can pick the right capsule family.

If you want to be sure the skill is used, mention Paperclip and capsules explicitly.

• Make a seeded identicon for an agent called Research Helper and export it as SVG.
• Review this onboarding screen and tell me if the capsules misuse the brand palette.
• Implement the individual agent capsule in the org chart using the existing AgentCapsule component.
• Draft a status capsule set for idle, running, paused and error states.

Choose the right capsule surface

The skill sorts work into five families. Naming the family in your request, or letting the agent name it, keeps the output consistent with Paperclip's brand data.

Individual agent capsules are for one capsule per agent in product UI, onboarding, org surfaces or avatars. Heartbeat status capsules are small solid markers for idle, running, paused and error; they are not tall gradient identity capsules. The hero capsule bank is the only decorative exception and is used for hero imagery, feature-video scenes or approved marketing motifs. Graphic-generator layouts cover blend rows, chains, grids and hero compositions. Seeded identicons give an agent a reproducible personal capsule mark.

• individual-agent: one capsule equals one agent
• heartbeat-status: solid markers for agent status
• hero-bank: canonical decorative bank, do not hand-roll a new one
• graphic-generator: layouts and exportable compositions
• identicon: deterministic profile pills

Review your output against the checklist

The skill ends with a validation checklist the agent can apply to its own work. You can use the same list when reviewing a design yourself. Each capsule should represent an agent, an agent state or the hero-bank exception, and gradients should stay inside capsule shapes.

For generated visuals, expect the agent to report the capsule family, the source workflow or implementation path, the seed and config where available, dimensions, format, renderer and any divergence from canonical Paperclip rendering. For code changes, expect targeted checks on the edited surface.

• Each capsule represents an agent, agent state or the hero-bank exception.
• Gradients are confined to capsule shapes.
• App, website, video, identicon and hero-bank palettes stay separate.
• Motion is reduced or removed under reduced-motion settings.
• Seed, config or source path is recorded.
• Generated files are attached or linked as inspectable deliverables.

Know what the skill needs and its safety limits

For implementation work the skill needs access to the Paperclip repository files, specifically ui/src/components/AgentCapsule.tsx, ui/src/index.css and ui/src/lib/status-colors.ts. Without those files the agent can still follow the rules, but it cannot match the existing components. The skill can also pair with the optional Paperclip feature-video HyperFrames skill for video work. The source does not specify what software the generator workflows need.

The skill runs no scripts and makes no network requests, according to its listing. Some reference files point to external prototype repositories, but the skill is written so that it does not depend on them being reachable, and it uses the rules in its reference files instead.

• Runs scripts: no
• Uses network: no
• Needs Paperclip repository files for implementation work
• Optional: Paperclip feature-video HyperFrames skill for video