{"id":"e3b9054c-3a25-484f-b4db-bf5767466801","shortId":"vzET7v","kind":"skill","title":"magic-ui-generator","tagline":"Utilizes Magic by 21st.dev to generate, compare, and integrate multiple production-ready UI component variations.","description":"# Magic UI Generator\n\nLeverage [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.\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://svgl.app/) 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/magic 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/UX. 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.","tags":["magic","generator","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-magic-ui-generator","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/magic-ui-generator","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34726 github stars · SKILL.md body (2,849 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-23T12:51:12.074Z","embedding":null,"createdAt":"2026-04-18T21:40:18.974Z","updatedAt":"2026-04-23T12:51:12.074Z","lastSeenAt":"2026-04-23T12:51:12.074Z","tsv":"'/)':154 '/magic':205 '/magic)':30 '1':158 '2':187 '21st.dev':8,27,29,55,204 '21st.dev/magic':203 '21st.dev/magic)':28 '3':245 '4':270 'absolut':307 'access':184,358 'acetern':98 'advanc':130 'aesthet':224 'agent':309 'ai':40 'ai-nat':39 'align':169 'alway':335 'analyz':159 'anim':126,234,268 'approach':261 'ask':403 'avant':226 'avant-gard':225 'behavior':304 'better':127 'border':235 'boundari':332,411 'brainstorm':132 'briefli':248 'browser':199 'build':32,57,315,324 'built':149 'built-in':148 'choic':45,333 'choos':77 'chosen':278 'clarif':405 'clean':349,356 'clear':181,378 'code':287,345,350,354 'common':326 'compar':11 'compon':19,36,61,89,110,163,215,366 'constraint':182 'contact':116,239 'context':49 'creativ':317 'criteria':414 'css':179 'curat':83 'defin':180 'depend':289 'describ':249,382 'descript':164,219 'design':47,74,92,134,339 'differ':133,259 'direct':135 'distinct':209 'draw':79 'dynam':242 'e.g':113,175 'element':124 'enhanc':120 'ensur':165,288,351 'environ':394 'environment-specif':393 'etc':99,269 'excel':48 'execut':156 'exist':122 'expert':399 'explor':202 'favorit':275 'featur':131,139,264 'final':344 'first':334 'float':243 'focus':70 'form':117,240 'framer':294 'framer-mot':293 'full':361 'fulli':281,368 'function':282 'gard':227 'generat':4,10,23,64,188,207,251,353,365 'generic':327 'glassmorph':232 'handl':298 'header':266 'hero':118 'high':237 'highlight':257 'hover':267 'icon':143 'immers':238 'input':408 'inspir':80 'instal':297 'instead':62 'integr':13,155,271,279 'interfac':190 'label':244 'layout':260 'leverag':24,52 'librari':84 'limit':370 'logo':141 'lucid':291 'lucide-react':290 'magic':2,6,21,25,53,96,193 'magic-ui-gener':1 'mandat':308 'match':379 'mcp':194 'miss':416 'modern':33,58,223,316 'motion':295 'multipl':14,73,337 'must':310 'nativ':41 'need':145 'new':108 'next.js':176 'offer':336 'option':247 'output':168,388 'own':369 'ownership':362 'pattern':93 'permiss':409 'premium':91,263,338 'present':246 'price':114,229 'priorit':44 'pro':216 'product':16,284 'production-readi':15,283 'profession':140 'project':172,348 'prompt':220 'prop':300 'proper':299 'provid':72 'push':221,331 'react':292 'readi':17,285 'real':87 'real-world':86 'request':112,214 'requir':160,407 'respons':34,59,186,303,360 'review':161,400 'rule':306 'saa':228 'safe':329 'safeti':410 'scope':381 'section':119 'select':272 'server':195 'sever':208 'shadcn':94 'side':254,256 'side-by-sid':253 'singl':66 'skill':51,105,313,373 'skill-magic-ui-generator' 'solut':68 'source-sickn33' 'specif':138,395 'stack':174 'standard':67 'sticki':265 'stop':401 'strict':305 'stun':320 'style':128,211,330 'stylist':258 'subag':200 'substitut':391 'success':413 'svgl':151 'svgl.app':153 'svgl.app/)':152 'tabl':115,230 'tailwind':178 'target':167 'task':377 'test':397 'tip':217 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'treat':363,386 'trigger':103 'type':301 'typescript':177,286,357 'ui':3,18,22,35,60,95,97,109,123 'ui/ux':321 'unconvent':210 'use':37,102,197,218,371 'util':5,311 'valid':396 'variat':20,75,189,252,276,340 'via':146 'visual':319 'whenev':106 'workflow':42,157 'world':88 'write':342","prices":[{"id":"f761bf44-9c33-4dda-aa71-5ab278754f7e","listingId":"e3b9054c-3a25-484f-b4db-bf5767466801","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:40:18.974Z"}],"sources":[{"listingId":"e3b9054c-3a25-484f-b4db-bf5767466801","source":"github","sourceId":"sickn33/antigravity-awesome-skills/magic-ui-generator","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/magic-ui-generator","isPrimary":false,"firstSeenAt":"2026-04-18T21:40:18.974Z","lastSeenAt":"2026-04-23T12:51:12.074Z"}],"details":{"listingId":"e3b9054c-3a25-484f-b4db-bf5767466801","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"magic-ui-generator","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34726,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-23T06:41:03Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"106a3c9f2b500923f5d1a7fbf60f106432d79120","skill_md_path":"skills/magic-ui-generator/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/magic-ui-generator"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"magic-ui-generator","description":"Utilizes Magic by 21st.dev to generate, compare, and integrate multiple production-ready UI component variations."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/magic-ui-generator"},"updatedAt":"2026-04-23T12:51:12.074Z"}}