magic-ui-generator

Utilizes Magic by 21st.dev to generate, compare, and integrate multiple production-ready UI component variations.

Try it — you'd type

“Help me with magic-ui-generator.”

And you'd get back

Utilizes Magic by 21st.dev to generate, compare, and integrate multiple production-ready UI component variations.

Formatted for Claude, no fluff, no preamble.

Works the same way every time you ask.

Adding it takes about 30 seconds

Click Get this skill. Grab the .md file, one click, no account needed.

Add it to Claude. Drop it into ~/.claude/skills/. Claude picks it up the next time you open a session.

Ask normally. Type your question. The skill triggers on the right keywords — you don't have to remember anything.

Unlock all skills — $25

You might also like

Component Generator

Generate React/Vue/Svelte components with props

Responsive Layout

Create responsive layouts with Tailwind/CSS Grid

Form Builder

Build forms with validation (React Hook Form, Formik)

State Management Setup

Set up state management (Zustand, Redux, Jotai)

Animation Creator

Create animations with Framer Motion or CSS

Dark Mode Setup

Implement dark/light mode toggle

SKILL FILEWhat Claude actually reads

Leverage [Magic by 21st.dev](https://21st.dev/magic) to build modern, responsive UI components using an AI-native workflow that prioritizes choice and design excellence.

## Context

This skill leverages Magic by 21st.dev to build modern, responsive UI components. Instead of generating a single standard solution, it focuses on providing multiple design variations to choose from, drawing inspiration from a curated library of real-world components and premium design patterns (Shadcn UI, Magic UI, Aceternity, etc.).

## When to Use
Trigger this skill whenever:

- A new UI component is requested (e.g., pricing tables, contact forms, hero sections).
- Enhancing an existing UI element with animations, better styling, or advanced features.
- Brainstorming different design directions for a specific feature.
- Professional logos or icons are needed (via the built-in [SVGL](https://svgl.app/) integration).

## Execution Workflow

1. **Analyze Requirements**: Review the component description. Ensure the target output aligns with the project's stack (e.g., Next.js, TypeScript, Tailwind CSS). Define clear constraints for accessibility and responsiveness.
2. **Generate Variations**: Interface with the Magic MCP server or use the `browser_subagent` to explore 21st.dev/magic to generate _several distinct, unconventional styles_ for the requested component.
- **Pro Tip**: Use descriptive prompts pushing for modern aesthetics: "avant-garde SaaS pricing table with glassmorphism and animated borders" or "highly immersive contact form with dynamic floating labels."
3. **Present Options**: Briefly describe the generated variations side-by-side. Highlight stylistic differences, layout approaches, and premium features (sticky headers, hover animations, etc.).
4. **Integrate Selection**: Once a favorite variation is chosen:
- Integrate the fully functional, production-ready TypeScript code.
- Ensure dependencies (`lucide-react`, `framer-motion`) are installed.
- Handle proper props, types, and responsive behaviors.

## Strict Rules

- **ABSOLUTE MANDATE**: Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX. DO NOT build in common, generic, or safe styles. Push boundaries.
- **Choice First**: Always offer multiple premium design variations before writing the final code to the project.
- **Clean Code**: Ensure all generated code is clean TypeScript, accessible, and responsive.
- **Full Ownership**: Treat all generated components as fully owned.