xantham-21st-bridge

name: xantham-21st-bridge description: Use when generating a React UI component (pricing table, form, modal, dashboard tile, navbar, hero, AI-chat surface) and the goal is "novel functional component with sensible defaults". Routes to 21st.dev/magic-chat browser flow (free tier 100 credits/month, no API key needed) for the initial component, then hands the generated code back to Xantham for integration. Skip when the work is hand-styled premium taste, full-page design (use ui-ux-pro-max instead), animation-first work (use Motion or freshtechbro/claudedesignskills), or pure refactor of existing components (use frontend-design or redesign-skill). compatibility: "Claude Code only" metadata: pattern: 4 pattern_name: "Context-aware tool selection" last_updated: 2026-05-10

21st.dev browser bridge

Xantham has a deep frontend skill stack. 21st.dev fills one specific slot: getting a battle-tested React component fast without hand-coding the structure.

When this fires

Trigger conditions (any one is enough):

• "Generate a [component-type]" where component-type is a generic pattern: pricing table, contact form, modal, navbar, hero, dashboard tile, settings panel, AI-chat surface, login form, sidebar, breadcrumb, accordion, etc.
• The user wants a starting point for a component, not a hand-tuned premium build.
• The component fits a known UI pattern that has been built thousands of times (no novel interaction model).

Skip conditions (any one is enough):

• Hand-styled premium taste matters more than registry components -> use frontend-design, taste-skill, soft-skill, minimalist-skill, or brutalist-skill based on the desired feel.
• Full-page design (palette + typography + spacing + chart picks together) -> use ui-ux-pro-max.
• Animation-first work (page transitions, micro-interactions, scroll sequences) -> use Motion AI Kit if installed, otherwise freshtechbro/claudedesignskills bundle.
• Refactor of an existing component -> use redesign-skill.
• Quick fix to a single element -> just write the code.
• 21st.dev free-tier credits are exhausted (100/month).

How to use 21st.dev (browser flow, free tier)

The 21st.dev/magic-chat interface is the no-API-key path. Free tier ships with 100 credits/month.

Step-by-step

1. Open Chrome to https://21st.dev/magic-chat (Xantham can do this via mcp__claude-in-chrome__navigate or by handing the URL to the user).
2. Describe the component using /ui syntax. Example: /ui pricing table for a quit-vape app, three tiers, monthly/annual toggle, primary CTA on the middle tier, dark theme optional.
3. Wait for variations. The system generates multiple styles for the same component.
4. Browse + pick. Compare the variations side-by-side, pick the one whose layout best matches the brief.
5. Copy the code. Either copy the full TypeScript code directly, OR copy the integration prompt 21st.dev provides for use inside Claude Code.

Where the generated code lands

If Xantham drives the browser:

• Use mcp__claude-in-chrome__navigate to open the URL.
• Use mcp__claude-in-chrome__form_input or mcp__claude-in-chrome__type to enter the /ui prompt.
• Use mcp__claude-in-chrome__read_page to read the generated code blocks.
• Paste the code into the target file via Write or Edit tools.

If the user drives the browser:

• Xantham writes a precise /ui ... prompt for the user to paste.
• the user picks a variation and pastes the code back to Xantham via Telegram or terminal.
• Xantham integrates it into the target project.

Picking which mode

• Xantham drives when the component is part of a build kai is dispatched on, no taste judgment required, the prompt is precise enough that any of the variations is acceptable.
• the user drives when taste matters (the user has the visual eye for which variation reads best).

Pick-and-choose policy across all frontend skills

Xantham's frontend stack as of 2026-05-10:

The trigger conditions in each skill's description field are how Claude Code routes. Xantham picks the right skill for the job per the table above. ALL skills are kept; never delete one because a new one shipped.

Cost discipline

• Free tier 100 credits/month on 21st.dev. One credit per /ui generation (multiple variations included). Treat the free tier as: ~100 components per month.
• If the same component pattern appears twice in one project, save the chosen variation locally (e.g. Library/snippets/<component>.tsx) so the second use doesn't burn another credit.
• Above the free tier, paid plans exist. Don't auto-upgrade without telling the user.

Why this skill exists vs hand-rolling components

The 21st.dev registry has been built and validated by 1.4M devs / 200K MAU. A pricing-table component there has been A/B tested across thousands of sites. Xantham hand-rolling a pricing table from scratch every time is the kind of "build custom X" anti-pattern that perma-rule 9 (feedback_check_published_repo_first.md) explicitly fights. Use the registry, ship faster, save the taste judgment for the ~20 percent of components where premium feel actually matters.

What this skill does NOT do

• Not a substitute for hand-styling. The 21st.dev variation is the starting point, not the final design.
• Not a substitute for taste. Xantham still picks variations, integrates copy, picks colour overrides, animates entry, makes responsive decisions. 21st.dev gives the structure; the polish is still Xantham's.
• Not a way around constitutional principles in any specific project (e.g. 90 Days no-medical-claims, banned-language gate, no analytics SDK). Always re-check the generated code against project constitution before integration.