skills.rest
PhongCT1105
PhongCT1105COMMUNITY
Explore all skills by this author →
GitHub

21st-magic

Search and generate React and Tailwind UI components through the 21st MCP catalog.

Updated Jul 30, 2026
Search Tags:#frontend#react#mcp#component generation#tailwind#ui components#21st.dev
One-click install
npx skills add https://github.com/PhongCT1105/okta_stripe_hack --skill 21st-magic-phongct1105
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: 21st-magic
Source: https://github.com/PhongCT1105/okta_stripe_hack/tree/main/frontend/.agents/skills/21st-magic
Command: npx skills add https://github.com/PhongCT1105/okta_stripe_hack --skill 21st-magic-phongct1105

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building React and Tailwind UI components from scratch is slow and often produces inconsistent results that ignore a project's existing design tokens and conventions. This Skill connects to the 21st.dev component catalog so you can discover, generate, and refine UI components that match your frontend stack. ## Core Features & Use Cases - Component Discovery: Search the 21st catalog for existing React and Tailwind components before writing new code. - Component Generation: Generate component variants aligned with the project's aliases, tokens, and conventions, then add source files directly into the frontend project. - Logo Search: Find logos through the 21st MCP for branding and UI needs. - Use Case: While building a Next.js dashboard, ask for a pricing table component; the Skill searches the 21st catalog, retrieves a matching component, adapts it to your Tailwind setup, and validates responsive behavior and build output. ## Quick Start Use 21st-magic to find and add a responsive navbar component to my React and Tailwind frontend project.

Frequently Asked Questions about 21st-magic

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate React components with 21st Magic?▼

Ask for the component you need and the Skill searches the 21st catalog first, then retrieves or generates a variant matching your project's stack. Generated source files are added to the frontend project while preserving its aliases, tokens, and conventions.

How do I set up the 21st MCP connection?▼

Create an API key at https://21st.dev/mcp and configure the HTTP endpoint https://21st.dev/api/mcp in your MCP client. Never commit the API key to version control.

Does 21st Magic work with Tailwind CSS projects?▼

Yes, the Skill is designed for React and Tailwind UI work. It generates components that respect the project's existing design tokens and component conventions, then validates responsive behavior and build output.

What happens if the 21st MCP is not connected?▼

The Skill directs you to create a current API key at https://21st.dev/mcp and configure the HTTP endpoint. The legacy Magic MCP package at frontend/tools/magic-mcp exists only as a compatibility proxy.

Can 21st Magic search for logos?▼

Yes, logo search is one of the supported use cases alongside component discovery and generation. It uses the same 21st MCP tools to find logo assets for your UI.

Related Skills

Explore More Software Engineering Skills→
AgentiveCityAgentiveCity
2

shadcn-vite-integration

Configure shadcn/ui in Vite React TypeScript projects with Tailwind CSS.

Official
Intermediate
hamzaPixlhamzaPixl
2

admin-dashboard

Scaffold a Next.js admin dashboard with shadcn/ui, RBAC UI, and backend API integration.

Community
Intermediate
LimaTechnologiesLimaTechnologies

ui-ux-audit

Automate UI/UX audits for accessibility, responsiveness, and design-system consistency.

Community
Basic
AradotsoAradotso
3

better-design-shadcn-themes

Install themed shadcn/ui components from Better Design registries via shadcn CLI.

Official
Basic