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.

A stylized motion-graphics demo of the workflow, not an actual recorded run. A real captured session will replace it in a later release.

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/

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) · 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).

Showpiece effects (live-fetched)

Effect	Library	Command	License
MacBook lid opens on scroll	aceternity	npx shadcn@latest add "https://ui.aceternity.com/registry/macbook-scroll.json"	free¹
3D tilt card (cursor depth)	aceternity	npx shadcn@latest add "https://ui.aceternity.com/registry/3d-card.json"	free¹
Cursor / hero spotlight glow	aceternity	npx shadcn@latest add "https://ui.aceternity.com/registry/spotlight.json"	free¹
Animated SVG background beams	aceternity	npx shadcn@latest add "https://ui.aceternity.com/registry/background-beams.json"	free¹
Conic lamp glow heading	aceternity	npx shadcn@latest add "https://ui.aceternity.com/registry/lamp.json"	free¹
Flowing wavy background	aceternity	npx shadcn@latest add "https://ui.aceternity.com/registry/wavy-background.json"	free¹
Infinite looping cards	aceternity	npx shadcn@latest add "https://ui.aceternity.com/registry/infinite-moving-cards.json"	free¹
Staggered text reveal	aceternity	npx shadcn@latest add "https://ui.aceternity.com/registry/text-generate-effect.json"	free¹
Grid hover spotlight	aceternity	npx shadcn@latest add "https://ui.aceternity.com/registry/card-hover-effect.json"	free¹
Beam between nodes	magicui	npx shadcn@latest add "https://magicui.design/r/animated-beam.json"	MIT
Logo / ticker marquee	magicui	npx shadcn@latest add "https://magicui.design/r/marquee.json"	MIT
Asymmetric bento grid	magicui	npx shadcn@latest add "https://magicui.design/r/bento-grid.json"	MIT
Interactive WebGL globe	magicui	npx shadcn@latest add "https://magicui.design/r/globe.json"	MIT
Meteor-shower background	magicui	npx shadcn@latest add "https://magicui.design/r/meteors.json"	MIT
Shimmer CTA button	magicui	npx shadcn@latest add "https://magicui.design/r/shimmer-button.json"	MIT
macOS magnify dock	magicui	npx shadcn@latest add "https://magicui.design/r/dock.json"	MIT
Shiny sweeping text	magicui	npx shadcn@latest add "https://magicui.design/r/animated-shiny-text.json"	MIT
Interactive particle field	magicui	npx shadcn@latest add "https://magicui.design/r/particles.json"	MIT
Staggered split-text entrance	reactbits	npx shadcn@latest add "https://reactbits.dev/r/SplitText-TS-TW"	MIT
Blur fade-in text	reactbits	npx shadcn@latest add "https://reactbits.dev/r/BlurText-TS-TW"	MIT
Scramble/decode text	reactbits	npx shadcn@latest add "https://reactbits.dev/r/DecryptedText-TS-TW"	MIT
Animated number count-up	reactbits	npx shadcn@latest add "https://reactbits.dev/r/CountUp-TS-TW"	MIT
WebGL aurora background	reactbits	npx shadcn@latest add "https://reactbits.dev/r/Aurora-TS-TW"	MIT
GPU particle field (WebGL)	reactbits	npx shadcn@latest add "https://reactbits.dev/r/Particles-TS-TW"	MIT
Hyperspeed light tunnel	reactbits	npx shadcn@latest add "https://reactbits.dev/r/Hyperspeed-TS-TW"	MIT
Glitching letter wall	reactbits	npx shadcn@latest add "https://reactbits.dev/r/LetterGlitch-TS-TW"	MIT
Fluid-simulation cursor (WebGL)	reactbits	npx shadcn@latest add "https://reactbits.dev/r/SplashCursor-TS-TW"	MIT
iOS dynamic island	cult-ui	npx shadcn@latest add "https://www.cult-ui.com/r/dynamic-island.json"	MIT
WebGL lens-blur shader	cult-ui	npx shadcn@latest add "https://www.cult-ui.com/r/shader-lens-blur.json"	MIT
Fractal grid canvas bg	cult-ui	npx shadcn@latest add "https://www.cult-ui.com/r/canvas-fractal-grid.json"	MIT
Tactile texture card	cult-ui	npx shadcn@latest add "https://www.cult-ui.com/r/texture-card.json"	MIT
Typewriter text loop	cult-ui	npx shadcn@latest add "https://www.cult-ui.com/r/typewriter.json"	MIT
Springy animated number	cult-ui	npx shadcn@latest add "https://www.cult-ui.com/r/animated-number.json"	MIT
Floating-shapes hero	21st.dev	page-fetch² (@kokonutd/shape-landing-hero)	MIT²
Matrix text reveal	21st.dev	npx shadcn@latest add "https://kokonutui.com/r/matrix-text.json"	MIT²
Animated light beams bg	21st.dev	npx shadcn@latest add "https://kokonutui.com/r/beams-background.json"	MIT²
Flowing SVG paths hero bg	21st.dev	npx shadcn@latest add "https://kokonutui.com/r/background-paths.json"	MIT²
v0-style AI chat input	21st.dev	page-fetch² (@kokonutd/v0-ai-chat)	MIT²
Interactive cobe globe	21st.dev	page-fetch² (@shuding/cobe-globe-interactive)	MIT²

¹ Aceternity License: free to use in unlimited personal and commercial end products; the component/source itself may not be redistributed (no reselling, templating, or marketplace listing) - see Sources & licenses. Full registry URLs are used (not the namespaced short form) so a fresh shadcn project can fetch a showpiece with no extra registry config - see #14.

² 21st.dev's registry endpoint now requires an account/API key, so 21st.dev entries either use the author's own open registry mirror (kokonutui.com) or fall back to fetching the public component page (WebFetch/Playwright). 21st.dev has no blanket license; every curated entry's license is verified against the upstream source repo (KokonutUI and cobe are MIT).

Plain fallbacks (when no wow is needed)

button · navbar · hero · pricing-table · feature-grid · form · modal · tabs · data-table · dashboard-stat-cards · toast · empty-state - standard shadcn/ui, Tremor for data.

Anti-patterns (the skill enforces these)

• Never raw-paste. Always adapt colors to brand tokens, wrap motion in prefers-reduced-motion, check mobile.
• Galleries are visual-reference only. Dribbble / godly.website / Awwwards contain no code and are never fetched from.
• One showpiece per viewport. Showpieces are seasoning, not the meal.

Installation

components is a Claude Code skill (markdown + a JSON registry - no executable code of its own). Copy the payload into a skills directory:

# project-scoped
mkdir -p <your-project>/.claude/skills/components
cp -r SKILL.md components.json references <your-project>/.claude/skills/components/

# or global, for every project
mkdir -p ~/.claude/skills/components
cp -r SKILL.md components.json references ~/.claude/skills/components/

The agent auto-discovers it from the description in SKILL.md. It needs network access at build time (to fetch live) and a shadcn-initialised React + Tailwind project to install into.

Usage

"make the hero pop - laptop opening as you scroll"   → aceternity/macbook-scroll
"animated beams behind the features section"         → aceternity/background-beams
"interactive globe near the contact form"            → magicui/globe
"marquee of customer logos"                          → magicui/marquee
"just a normal contact form"                         → fallback: shadcn form

Sources & licenses

Library	License	Notes
Aceternity UI	Free for personal + commercial (licence)	Attribution not required; verify the licence page before relaunch
Magic UI	MIT
Cult UI	MIT
ReactBits	MIT	shadcn registry: reactbits.dev/r/<Name>-TS-TW
21st.dev	Per-component - verify each	Community registry; registry endpoint needs an account/API key - curated entries use open mirrors or page-fetch
shadcn/ui	MIT	Plain fallbacks
Tremor	Apache-2.0	Dashboards / charts

Full attribution: ATTRIBUTION.md. Each components.json entry records its source + license; fetched code carries its own upstream license, never this repo's.

Supported tools

• Claude Code (native - the skill auto-loads from .claude/skills/).
• Any agent that can read a SKILL.md + run npx + WebFetch can use the same components.json registry.

Community & contributing

PRs are almost always a new/updated entry in components.json. See CONTRIBUTING.md, the Code of Conduct, and the open issues for the roadmap.

License

Apache-2.0 © Anay Dhawan. Components fetched via the skill carry their own upstream licenses (recorded per entry in components.json).