CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

magic-ui-generator

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

Quality

71%

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

71%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.

A compact, well-structured workflow with a clear multi-step sequence and a sensible choice-first interaction model, held back by vague execution details — no concrete MCP tool call format, install commands, or post-integration validation. Trimming the duplicated Context intro and hype language would tighten it further.

Suggestions

Show the concrete invocation: an example Magic MCP tool call (or browser_subagent instruction) with parameters, so Claude knows exactly how to generate variations rather than being told to 'interface with' it.

Add a verification step after integration — e.g. run typecheck/build or start the dev server to confirm the component renders and is responsive.

Give install commands for dependencies (npm install lucide-react framer-motion) and merge the 'Context' section into the intro to remove the near-duplicate paragraph.

DimensionReasoningScore

Conciseness

The body is lean, assumes Claude's competence, and never explains concepts Claude already knows — but the 'Context' section nearly duplicates the opening line, and 'Strict Rules' carries hype padding ('ABSOLUTE MANDATE', 'Push boundaries'). Not 5: those redundancies could be trimmed; not 3: the padding is minor, not a pattern of unnecessary explanation.

4 / 5

Actionability

Some concrete guidance exists (example descriptive prompts, named dependencies 'lucide-react' and 'framer-motion', named library inspirations), but key execution details are missing: no MCP tool invocation format, no install commands, and 'Interface with the Magic MCP server or use the browser_subagent to explore 21st.dev/magic' is direction rather than instruction. Not 4: there is no copy-paste-ready command or concrete call example; not 2: specific example prompts and dependency names go beyond high-level hints.

3 / 5

Workflow Clarity

The four-step sequence (Analyze → Generate → Present → Integrate) is clearly ordered with an explicit human checkpoint (present options, wait for selection) and integration checks ('Ensure dependencies are installed', 'Handle proper props, types, and responsive behaviors'). Not 5: no explicit validation step (build/typecheck/dev-server smoke test) after integration; not 3: the sequence is well defined with most checkpoints present and the operation is non-destructive, so no cap applies.

4 / 5

Progressive Disclosure

The skill is under 50 lines, single-purpose, and has no bundle files (references/, scripts/, assets/ are absent), so per the simple-skill guideline well-organized sections alone justify a 5. Sections (Context, When to Use, Execution Workflow, Strict Rules) are clearly headed, and the two external links (21st.dev/magic, SVGL) are one level deep and appropriately placed.

5 / 5

Total

16

/

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.

A concise, third-person description with a clear 'what', but it omits any 'when to use' trigger guidance and lacks the natural keywords (React, Tailwind, shadcn, design variations) users would say when needing this skill. Adding an explicit 'Use when...' clause with stack-specific trigger terms would lift both completeness and trigger term quality.

Suggestions

Append an explicit trigger clause, e.g. 'Use when building or restyling React/Next.js UI components (pricing tables, hero sections, forms) or when the user asks for multiple design directions, animations, or premium UI variants.'

Include natural stack keywords users actually say — React, TypeScript, Tailwind, shadcn/ui, hero section, landing page — so the skill surfaces for those requests.

Consider mentioning the logo/icon capability (SVGL) briefly so those requests also match the description instead of only the body.

DimensionReasoningScore

Specificity

The description names the domain ('UI component variations') and three concrete actions — 'generate, compare, and integrate' — with a stated quality bar ('production-ready'). Not 5: coverage has gaps (animations, logos/icons, design systems are in the body but not the description); not 3: it lists several specific actions rather than only 1-2.

4 / 5

Completeness

The 'what' is clear (generate, compare, and integrate multiple UI component variations via Magic by 21st.dev), but there is no 'Use when...' clause or equivalent trigger guidance, which caps completeness at 3 per the judging guidelines. Not 4: 'when' is only weakly implied by 'production-ready UI component variations'; not 2: the 'what' half is explicit and concrete.

3 / 5

Trigger Term Quality

'UI component' is a natural phrase users would say, and the tool name 'Magic by 21st.dev' aids matching for users who know it. Not 4: common natural terms are missing — no 'React', 'Tailwind', 'shadcn', 'frontend', 'design', 'landing page', or similar variations users typically use when requesting UI work; not 2: it does contain a relevant, natural keyword rather than only generic filler.

3 / 5

Distinctiveness Conflict Risk

Naming a specific niche tool ('Magic by 21st.dev') and focusing on UI component variation generation gives it a clear identity with mostly distinct triggers. Not 5: 'UI component' is broad and overlaps with general frontend/component-library skills a user might invoke instead; not 3: the specific tool and variation-comparison workflow distinguish it from generic UI skills.

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.

Validation — 15 / 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

Path

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

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.