paperclip-capsules

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.4key: paperclipai/bundled/product/paperclip-capsules5recommendedForRoles:6  - designer7  - product8  - engineer9  - marketing10tags:11  - paperclip12  - brand13  - capsules14  - agents15  - visual-design16  - hyperframes17---18 19# Paperclip Capsules20 21Use 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.22 23The 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.24 25## When to Use26 27- Generating Paperclip capsule art, agent avatars, capsule fields, hero capsule banks, or seeded capsule identicons.28- Implementing an individual agent capsule in product UI.29- Rendering heartbeat status capsules for agent status.30- Building Paperclip feature videos or marketing graphics that use the capsule motif.31- Reviewing a design for capsule brand correctness.32 33## When Not to Use34 35- Generic rounded pills, badges, buttons, tags, nav items, or decorative blobs.36- Non-agent illustrations where capsules would only be visual texture.37- Product UI color choices unrelated to agents or heartbeat status.38- Replacing the app's existing `AgentCapsule` or status-color helpers from memory.39 40## Non-Negotiable Rules41 42- **Capsules represent agents.** If the surface does not involve agents, do not add capsules.43- **Do not use the agent capsule palette outside capsules.** Never apply agent gradients to buttons, text, page backgrounds, cards, or generic UI chrome.44- **Keep capsule families separate.** App individual capsules, heartbeat status capsules, website marketing capsules, video capsules, seeded identicons, and the hero bank have different data.45- **Hero bank is the only decorative exception.** Use the canonical bank spec; do not hand-roll a new bank.46- **Record reproducibility data.** For generated assets, record seed, template, palette, dimensions, and source workflow.47- **Respect reduced motion.** Any pulsing, blinking, breathing, wave, or fill-rise animation needs a static reduced-motion fallback.48 49## Choose the Right Capsule Surface50 51Use **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.52 53Use **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.54 55Use 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.56 57Use **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`.58 59Use **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.60 61## Implementation Workflow62 631. Identify which capsule family you are working in: individual agent, status capsule, hero bank, generator layout, or identicon.642. Load the matching reference file from this skill.653. Prefer existing source implementations:66   - Product UI: `ui/src/components/AgentCapsule.tsx`, `ui/src/index.css`, and `ui/src/lib/status-colors.ts`.67   - Hero bank: canonical spec in `references/hero-capsule-bank.md`.68   - Video work: pair this skill with the Paperclip feature-video HyperFrames skill when available.694. If generating an artifact, choose a reproducible workflow and write down the seed/config.705. Verify that the result still reads as agent-related. Remove capsules if they became decoration.716. Attach or otherwise expose generated deliverables when doing issue work, and name the exact workflow used.72 73## Output Expectations74 75For any generated capsule asset, include:76 77- Capsule family: `individual-agent`, `heartbeat-status`, `hero-bank`, `graphic-generator`, or `identicon`.78- Source workflow or implementation path.79- Seed and config where available.80- Dimensions, format, and renderer.81- Any divergence from canonical Paperclip rendering.82 83For code changes, include targeted checks that exercise the edited surface. For visuals, include screenshots or inspectable SVG/PNG/HTML when possible.84 85## Validation Checklist86 87- Does each capsule represent an agent, agent state, or the canonical hero-bank exception?88- Are gradients confined to capsule shapes?89- Are app, website, video, identicon, and hero-bank palettes kept separate?90- Is motion reduced or removed under reduced-motion settings?91- Is the source path or reproducible seed/config recorded?92- Are generated files attached or linked as inspectable deliverables for issue work?93 94## References95 96- `references/individual-status-capsules.md` - product app capsules, heartbeat status capsules, palette caveats, and reduced-motion rules.97- `references/hero-capsule-bank.md` - canonical hero-bank geometry, palette, grain, wave, crop, and rendering checklist.98- `references/generator-workflows.md` - website generator and external graphic-generator workflows.99- `references/identicon-prototyper.md` - deterministic profile-pill variants, color schemes, dither algorithms, density behavior, motion, export/share controls, and recommended combinations.100