magic-ui-generator

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

Quality

41%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./skills/magic-ui-generator/SKILL.md

Quality

Content

38%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The skill provides a reasonable high-level framework for using Magic by 21st.dev but falls short on actionability—there are no concrete code examples, tool invocation patterns, or executable commands. It is also noticeably verbose, repeating context and including motivational language ('Push boundaries', 'ABSOLUTE MANDATE') that doesn't help Claude execute the task. The workflow is logically sequenced but lacks validation steps for code integration.

Suggestions

Add concrete, executable examples of how to invoke the Magic MCP server or browser_subagent, including actual tool call syntax or API patterns.

Remove the redundant 'Context' section and trim motivational language ('ABSOLUTE MANDATE', 'Push boundaries') to reduce verbosity—replace with specific, actionable constraints.

Add a validation step after integration (e.g., 'Run `npx tsc --noEmit` to verify TypeScript compiles without errors') to strengthen the workflow.

Include a concrete example of a generated component variation presentation (e.g., a brief side-by-side comparison format) so Claude knows exactly how to present options.

Dimension	Reasoning	Score
Conciseness	The skill contains significant unnecessary verbosity. The 'Context' section largely repeats the opening sentence. Phrases like 'ABSOLUTE MANDATE' and 'Agents MUST utilize this skill to build modern, creative, and visually stunning UI/UX' are padded rhetoric rather than actionable guidance. Explanations of what Magic by 21st.dev is and listing component libraries Claude already knows about add little value.	2 / 5
Actionability	The skill provides only high-level, vague direction with no concrete code, commands, or executable examples. Steps like 'Interface with the Magic MCP server or use the browser_subagent' lack specifics on how to actually invoke these tools. There are no code snippets, API calls, or concrete integration examples—just abstract descriptions of what to do.	2 / 5
Workflow Clarity	A four-step sequence is present and logically ordered (Analyze → Generate → Present → Integrate), but there are no validation checkpoints. There's no guidance on what to do if generation fails, if the code doesn't compile, or if dependencies conflict. The dependency installation step ('Ensure dependencies are installed') lacks a concrete verification command.	3 / 5
Progressive Disclosure	The content is reasonably well-structured with clear sections (When to Use, Execution Workflow, Strict Rules). At under 50 lines with no bundle files, the structure is appropriate for the scope. External links to 21st.dev and SVGL are provided. Minor improvement could come from separating the 'Pro Tip' prompts into a reference file if the skill grew.	4 / 5
	Total	11 / 20 Passed

Description

45%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description identifies a specific tool (Magic by 21st.dev) and lists some actions (generate, compare, integrate), giving it reasonable distinctiveness. However, it lacks a 'Use when...' clause, misses natural trigger terms users would say, and doesn't elaborate on supported frameworks, file types, or output formats.

Suggestions

Add a 'Use when...' clause with trigger phrases like 'Use when the user asks to generate UI components, create component variations, or mentions Magic, 21st.dev, or production-ready frontend components.'

Include natural trigger terms and synonyms users would say, such as specific frameworks (React, Vue), file types (.tsx, .jsx), or related concepts (shadcn, Tailwind, design system, frontend components).

Expand the 'what' with more specific actions, e.g., 'Generates multiple styled variations of React/Vue components, provides side-by-side comparison, and integrates selected components into the codebase.'

Dimension	Reasoning	Score
Specificity	Names the domain (UI component generation via Magic by 21st.dev) and lists a few concrete actions (generate, compare, integrate), but lacks detail on what 'variations' means or what formats/frameworks are supported.	3 / 5
Completeness	Provides a reasonable 'what' (generate, compare, integrate UI component variations) but completely lacks a 'when' clause or any trigger guidance for when Claude should select this skill. Per rubric guidelines, missing 'Use when...' caps completeness at 3, and the weak 'what' brings it to 2.	2 / 5
Trigger Term Quality	Includes some relevant keywords like 'UI component', 'Magic', '21st.dev', and 'production-ready', but misses natural user phrases like 'design components', 'React components', 'frontend', 'shadcn', or specific framework names users would mention.	3 / 5
Distinctiveness Conflict Risk	The mention of 'Magic by 21st.dev' is a specific tool reference that makes this fairly distinct from generic UI or component skills. Minor overlap risk with general UI generation or component library skills.	4 / 5
	Total	12 / 20 Passed

Validation

90%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 10 / 11 Passed

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	10 / 11 Passed

Repository: administrakt0r/AI-Agents-Safe-Coding-Skills
Path: skills/magic-ui-generator/SKILL.md
Commit: 57c135b

Reviewed: 4 days ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.