magic-ui-generator

# Magic UI Generator 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 glass...