componentslisted

Use when building a frontend and the user wants a distinctive / animated / "wow" UI element in React + Tailwind - e.g. a laptop-opening-on-scroll, 3D tilt card, spotlight hero, animated beams/background, marquee, bento grid, interactive globe, meteor/particle background, shimmer button, or scroll/reveal motion. Fetches the showpiece component LIVE at build time from code libraries (Aceternity, Magic UI, Cult UI, ReactBits, 21st.dev) via their shadcn registry command (or WebFetch fallback), then adapts it to brand tokens. Also covers plain components (button, form, modal, table, etc.) as a fallback. Triggers on "make it pop", "something flashy", "animated [X]", "like [cool site]", "build a [showpiece] section". NOT for non-React stacks. Inspiration galleries (Dribbble/godly) are visual reference only - never code.
AnayDhawan/Components · ★ 9 · Web & Frontend · score 62

Install: claude install-skill AnayDhawan/Components

# components **Fetch flashy, proven, animated React+Tailwind components LIVE from code libraries instead of hand-writing complex motion.** User describes an effect → match it → pull the real component at build time → adapt to brand. ## What this is - **PRIMARY: showpiece live-fetch.** Distinctive/animated components (laptop scroll, 3D card, beams, globe, marquee...) fetched live from code libraries via registry CLI / WebFetch. - **FALLBACK: plain components.** Standard button/form/modal/table when no "wow" is asked. - **SOURCE layer only.** After placing the component, hand off final polish/distinctiveness to `impeccable` / `frontend-design` **if installed** - both are optional sibling skills, not dependencies of this repo. See `references/handoff.md` for what to do when neither is available. - **Galleries ≠ code.** Dribbble, godly.website, Awwwards = visual reference ONLY. Never fetch components from them. ## Decision flow ``` user wants a UI component (React + Tailwind)? ├─ is it a distinctive / animated / "wow" effect? │ ├─ YES (primary path): │ │ 1. match the described effect → showpiece[] entry (name or aliases) │ │ 2. no direct match → search code_libraries[] live for the effect │ │ (WebFetch the library's components page, find the closest) │ │ 3. FETCH LIVE (see references/live-fetch.md): │ │ - preferred: run the entry's `ref` registry command │ │ e.g. `npx shadcn@latest add "https://ui.aceternity.com/registry/macbook-scroll.js