contact715

Elevenlabs Sphere Hero — Design skill for Claude Code

Design community

Skill: ElevenLabs-Style Sphere Hero — Asymmetric two-column hero with LiveGradientSphere.

How to install Elevenlabs Sphere Hero

Installs to ~/.claude/skills/contact715-jidoka-elevenlabs-sphere-hero/SKILL.md

Terminal

mkdir -p ~/.claude/skills/contact715-jidoka-elevenlabs-sphere-hero && curl -fsSL https://raw.githubusercontent.com/contact715/jidoka/HEAD/.claude/skills/elevenlabs-sphere-hero.md -o ~/.claude/skills/contact715-jidoka-elevenlabs-sphere-hero/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Elevenlabs Sphere Hero does

Skill: ElevenLabs-Style Sphere Hero — Asymmetric two-column hero with LiveGradientSphere

Wave: wave-10 / wave-15 | Status: active | Tags: hero, sphere, layout, animation, brand

When to use

Building a hero card for a voice/AI feature page inside the dashboard.
The design calls for a dominant visual element (the sphere) counterbalancing text content.
The sphere needs to communicate brand identity and stay GPU-composited (no canvas/WebGL).
Needs reduced-motion compliance.

Alternatives in Design

Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
Planning With Files — Claude Code skill implementing Manus-style persistent markdown planning — the workflow pattern behind the $2B 17.4k ★
Explanatory Output Style — Educational output mode with insights about implementation choices 14k ★