components

Showpiece UI for AI coding agents. Describe a wow effect - a laptop opening on scroll, a 3D tilt card, animated beams, a spinning globe - and your agent fetches the real component live from the best React + Tailwind libraries (Aceternity, Magic UI, Cult UI, ReactBits, 21st.dev) and adapts it to your brand tokens. 1 skill · 39 showpiece effects · 12 plain fallbacks · 5 source libraries.

Quick start · Why · Showpieces · Installation · Sources & licenses · Contributing · License

A stylized walkthrough of the workflow, not a screen recording (higher-res clip).

▶ Live gallery - a curated showpiece per library, each one fetched from its real registry when that page was built.

Quick start

# clone, then drop the skill into your project (or ~/.claude for global)
git clone https://github.com/AnayDhawan/components
mkdir -p /.claude/skills/components
cp -r components/SKILL.md components/components.json components/references \
      /.claude/skills/components/

# PowerShell / Windows
git clone https://github.com/AnayDhawan/components
New-Item -ItemType Directory -Force \.claude\skills\components
Copy-Item -Recurse components\SKILL.md, components\components.json, components\references `
          \.claude\skills\components\

Then just ask your agent: “add a macbook-scroll hero” or “put an interactive globe in the contact section.” It matches the effect, runs the library’s registry command live, installs the deps, and adapts the result to your tokens.

Why components

Anthropic’s frontend-design skill makes an agent design well. It does not hand you a scroll-driven 3D MacBook or a WebGL globe - that motion is slow and bug-prone to hand-write, and copy-pasting from a docs site goes stale and skips attribution.