skills.rest
paperclipai
paperclipaiOFFICIAL
Explore all skills by this author →
Website𝕏@paperclipingGitHub

paperclip-capsules

Generate, implement, and validate Paperclip agent capsule visuals for product UI and marketing assets.

79.8k|14.6k|Updated Mar 2, 2026
Search Tags:#brand#visual-design#AGENTS#capsules#Paperclip#identicon
One-click install
npx skills add https://github.com/paperclipai/paperclip --skill paperclip-capsules
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: paperclip-capsules
Source: https://github.com/paperclipai/paperclip/tree/main/packages/skills-catalog/catalog/bundled/product/paperclip-capsules
Command: npx skills add https://github.com/paperclipai/paperclip --skill paperclip-capsules

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill addresses the visual inconsistency and brand dilution that occurs when AI agent representations are treated as generic UI elements rather than core brand assets.

Core Features & Use Cases

  • Visual Consistency: Provides canonical specifications for agent capsules, heartbeat status indicators, and hero capsule banks to ensure brand alignment.
  • Reproducible Generation: Offers workflows for creating seeded identicons and graphic-generator layouts that maintain visual identity across different media.
  • Use Case: Use this skill to generate a set of agent avatars for a new dashboard or to validate that a feature video's capsule motif adheres to the official Paperclip brand geometry and palette.

Quick Start

Use the paperclip-capsules skill to generate a seeded identicon for a new agent using the gradient-smooth variant and the Golden color scheme.

Frequently Asked Questions about paperclip-capsules

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a reproducible agent identicon?▼

Use the identicon-prototyper workflow by providing a specific seed, variant, and color scheme. The renderer ensures that the same input parameters consistently produce the identical SVG mark for your agent.

What is the difference between an agent capsule and a heartbeat status capsule?▼

Agent capsules are tall, gradient-filled surfaces representing individual agents, while heartbeat status capsules are small, solid-colored pills used exclusively for indicating state like running, paused, or error.

Can I use capsule gradients for buttons or generic UI elements?▼

No, agent capsule gradients are strictly reserved for agent representation. Applying these gradients to generic UI chrome like buttons or backgrounds violates the Paperclip brand guidelines.

How do I ensure my capsule animations are accessible?▼

Always implement a static fallback for any pulsing, blinking, or wave animations. Ensure your code respects user-defined reduced-motion settings by disabling motion-based CSS transitions when requested.

When should I use the hero capsule bank?▼

The hero capsule bank is the only approved decorative exception to the rule that capsules must represent agents. Use it exclusively for brand hero imagery and approved marketing motifs.

Related Skills

Explore More Design & Creative Skills→
o9nno9nn

paperclip-create-agent

Create and submit new AI agent hire requests within Paperclip.

Official
Intermediate
rejifaldrejifald
19

add-before-after-case

Coordinate marketplace and marketing asset synchronization with Playwright story files and React backdrops.

Community
Advanced
chmonitorchmonitor
255

hyperframes-creative

Generate brand-aligned visual systems for HyperFrames video productions from design specifications.

Official
Advanced
Project-N-E-K-OProject-N-E-K-O
2.4k

🎨 UI 设计规范

Codifies a reusable UI design system for N.E.K.O capsule interfaces and brand-blue tokens.

Official
Basic