todero-capsules

Generate, implement, and review Todero capsule visuals for agents, status indicators, and brand surfaces.

Updated Mar 26, 2026
One-click install
npx skills add https://github.com/nabitllc/todero --skill todero-capsules-nabitllc
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: todero-capsules
Source: https://github.com/nabitllc/todero/tree/main/packages/skills-catalog/catalog/bundled/product/todero-capsules
Command: npx skills add https://github.com/nabitllc/todero --skill todero-capsules-nabitllc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Todero capsule visuals must follow strict brand rules—capsules represent agents, palettes stay separated by surface, and motion needs reduced-motion fallbacks—and this Skill enforces those rules when generating or reviewing capsule art. ## Core Features & Use Cases - Capsule Family Selection: Routes work to the correct surface: individual agent capsules, heartbeat status capsules, hero capsule bank, graphic-generator layouts, or seeded identicons. - Canonical Specifications: Provides exact geometry, gradient palettes, grain overlays, and wave-motion formulas for the hero capsule bank, plus deterministic identicon variants with dither algorithms and OKLCH/HSL color schemes. - Brand Validation: Supplies checklists to verify capsules represent agents, gradients stay inside capsule shapes, and reproducibility data (seed, config, dimensions) is recorded. - Use Case: When asked to create a hero image for a Todero feature video, load the hero-bank reference to render the canonical 8x12 capsule grid with the 45-gradient palette and grain overlay instead of improvising a new bank. ## Quick Start Use the todero-capsules skill to generate a seeded capsule identicon for a new agent and record its seed, variant, and palette.

Frequently Asked Questions about todero-capsules

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

FAQPage Schema
How do I generate a Todero capsule identicon for an agent?

Use the seeded identicon prototyper workflow with a normalized seed, variant, density, and theme. Choose from gradient variants like smooth, sheen, mesh, or aurora, or dither variants like Floyd-Steinberg and Bayer, then record the seed and config for reproducibility.

What is the correct way to render the Todero hero capsule bank?

Render 8 columns of 12 capsules on a 1200x675 viewBox with background #141413, using the 45 canonical gradients and per-column sequences. Apply the feTurbulence grain overlay masked to capsule shapes, and never deform capsule geometry for wave motion.

When should I use heartbeat status capsules instead of gradient agent capsules?

Use heartbeat status capsules for small solid status markers: gray for idle/active, pulsing blue for running, amber for paused, and blinking red for error. Gradient agent capsules are reserved for representing individual agents in product UI, not status indication.

Can I use Todero capsule gradients on buttons or badges?

No. Agent gradient palettes must stay confined to capsule shapes and never appear on buttons, text, page backgrounds, cards, or generic UI chrome. Capsules represent agents; the only decorative exception is the canonical hero capsule bank.

How does reduced motion affect capsule animations?

Reduced-motion settings remove slot pulses, online pulses, heartbeat pulse and blink animations, and layer transitions. The online liquid fill renders at full height without the rise animation, and identicon motion should be turned off for static exports.