[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-d87a170c-a367-4cde-962f-e1555aca837f":3,"$f6jDh4O9ObB-BLcfTvljDU3twEgG_FBeweiZH2Xk2Elw":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"d87a170c-a367-4cde-962f-e1555aca837f","magic-ui-generator","利用21st.dev的Magic生成、比较和集成多个生产就绪的UI组件变体。","cat_life_career","mod_other","sickn33,other","--- \nname: magic-ui-generator\ndescription: Utilizes Magic by 21st.dev to generate, compare, and integrate multiple production-ready UI component variations.\nrisk: safe\nsource: community\ndate_added: \"2026-03-07\"\n---\n\n# Magic UI Generator\n\nLeverage [Magic by 21st.dev](https:\u002F\u002F21st.dev\u002Fmagic) to build modern, responsive UI components using an AI-native workflow that prioritizes choice and design excellence.\n\n## Context\n\nThis 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.).\n\n## When to Use\nTrigger this skill whenever:\n\n- A new UI component is requested (e.g., pricing tables, contact forms, hero sections).\n- Enhancing an existing UI element with animations, better styling, or advanced features.\n- Brainstorming different design directions for a specific feature.\n- Professional logos or icons are needed (via the built-in [SVGL](https:\u002F\u002Fsvgl.app\u002F) integration).\n\n## Execution Workflow\n\n1. **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.\n2. **Generate Variations**: Interface with the Magic MCP server or use the `browser_subagent` to explore 21st.dev\u002Fmagic to generate _several distinct, unconventional styles_ for the requested component.\n   - **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.\"\n3. **Present Options**: Briefly describe the generated variations side-by-side. Highlight stylistic differences, layout approaches, and premium features (sticky headers, hover animations, etc.).\n4. **Integrate Selection**: Once a favorite variation is chosen:\n   - Integrate the fully functional, production-ready TypeScript code.\n   - Ensure dependencies (`lucide-react`, `framer-motion`) are installed.\n   - Handle proper props, types, and responsive behaviors.\n\n## Strict Rules\n\n- **ABSOLUTE MANDATE**: Agents MUST utilize this skill to build modern, creative, and visually stunning UI\u002FUX. DO NOT build in common, generic, or safe styles. Push boundaries.\n- **Choice First**: Always offer multiple premium design variations before writing the final code to the project.\n- **Clean Code**: Ensure all generated code is clean TypeScript, accessible, and responsive.\n- **Full Ownership**: Treat all generated components as fully owned.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,147,1830,"2026-05-16 13:27:28",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"其他","other","mdi-page-next-outline","其他类型Skill",5,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"职场发展","career","mdi-briefcase-outline","面试准备、简历优化、职业规划",4,575,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"0e56b206-af16-4b3e-9479-59e3112724ae","1.0.0","magic-ui-generator.zip",1647,"uploads\u002Fskills\u002Fd87a170c-a367-4cde-962f-e1555aca837f\u002Fmagic-ui-generator.zip","43cb1e315f18e5debd9e413fb356e2ba36b212b3e726ea78d06a887d5cee3b7f","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":3066}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]