Agent skill · design visual · sickn33
magic-ui-generator
Utilizes Magic by 21st.dev to generate, compare, and integrate multiple production-ready UI component variations.
Why this skill is useful
Generates multiple unique UI component designs with specific integration patterns that the AI wouldn't reliably create on its own.
What it needs
Requires framer-motion, lucide-react installed locally. About 2k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
Magic UI Generator Leverage Magic by 21st.dev 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 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: Use an available authorized Magic integration or browser tool 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. Use existing reviewed dependencies where possible; add a package only when required and compatible, after inspecting its license/version. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/magic-ui-generator--0dc05c