New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Magic UI Generator

by sickn33 in sickn33/agentic-awesome-skills

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

MITAuto-check passed

Install Magic UI Generator

skills CLI
$ npx skills add sickn33/agentic-awesome-skills --skill magic-ui-generator -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install sickn33/agentic-awesome-skills magic-ui-generator --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/magic-ui-generator .claude/skills/magic-ui-generator && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
magic-ui-generator
GitHub stars
47k
Used in
2 other repos
Token cost
~807 tokens
SKILL.md length
386 words
Files
1
Skills in repo
1,354
Repo updated
First seen
Licence
MIT

At a glance

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

  • Works in 4 steps: Analyze Requirements: Review the… → Generate Variations: Interface with the… → Present Options: Briefly describe the… → …
  • SKILL.md covers Context, When to Use, Execution Workflow and Strict Rules, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Magic UI Generator is an agent skill from sickn33/agentic-awesome-skills. Utilizes Magic by 21st.dev to generate, compare, and integrate multiple production-ready UI component variations.

Its SKILL.md is about 810 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

The repository describes itself as: AAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,400+ agentic skills. Includes… The licence is MIT.

Example prompts

  • “Use the magic-ui-generator skill to utiliz Magic by 21st.dev to generate, compare, and integrate multiple production-ready UI component variations”
  • “/magic-ui-generator”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Analyze Requirements: Review the component description. Ensure the target output aligns with the project's stack (e.g., Next.js…
  2. Generate Variations: Interface with the Magic MCP server or use the browser_subagent to explore 21st.dev/magic to generate several…
  3. Present Options: Briefly describe the generated variations side-by-side. Highlight stylistic differences, layout approaches, and premium…
  4. Integrate Selection: Once a favorite variation is chosen

What it can do on your machine

Read from SKILL.md and the folder at commit ec02547. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • 21st.dev
    • svgl.app

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Magic UI Generator loads about 807 tokens when it runs. Until then it costs about 33 tokens; SKILL.md has 386 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~33
When it runs · the whole SKILL.md, loaded when a task matches
~807

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from sickn33/agentic-awesome-skills at commit ec02547, republished under its MIT licence (© sickn33). 386 words, ~807 tokens.

Download SKILL.mdSave it as .claude/skills/magic-ui-generator/SKILL.md (or your agent's skills folder).
name
magic-ui-generator
description
Utilizes Magic by 21st.dev to generate, compare, and integrate multiple production-ready UI component variations.
risk
safe
source
community
date_added
2026-03-07

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: 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.
Show full SKILL.md (129 more words)Show less

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.

Example

User request:

Generate three production-ready pricing-table variants, compare them, and integrate the strongest option into the current UI.

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

© sickn33, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/magic-ui-generator of sickn33/agentic-awesome-skills.

Open the folder on GitHubat commit ec02547

Used in 2 other repositories

We found 11 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 2 other GitHub owners. This page covers the copy in sickn33/agentic-awesome-skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Magic UI Generator next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Magic UI Generator compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Magic UI Generator this skillsickn33/agentic-awesome-skills47k2 repos~807Automated safety check: PassMIT
Integration Test Generatorjeremylongshore/tons-of-skills-marketplace2.8k—~577Automated safety check: PassMIT
Generatealirezarezvani/claude-skills28k1 repos~1.1kAutomated safety check: PassMIT
Fal Generatenexu-io/open-design100k—~306Automated safety check: PassApache-2.0
Video Generationbytedance/deer-flow83k4 repos~1.4kAutomated safety check: PassMIT
Integration Testingthedaviddias/Front-End-Checklist74k—~514Automated safety check: PassMIT

Similar skills

  • Integration Test Generator

    jeremylongshore/tons-of-skills-marketplace

    Generate integration test generator operations. An agent skill from jeremylongshore/tons-of-skills-marketplace.

    2.8k GitHub stars~577 tokensUpdated today
    Testing & QAAuto-check passed

  • Generate

    alirezarezvani/claude-skills

    Generate Playwright tests. An agent skill from alirezarezvani/claude-skills.

    28k GitHub starsUsed in 1 repo~1.1k tokens
    Testing & QAAuto-check passed

  • Fal Generate

    nexu-io/open-design

    Generate images and videos using fal.ai AI models. An agent skill from nexu-io/open-design.

    100k GitHub stars~306 tokensUpdated today
    Media & CreativeAuto-check passed

  • Video Generation

    bytedance/deer-flow

    Generates short videos from a structured JSON prompt, optionally guided by a reference image used as the first or last frame.

    83k GitHub starsUsed in 4 repos~1.4k tokens
    Media & CreativeAuto-check passed

  • Integration Testing

    thedaviddias/Front-End-Checklist

    A skill your agent uses when reviewing CI coverage, automated checks, or test strategy related to Write integration tests for key workflows.

    74k GitHub stars~514 tokensUpdated 2 days ago
    Testing & QAAuto-check passed

  • Specialist Integration Test Generator

    HoangNguyen0403/agent-skills-standard

    Generates one integration/E2E test from an approved test case spec using existing project patterns.

    571 GitHub stars~548 tokensUpdated yesterday
    Testing & QAAuto-check passed

More from sickn33/agentic-awesome-skills

All 1,354 skills in this repo

  • Liuguang Banlan UI

    sickn33/agentic-awesome-skills

    Implements an interface in one of two named color modes, iridescent white or colorful black, from a parameterized starter that reports measured color intensity.

    47k GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed

  • User Thoughts Memory

    sickn33/agentic-awesome-skills

    Saves a user's project decisions, rules and preferences into a project-local mdbase so later sessions and other agents can recover the intent.

    47k GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed

  • Using LWC Memory and Graphs

    sickn33/agentic-awesome-skills

    Keeps project decisions, research and verified results available across coding-agent sessions through LWC memory, a document Wiki graph and a CodeGraph code index.

    47k GitHub starsUsed in 1 repo~2k tokens
    Auto-check passed

  • Find Complementary Founders

    sickn33/agentic-awesome-skills

    Guides an agent through assessing its own owner for cofounder fit, publishing an approved profile, and ranking complementary profiles other agents published for their owners.

    47k GitHub starsUsed in 1 repo~4.8k tokens
    Auto-check passed

  • Cline Pilot

    sickn33/agentic-awesome-skills

    Acts as a proxy for the Cline CLI, dispatching coding tasks one at a time, monitoring runs by hard evidence, relaying decisions to you and learning per-project preferences.

    47k GitHub starsUsed in 1 repo~4.6k tokens
    Auto-check passed

  • Content Creator

    sickn33/agentic-awesome-skills

    Drafts and reviews audience-specific content from supplied brand examples, with local scripts for brand voice and SEO diagnostics, channel templates and a content calendar.

    47k GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed

Questions about Magic UI Generator

What does Magic UI Generator do?

Utilizes Magic by 21st.dev to generate, compare, and integrate multiple production-ready UI component variations. Magic UI Generator is an agent skill from sickn33/agentic-awesome-skills.dev to generate, compare, and integrate multiple production-ready UI component variations.

How do I install Magic UI Generator in Claude Code?

Run `npx skills add sickn33/agentic-awesome-skills --skill magic-ui-generator -a claude-code`. Or copy the skill folder (skills/magic-ui-generator in sickn33/agentic-awesome-skills) into .claude/skills/magic-ui-generator in your project. Claude Code loads it when a task matches its description.

How do I install Magic UI Generator in Codex?

Run `npx skills add sickn33/agentic-awesome-skills --skill magic-ui-generator -a codex`. Or copy the skill folder (skills/magic-ui-generator in sickn33/agentic-awesome-skills) into .agents/skills/magic-ui-generator in your project. Codex loads it when a task matches its description.

Can I use Magic UI Generator in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sickn33/agentic-awesome-skills --skill magic-ui-generator -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/magic-ui-generator, .gemini/skills/magic-ui-generator, .github/skills/magic-ui-generator and .opencode/skills/magic-ui-generator in your project.

What does Magic UI Generator need to run?

SKILL.md names no scripts, command-line tools or credentials: Magic UI Generator is instructions for the agent only.

Does Magic UI Generator access the network?

SKILL.md names 2 domains. As links in the text: 21st.dev and svgl.app. This is read from the text; nothing was executed.

Is Magic UI Generator safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Magic UI Generator use?

Magic UI Generator is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Magic UI Generator use?

About 807 tokens (SKILL.md is roughly 3.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Magic UI Generator?

Skills that share tags, products or a category with Magic UI Generator: Integration Test Generator (jeremylongshore/tons-of-skills-marketplace, 2.8k stars), Generate (alirezarezvani/claude-skills, 28k stars), Fal Generate (nexu-io/open-design, 100k stars) and Video Generation (bytedance/deer-flow, 83k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Magic UI Generator?

sickn33 (a GitHub user) maintains it in sickn33/agentic-awesome-skills, which has 47,343 GitHub stars. The repository holds 1,354 skills in this directory. The repository was last updated on October 7, 2026.

Source: sickn33/agentic-awesome-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.