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 <your-project>/.claude/skills/components
cp -r components/SKILL.md components/components.json components/references \
      <your-project>/.claude/skills/components/

# PowerShell / Windows
git clone https://github.com/AnayDhawan/components
New-Item -ItemType Directory -Force <your-project>\.claude\skills\components
Copy-Item -Recurse components\SKILL.md, components\components.json, components\references `
          <your-project>\.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.

components is a sourcing skill. It answers one question - "which proven showpiece fits, and how do I make it on-brand?" - by pulling the real, maintained component live at build time, then handing final polish to a quality skill (impeccable / frontend-design). It curates pointers, not stale copies, so the code is always current and the upstream license travels with it.

What's included

The skill

SKILL.md (decision flow + rules) · components.json (the registry of pointers, plus layouts[] - pre-composed web/video arrangements) · TASTE.md (layout curation & anti-slop taste standards, plus a pointer table to compatible third-party Claude Code skills) · references/live-fetch.md (registry-CLI / WebFetch / Playwright methods) · references/adaptation.md (brand tokens, dark mode, responsive, prefers-reduced-motion) · references/handoff.md (optional impeccable / frontend-design polish handoff + graceful degradation when neither is installed) · references/dependencies.md (React / Tailwind / shadcn CLI / peer-dep version matrix) · references/conventions.md (per-library fetched-file path + export-shape conventions).