CtrlK
BlogDocsLog inGet started
Tessl Logo

magic-ui-generator

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

54

Quality

61%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/magic-ui-generator/SKILL.md

The canonical home for this skill is magic-ui-generator in administrakt0r/AI-Agents-Safe-Coding-Skills

SKILL.md
Quality
Evals
Security

Quality

Content

65%Weight 40%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 body is well-structured and concise with good progressive disclosure for a short skill, but its workflow lacks validation checkpoints and its guidance stays at a high level without executable specifics for driving the Magic MCP server. Tightening the workflow with verification steps and concrete MCP tool usage would lift the two capped dimensions.

Suggestions

Add an explicit verification step after generation (e.g. confirm each variation compiles, is responsive, and meets the accessibility constraints defined in step 1) and a re-validate loop after integration.

Replace the abstract 'Interface with the Magic MCP server' with the specific MCP tool name(s) to call and an example request, so the guidance is executable rather than directional.

Collapse the 'Strict Rules' section into the workflow steps to remove redundancy with the Execution Workflow and tighten conciseness toward a 5.

DimensionReasoningScore

Conciseness

The body is lean with no over-explanation of concepts Claude already knows; the only trimmable redundancy is the intro echoing the Context section and the slightly preachy 'Strict Rules' restating the workflow, fitting the 'efficient; minor instances of over-explanation' anchor.

4 / 5

Actionability

It names concrete tools (Magic MCP server, `browser_subagent`) and gives example prompts and dependencies, but 'Interface with the Magic MCP server' is abstract with no specific MCP tool names or executable code, matching the 'some concrete guidance but incomplete' anchor.

3 / 5

Workflow Clarity

The four-step sequence is clearly ordered, but there are no validation/verification checkpoints and generating multiple variations is a batch operation, so workflow clarity is capped at 3 per the rubric's batch-operation rule.

3 / 5

Progressive Disclosure

The skill is under 50 lines with no need for external references and is organized into clear sections (Context, When to Use, Execution Workflow, Strict Rules), which scores 5 under the simple-skill exception.

5 / 5

Total

15

/

20

Passed

Description

58%Weight 40%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 is specific and clearly distinguishable, but it omits any explicit trigger guidance, so it answers 'what' well while leaving 'when' entirely unaddressed. Adding a 'Use when...' clause with natural trigger phrases would materially raise both completeness and trigger-term quality.

Suggestions

Append a 'Use when...' clause naming natural triggers, e.g. 'Use when building or redesigning UI components like pricing tables, contact forms, hero sections, or when the user wants multiple design variations to choose from.'

Add common synonyms users say ('design', 'build', 'frontend component', 'landing page section') to broaden trigger-term coverage.

Optionally mention the SVGL logo/icon capability in the description to distinguish it from generic UI-generation skills.

DimensionReasoningScore

Specificity

The description lists several concrete actions ('generate, compare, and integrate') on a named domain (UI component variations), matching the 'several specific actions; minor gaps' anchor; it stops short of comprehensive coverage needed for a 5.

4 / 5

Completeness

It clearly answers 'what' (generate/compare/integrate UI component variations) but provides no 'when' guidance — there is no 'Use when...' clause, which caps completeness at 3 per the rubric guideline.

3 / 5

Trigger Term Quality

It includes relevant keywords ('UI component', 'variations') but misses natural phrases users actually say ('build a UI', 'design a button') and offers no synonyms, fitting the 'some relevant keywords but missing common variations' anchor.

3 / 5

Distinctiveness Conflict Risk

The tool-specific niche (Magic by 21st.dev for UI component variations) is mostly distinct with only minor overlap risk against generic frontend/design skills, matching the 'mostly distinct; minor overlap risk' anchor.

4 / 5

Total

14

/

20

Passed

Validation

93%

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

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
administrakt0r/AI-Agents-Safe-Coding-Skills
Reviewed

Table of Contents

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.