Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLIAbout this skill
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).
Quick start
- Copy the install prompt. Use the green button above this README.
- Send it to your agent. Paste it into your coding agent’s chat and send.
- Review the setup. Your agent checks the skill’s instructions, requirements, and installation scope.
Review, license & listing details
Review the source before using this skill
This is an imported listing. We haven’t certified its safety, license, or compatibility. Skills may include executable scripts.
Automated security scan: Unavailable
HTTP 404
About scan coverage and limitationsAbout this listing
- Category
- Product & design
- Reported license
- MIT
- Listing language (estimated)
- English
- Review status
- Not individually reviewed
- Agent compatibility
- Atlas installation supports Claude Code, Codex, and Cursor. Skill-specific dependencies and features are checked during setup.