Paperclip Capsules
Use this skill when creating or checking Paperclip capsule visuals. The central rule is simple: the capsule is the agent. A capsule is not generic chrome, a button shape, a random status pill, or background decoration.
The one approved decorative exception is the canonical hero capsule bank. Treat it as a specific Paperclip brand surface, not a license to make arbitrary capsule wallpaper.
When to Use
- Generating Paperclip capsule art, agent avatars, capsule fields, hero capsule banks, or seeded capsule identicons.
- Implementing an individual agent capsule in product UI.
- Rendering heartbeat status capsules for agent status.
- Building Paperclip feature videos or marketing graphics that use the capsule motif.
- Reviewing a design for capsule brand correctness.
When Not to Use
- Generic rounded pills, badges, buttons, tags, nav items, or decorative blobs.
- Non-agent illustrations where capsules would only be visual texture.
- Product UI color choices unrelated to agents or heartbeat status.
- Replacing the app's existing
AgentCapsule or status-color helpers from memory.
Non-Negotiable Rules
- Capsules represent agents. If the surface does not involve agents, do not add capsules.
- Do not use the agent capsule palette outside capsules. Never apply agent gradients to buttons, text, page backgrounds, cards, or generic UI chrome.
- Keep capsule families separate. App individual capsules, heartbeat status capsules, website marketing capsules, video capsules, seeded identicons, and the hero bank have different data.
- Hero bank is the only decorative exception. Use the canonical bank spec; do not hand-roll a new bank.
- Record reproducibility data. For generated assets, record seed, template, palette, dimensions, and source workflow.
- Respect reduced motion. Any pulsing, blinking, breathing, wave, or fill-rise animation needs a static reduced-motion fallback.
Choose the Right Capsule Surface
Use individual agent capsules when one capsule equals one agent in product UI, onboarding, org surfaces, or avatars. Read references/individual-status-capsules.md before implementing or changing UI behavior.
Use heartbeat status capsules for small solid status markers: idle/active gray, running blue pulse, paused amber, error red blink. These are not tall gradient identity capsules.
Use the hero capsule bank only for brand hero imagery, feature-video hero scenes, or approved marketing motif work. Read references/hero-capsule-bank.md before drawing it.
Use graphic-generator layouts when the task asks for capsule graphics such as blend rows, chains, grids, icon marks, or hero compositions. Prefer seeded tools and exportable workflows; read references/generator-workflows.md.
Use seeded identicons/profile pills when an agent needs a reproducible personal capsule mark. Read references/identicon-prototyper.md before choosing variants, color schemes, dither algorithms, density, sheen, aurora, mesh, motion, or exports.
Implementation Workflow
- Identify which capsule family you are working in: individual agent, status capsule, hero bank, generator layout, or identicon.
- Load the matching reference file from this skill.
- Prefer existing source implementations:
- Product UI:
ui/src/components/AgentCapsule.tsx, ui/src/index.css, and ui/src/lib/status-colors.ts.
- Hero bank: canonical spec in
references/hero-capsule-bank.md.
- Video work: pair this skill with the Paperclip feature-video HyperFrames skill when available.
- If generating an artifact, choose a reproducible workflow and write down the seed/config.
- Verify that the result still reads as agent-related. Remove capsules if they became decoration.
- Attach or otherwise expose generated deliverables when doing issue work, and name the exact workflow used.
Output Expectations
For any generated capsule asset, include:
- Capsule family:
individual-agent, heartbeat-status, hero-bank, graphic-generator, or identicon.
- Source workflow or implementation path.
- Seed and config where available.
- Dimensions, format, and renderer.
- Any divergence from canonical Paperclip rendering.
For code changes, include targeted checks that exercise the edited surface. For visuals, include screenshots or inspectable SVG/PNG/HTML when possible.
Validation Checklist
- Does each capsule represent an agent, agent state, or the canonical hero-bank exception?
- Are gradients confined to capsule shapes?
- Are app, website, video, identicon, and hero-bank palettes kept separate?
- Is motion reduced or removed under reduced-motion settings?
- Is the source path or reproducible seed/config recorded?
- Are generated files attached or linked as inspectable deliverables for issue work?
References
references/individual-status-capsules.md - product app capsules, heartbeat status capsules, palette caveats, and reduced-motion rules.references/hero-capsule-bank.md - canonical hero-bank geometry, palette, grain, wave, crop, and rendering checklist.references/generator-workflows.md - website generator and external graphic-generator workflows.references/identicon-prototyper.md - deterministic profile-pill variants, color schemes, dither algorithms, density behavior, motion, export/share controls, and recommended combinations.
1---2name: paperclip-capsules3description: Generate, implement, or review Paperclip capsule visuals. Use for capsule art, agent capsules, heartbeat status capsules, identicons, capsule banks, or brand-usage validation.4---5
6# Paperclip Capsules
7
8Use this skill when creating or checking Paperclip capsule visuals. The central rule is simple: **the capsule is the agent**. A capsule is not generic chrome, a button shape, a random status pill, or background decoration.
9
10The one approved decorative exception is the canonical hero capsule bank. Treat it as a specific Paperclip brand surface, not a license to make arbitrary capsule wallpaper.
11
12## When to Use
13
14- Generating Paperclip capsule art, agent avatars, capsule fields, hero capsule banks, or seeded capsule identicons.
15- Implementing an individual agent capsule in product UI.
16- Rendering heartbeat status capsules for agent status.
17- Building Paperclip feature videos or marketing graphics that use the capsule motif.
18- Reviewing a design for capsule brand correctness.
19
20## When Not to Use
21
22- Generic rounded pills, badges, buttons, tags, nav items, or decorative blobs.
23- Non-agent illustrations where capsules would only be visual texture.
24- Product UI color choices unrelated to agents or heartbeat status.
25- Replacing the app's existing `AgentCapsule` or status-color helpers from memory.
26
27## Non-Negotiable Rules
28
29- **Capsules represent agents.** If the surface does not involve agents, do not add capsules.
30- **Do not use the agent capsule palette outside capsules.** Never apply agent gradients to buttons, text, page backgrounds, cards, or generic UI chrome.
31- **Keep capsule families separate.** App individual capsules, heartbeat status capsules, website marketing capsules, video capsules, seeded identicons, and the hero bank have different data.
32- **Hero bank is the only decorative exception.** Use the canonical bank spec; do not hand-roll a new bank.
33- **Record reproducibility data.** For generated assets, record seed, template, palette, dimensions, and source workflow.
34- **Respect reduced motion.** Any pulsing, blinking, breathing, wave, or fill-rise animation needs a static reduced-motion fallback.
35
36## Choose the Right Capsule Surface
37
38Use **individual agent capsules** when one capsule equals one agent in product UI, onboarding, org surfaces, or avatars. Read `references/individual-status-capsules.md` before implementing or changing UI behavior.
39
40Use **heartbeat status capsules** for small solid status markers: idle/active gray, running blue pulse, paused amber, error red blink. These are not tall gradient identity capsules.
41
42Use the **hero capsule bank** only for brand hero imagery, feature-video hero scenes, or approved marketing motif work. Read `references/hero-capsule-bank.md` before drawing it.
43
44Use **graphic-generator layouts** when the task asks for capsule graphics such as blend rows, chains, grids, icon marks, or hero compositions. Prefer seeded tools and exportable workflows; read `references/generator-workflows.md`.
45
46Use **seeded identicons/profile pills** when an agent needs a reproducible personal capsule mark. Read `references/identicon-prototyper.md` before choosing variants, color schemes, dither algorithms, density, sheen, aurora, mesh, motion, or exports.
47
48## Implementation Workflow
49
501. Identify which capsule family you are working in: individual agent, status capsule, hero bank, generator layout, or identicon.
512. Load the matching reference file from this skill.
523. Prefer existing source implementations:
53 - Product UI: `ui/src/components/AgentCapsule.tsx`, `ui/src/index.css`, and `ui/src/lib/status-colors.ts`.
54 - Hero bank: canonical spec in `references/hero-capsule-bank.md`.
55 - Video work: pair this skill with the Paperclip feature-video HyperFrames skill when available.
564. If generating an artifact, choose a reproducible workflow and write down the seed/config.
575. Verify that the result still reads as agent-related. Remove capsules if they became decoration.
586. Attach or otherwise expose generated deliverables when doing issue work, and name the exact workflow used.
59
60## Output Expectations
61
62For any generated capsule asset, include:
63
64- Capsule family: `individual-agent`, `heartbeat-status`, `hero-bank`, `graphic-generator`, or `identicon`.
65- Source workflow or implementation path.
66- Seed and config where available.
67- Dimensions, format, and renderer.
68- Any divergence from canonical Paperclip rendering.
69
70For code changes, include targeted checks that exercise the edited surface. For visuals, include screenshots or inspectable SVG/PNG/HTML when possible.
71
72## Validation Checklist
73
74- Does each capsule represent an agent, agent state, or the canonical hero-bank exception?
75- Are gradients confined to capsule shapes?
76- Are app, website, video, identicon, and hero-bank palettes kept separate?
77- Is motion reduced or removed under reduced-motion settings?
78- Is the source path or reproducible seed/config recorded?
79- Are generated files attached or linked as inspectable deliverables for issue work?
80
81## References
82
83- `references/individual-status-capsules.md` - product app capsules, heartbeat status capsules, palette caveats, and reduced-motion rules.
84- `references/hero-capsule-bank.md` - canonical hero-bank geometry, palette, grain, wave, crop, and rendering checklist.
85- `references/generator-workflows.md` - website generator and external graphic-generator workflows.
86- `references/identicon-prototyper.md` - deterministic profile-pill variants, color schemes, dither algorithms, density behavior, motion, export/share controls, and recommended combinations.
paperclipai