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.
• Layout curation. layouts[] are pre-composed arrangements (web sections or video beat patterns). TASTE.md is the required-reading standard for picking or building one - read it before selecting a layout.

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.json"`
│   │      - fallback: WebFetch / Playwright the page, extract the code
│   │   4. install listed `deps` (usually `motion` = framer-motion)
│   │   5. ADAPT: brand tokens + prefers-reduced-motion + responsive
│   │      (references/adaptation.md)
│   │   6. hand off polish → impeccable / frontend-design (optional, if installed)
│   └─ NO → fallback_basic[]: standard component, adapt to tokens.

How to fetch live

1. Read components.json. Find the showpiece entry by name/alias, else pick a code_libraries source and search it live.
2. Target project is Vue or Svelte, not React? Check whether the matched entry has a frameworks.vue / frameworks.svelte object. If it does, use its ref/fetch/library/license/deps instead of the entry's top-level (React) ones - the rest of this flow is unchanged. If it doesn't, say so; don't improvise a port. Coverage today: all 9 ReactBits entries have both Vue (Vue Bits) and Svelte (Svelte Bits) variants; the Aceternity and Magic UI entries with a verified Inspira UI equivalent have Vue variants. Everything else is React-only.
3. Show the user the registry command before running it (it pulls code into their project).
4. Run ref. If the registry shorthand fails (library changed it), open the site page, confirm the current command, retry. Last resort: WebFetch the page and write the code manually. (ref is the display form of the entry's fetch object; if you are writing tooling, read fetch.url / fetch.cli and never parse the command string.)
5. Install deps. Most need motion (framer-motion). 3D globe needs cobe; wavy bg needs simplex-noise. deps is not optional detail: it records peer dependencies the registry item itself does not declare, and the component will not compile without them (every Inspira UI variant needs @inspira-ui/plugins for cn(), which its registry JSON omits).
6. Adapt (mandatory - never raw): map demo colors to brand tokens, wrap motion in prefers-reduced-motion, check mobile.
7. Verify it compiles + renders, then hand off to a quality skill if one is installed (references/handoff.md). Otherwise the adapted component is already the final output.

Rules

• Live-fetch from code libraries only. showpiece + code_libraries are curated pointers; the actual code is fetched at build time so it stays current.
• Galleries are visual-ref only - no code lives there.
• Never paste raw. Adapt tokens + motion + responsive every time.
• Respect motion accessibility. Every animated component honors prefers-reduced-motion.
• Check license per source. Magic UI / Cult UI / ReactBits = MIT. Aceternity = free personal+commercial (verify). 21st.dev = per-component, verify before shipping; its registry endpoint also needs a 21st.dev account/API key, so use each entry's open-mirror ref or the page-fetch path.
• Safety: registry commands run code installs - show the command, prefer official namespaces, don't blindly run unknown-registry URLs.

Troubleshooting (fetch failed?)

Registries change. Recover in this order - never leave the user stuck:

1. Command 404 / "unknown registry" → open the entry's site page, confirm the current command, retry. Make sure shadcn@latest is used (not an old pinned version).
2. Still failing → WebFetch the component's docs page, extract the code block, write the file(s) manually, install the listed deps.
3. Code is behind JS/tabs → use the playwright skill to read the rendered code panel.
4. Network/registry down → fall back to the closest fallback_basic entry or a hand-composed version, and tell the user the showpiece source is unreachable. Do not block the build on a dead registry.

No vendoring, by design: components ships pointers only and never bundles upstream code, so when an upstream is unreachable the showpiece is temporarily unavailable. Degrade gracefully per step 4 (closest fallback_basic, or hand-compose) rather than erroring out. Staying pointer-only keeps the skill permanently clear of any redistribution licensing.

Limitations

• Primarily React + Tailwind, and the target project must already be shadcn-initialised (has components.json + a registry-aware npx shadcn setup). Vue and Svelte support is narrow and per-entry, not general: see step 2 of "How to fetch live" for which showpieces carry a verified frameworks.vue / frameworks.svelte variant. Everything else, and plain HTML, is React-only.
• No vendoring. Showpieces are pointers fetched live; if an upstream registry endpoint changes or goes down, that showpiece is temporarily unavailable (see Troubleshooting) rather than silently served from a stale local copy.
• 21st.dev entries route around the official registry (which needs an account/API key) via open mirrors or page-fetch - slightly more fragile than a direct npx shadcn call.
• License compliance is per-source, not blanket. components.json records each entry's license, but verifying it's still accurate before commercial redistribution is on the user (see Sources & licenses / ATTRIBUTION.md).
• Not a design-quality skill. It sources and adapts a component; it doesn't judge whether the result fits the page's visual system - that's impeccable / frontend-design's job.

Maintenance

showpiece/code_libraries are pointers, so they rot slowly. Quarterly: confirm registry namespaces + library sites still resolve. Update ref patterns if a library changes its CLI. See CONTRIBUTING.md.