sachacoldiq/coldiq-s-gtm-skills/design-stack

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

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

1. Adapt to the project's design system (colors, radius, fonts) but keep animation timing/physics identical — that's where the quality lives.
2. Verify the build before declaring done.

Verified endpoints (2026-07)

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.