Toolchain

The router: ranked catalog, design systems, playbooks, taste memory and the @oc registry. Every other tool is chosen through it.

Use: Always. plan_ui for pages, propose_options for one component, search_components for pieces.

• registry @design-infra
• MCP design-infra
• manual: claude plugin marketplace add OwenCoonahan/design-infra --scope project && claude plugin install design-infra@oc-design --scope project
• agent instructions
• agent instructions

Every registry (ours, Aceternity, Magic UI, Kibo, Cult UI, React Bits…) installs through it; its MCP browses them all.

Use: Installing any component; plain app primitives (dialog, select, table, sidebar, chart) come from stock shadcn first.

• MCP shadcn
• DISABLE_TELEMETRY=1 npx -y skills@latest add shadcn/ui --skill shadcn -a claude-code codex -y

The animation engine under ~500 catalog entries; presets keep hand-written motion on the project's motion language.

Use: Any animation not covered by a drop-in component: layoutId indicators, exits, whileInView, scroll-linked, springs.

• npm motion
• shadcn add @design-infra/motion-presets
• agent instructions

Motion's own free skill (best practices, perf, a11y) + docs search MCP. design-infra decides WHAT; this knows HOW.

Use: Whenever an agent writes Motion code.

• DISABLE_TELEMETRY=1 npx -y skills@latest add motiondivision/ai-kit --skill motion -a claude-code codex -y
• MCP motion

Polished, mostly token-friendly animated components (marquee, blur-fade, number-ticker, border-beam); MIT; best free source of tasteful motion.

Use: Landing-page polish, text/number animation, subtle wrappers.

• registry @magicui
• DISABLE_TELEMETRY=1 npx -y skills@latest add magicuidesign/magicui -a claude-code codex -y

~230 MIT motion components + blocks on shadcn tokens with the best free AI/agent set (approval, tool call, task list, reasoning) and reduced-motion handling in most items.

Use: AI/agent surfaces; tabs, scroll-aware navbar, skeletons, carousels and reading progress. Set --brand: var(--primary) once (its tokens.json defaults to pink).

• registry @smoothui
• agent instructions

Unstyled Motion wrappers (in-view, text-effect, transition-panel, animated-background) — safest way to add motion to YOUR components.

Use: 'Animate this' on existing components; tabs/panels/lists/headlines.

• registry @motion-primitives

Tuned CSS micro-interaction recipes applied to your markup (modal, tabs, toast, number pop, success check); free tier is plenty.

Use: Polish passes: press/hover, open/close timing, state feedback — zero dependencies.

• DISABLE_TELEMETRY=1 npx -y skills@latest add Jakubantalik/transitions.dev --skill transitions-dev transitions-polish -a claude-code codex -y
• MCP transitions

~600 theme-aware app components (inputs, tables, calendars, navbars) — the best free source for product UI that just follows the theme.

Use: App UI variants beyond stock shadcn: fields, filters, data tables, date pickers, command menus.

• agent instructions

The most-used flashy marketing components (spotlights, beams, scroll effects) — but hard-coded colours and 174 Pro-only blocks.

Use: Hero/background/scroll moments on marketing pages; convert colours to tokens after install. Free components only.

• registry @aceternity

Click any element in the running app, annotate it, and the agent gets selector + source file — the fastest 'fix THIS' loop.

Use: Design review of a running UI; pairs with the refine skill.

• dev npm agentation
• MCP agentation
• DISABLE_TELEMETRY=1 npx -y skills@latest add benjitaylor/agentation --skill agentation -a claude-code codex -y
• agent instructions

Free, keyless MCP over 372 analysed real product designs and 1,978 extracted components with prompts — how real products solved a section, beyond our catalog.

Use: Researching a page or section ('fintech pricing pages', 'a site like Linear for X') before planning; never for bulk export.

• MCP kage
• agent instructions

Complex theme-aware product components (kanban, gantt, editor, dropzone, color picker) you'd never hand-build.

Use: Rich app features; its hosted MCP is currently broken (HTTP 500) — use the shadcn MCP instead.

• registry @kibo-ui

Playful, tactile components and onboarding flows; theming varies by generation.

Use: Consumer/playful projects (lively motion); check colours after install.

• registry @cult-ui

The deepest well of creative text effects, WebGL backgrounds and micro-interactions — heavy deps, purple defaults, Commons Clause (install-only).

Use: Cinematic/experimental pages. Names are case-sensitive: @react-bits/SplitText-TS-TW.

• registry @react-bits

The best free AI/agent surfaces (thinking traces, approvals, tool chips) — its foundation.css redefines --accent.

Use: AI products; import foundation.css BEFORE your theme or rename its accent vars.

• registry @beautifui

Small MIT npm packages for AI interfaces: thinking-orbs, border-beam, voice-glow, bot-avatars, metal-fx.

Use: Install per need (e.g. pnpm add thinking-orbs) — @design-infra/agent-status and @design-infra/beam-card wrap two of them.

Breadth: 12k+ community components and search when nothing curated fits. Quality varies.

Use: Searching for something specific the catalog lacks; read the code before shipping.

• registry @21st
• MCP 21st (user, keyed)

2,043 hand-drawn CC0 illustrations in 13 consistent kits, searchable through a free read-only MCP — warmth for empty states and onboarding without an illustrator.

Use: Empty states, onboarding, 404s and marketing spots on warm/playful products; download the chosen SVGs into the project.

• MCP kitbitz
• agent instructions

Specialist illustration tool for interactive explanations of mechanisms and technical concepts; the catalog supplies reusable anatomy-figures components first.

Use: Docs, educational articles and technical feature sections that need an explanatory SVG or WebGL figure. Select explicitly; ordinary controls use component libraries.

• DISABLE_TELEMETRY=1 npx -y skills@latest add wheresryan22/anatomy --skill anatomy -a claude-code codex -y
• agent instructions

Free animated controls, charts and agent surfaces with a public MIT registry. Separate from Beautiful UI and the paid beUI Pro collection.

Use: Choose compatible React 19/Tailwind 4 components as needed. Preserve the project theme; map missing surface tokens. Pro stays opt-in until licensed access is confirmed.

• registry @beui

~1,100 WebGL/shader backgrounds, heroes and cursors — the wow factor, metered and proprietary.

Use: A signature background/hero when the free catalog looks too familiar.

• MCP originkit (user, keyed)
• agent instructions

Carousel, Ticker, AnimateNumber, Typewriter, Cursor, page transitions and all 460+ example sources.

Use: Only with a licence; then prefer it over hand-rolled versions of those components.

• MCP motion-plus
• agent instructions

React/TS variants of every recipe plus Pro transitions.

Use: When CSS recipes need to become typed React components.

• MCP transitions-pro (user, keyed)