Design Stack skill

Design Stack — sourcing components from the best galleries

Core principle

Never write a premium component from scratch before checking the galleries. The best design libraries are machine-readable: their registries serve full component source as JSON. Fetch real source, adapt it — don't reinvent or hallucinate it.

Never invent a registry URL. Every endpoint below was verified 2026-07. If one fails, check references/ or the fallback column — don't guess.

Which gallery for which need

Need	Check first	Then
Charts, dashboards, KPIs	Bklit UI	Kibo UI
AI interfaces (prompts, chat, voice)	Kokonut UI	prompt-kit
Landing-page wow (hero, sparkles, beams)	Aceternity	Magic UI
Text effects, marquees, backgrounds	Magic UI	Fancy Components
Micro-interactions, small delights	SmoothUI	BadtzUI
Forms, inputs, app blocks (volume)	Origin UI	Kibo UI
Playful physics/creative motion	Fancy Components	ReactBits
CSS-only elements (buttons, loaders)	Uiverse (galaxy repo)	—
Animation APIs (springs, gestures, scroll)	Motion.dev llms.txt	Anime.js via Context7

Workflow

1. Shortlist 2–3 galleries from the table — not just one; compare before installing.
2. Browse the index: local digests in references/<gallery>-components.md (cached catalogs), or fetch the live index URL from the endpoint table.
3. Inspect candidates: fetch the per-item JSON — files[].content holds full source; check dependencies and registryDependencies.
4. Install:
   • shadcn-compatible project: npx shadcn@latest add "<item-url>"
   • otherwise: copy files[].content into the project and adapt (inline cn, swap shadcn primitives for plain elements).
5. Adapt to the project's design system (colors, radius, fonts) but keep animation timing/physics identical — that's where the quality lives.
6. Verify the build before declaring done.

Verified endpoints (2026-07)

Gallery	Index	Item pattern	Caveat
Kokonut UI	kokonutui.com/r/registry.json (40)	/r/{name}.json	needs motion, lucide-react
Bklit UI	ui.bklit.com/r/registry.json (56)	/r/{name}.json	charts depend on @visx/*, chart-utils items
Magic UI	magicui.design/r/registry.json (247)	/r/{name}.json	—
Aceternity	ui.aceternity.com/registry.json (270)	/registry/{name}.json	⚠️ different path, no /r/
Origin UI	none (HTML)	originui.com/r/{name}.json	discover via site search; names comp-NN + semantic
Fancy Components	fancycomponents.dev/r/registry.json (158)	/r/{name}.json	—
SmoothUI	smoothui.dev/r/registry.json (158)	/r/{name}.json	—
Kibo UI	kibo-ui.com/r/registry.json (41)	/r/{name}.json	—
BadtzUI	none usable	badtz-ui.com/r/{name}.json	names list in references/badtz-components.md
prompt-kit	—	prompt-kit.com/c/{name}.json	⚠️ /c/ path; use www. (308 otherwise)
Cult UI / Motion Primitives	bot-protected (429 to curl)	—	works through npx shadcn add CLI, not raw fetch
Uiverse	GitHub uiverse-io/galaxy	clone + grep locally	CSS/Tailwind snippets, no registry
Motion.dev	motion.dev/llms.txt	—	docs, not components
ReactBits	reactbits.dev/llms.txt	—	—
HeroUI / daisyUI	heroui.com/llms.txt / daisyui.com/llms.txt	—	full libraries, npm install
shadcn/ui	ui.shadcn.com/llms.txt	via shadcn CLI	the base layer

One-time project setup (offer it, don't assume it)

Registry aliases in components.json let the user type npx shadcn add @kokonutui/ai-prompt:

"registries": {
  "@kokonutui": "https://kokonutui.com/r/{name}.json",
  "@bklit": "https://ui.bklit.com/r/{name}.json",
  "@magicui": "https://magicui.design/r/{name}.json",
  "@aceternity": "https://ui.aceternity.com/registry/{name}.json",
  "@originui": "https://originui.com/r/{name}.json",
  "@fancy": "https://www.fancycomponents.dev/r/{name}.json",
  "@smoothui": "https://www.smoothui.dev/r/{name}.json",
  "@kibo": "https://www.kibo-ui.com/r/{name}.json",
  "@promptkit": "https://www.prompt-kit.com/c/{name}.json"
}

MCPs, if the user wants persistent connections: claude mcp add shadcn -- npx shadcn@latest mcp (search/install across configured registries) and claude mcp add context7 -- npx -y @upstash/context7-mcp (live docs for Anime.js, GSAP, any lib).

Common mistakes

• Inventing endpoint URLs — patterns differ per gallery (/r/, /registry/, /c/). Use the table.
• Checking one gallery only — the baseline failure mode. Compare 2–3; specialists beat generalists (gauge → Bklit before Magic UI).
• Giving up on a 429 — Cult UI and Motion Primitives block curl but work via the shadcn CLI.
• import { motion } from "framer-motion" in new code — modern registries use motion/react.
• Installing without reading registryDependencies — some components pull shadcn primitives (textarea, dropdown) you may need to replace outside shadcn projects.
• Restyle-everything syndrome — adapt tokens, never the animation constants.