CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

generate-mcp-app-ui

Generate a single-file MCP App widget for an MCP tool, with either bundled runtime code or user-approved public CDN imports. Describe the visual and provide a plain structured payload or a full tool result with content, structuredContent, and meta.

Quality

75%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/mcp-apps/skills/generate-mcp-app-ui/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

85%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 a strong, highly actionable skill document: complete executable templates, precise commands, an explicit validation step, and a checklist of output rules. Its weak spot is progressive disclosure — a large inline template that duplicates the pattern used for the self-contained sample, and referenced files that do not resolve within the bundle.

Suggestions

Move the full CDN-mode HTML template into a samples file (e.g. samples/cdn-widget.template.html) and keep only the marker, import lines, and mode-specific rules inline, mirroring how the self-contained template is handled.

Make reference paths consistent and bundle-relative (currently a mix of "../../references/", "samples/", and "${PLUGIN_ROOT}/scripts/") so every referenced file resolves from the skill's location.

Deduplicate the result-channel normalization rules (stated in "What you need from the user" and again in step 3) and the CDN-policy statements, keeping one authoritative statement and a pointer.

DimensionReasoningScore

Conciseness

The body is directive throughout with no explanations of concepts Claude already knows, and high-value gotchas like the named-export comment. It loses a point to repetition: result-channel normalization appears both in "What you need from the user" and again at step 3, and the CDN policy is stated three times across sections.

4 / 5

Actionability

Fully executable guidance: a complete copy-paste CDN HTML template, exact inliner commands ("node \"${PLUGIN_ROOT}/scripts/inline-self-contained-runtime.js\" --input ..."), the exact runtime marker to preserve, and explicit normalization rules for the three result shapes. Stubs like renderData are clearly-marked integration points rather than missing detail.

5 / 5

Workflow Clarity

The 9-step generation sequence includes an explicit validation checkpoint (the inliner "fails if the draft still contains external runtime/resource URLs"), a separate refinement flow with --prepare for editing self-contained widgets, and an Output-rules checklist — matching the anchor for clear sequence, explicit validation, and error-recovery loops.

5 / 5

Progressive Disclosure

References are clearly signaled and one level deep, but the ~100-line CDN template is inlined in SKILL.md when it belongs in a samples file (the self-contained mode does exactly this), and none of the referenced files (mcp-apps-reference.md, design-guidelines.md, self-contained-widget.template.html, the inliner script) exist in this bundle, with inconsistent path styles ("../../references/", "samples/", "${PLUGIN_ROOT}/scripts/").

3 / 5

Total

17

/

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 concrete about what the skill generates and the input shapes it accepts, with a well-defined MCP Apps niche. Its main weakness is the complete absence of trigger guidance — no "Use when..." clause or natural synonyms that would help a user (or Claude) select it over related visualization skills.

Suggestions

Add an explicit trigger clause, e.g. "Use when the user asks for a widget, visual, or card displaying an MCP tool's output inside a chat conversation."

Include natural trigger synonyms in the description ("widget for a tool", "tool visualization", "html widget") so it matches how users actually phrase the request.

Briefly mention the refinement capability ("then refine it on request") so the "what" coverage is comprehensive.

DimensionReasoningScore

Specificity

Lists several concrete actions — "Generate a single-file MCP App widget for an MCP tool", "bundled runtime code or user-approved public CDN imports", and handling of "a plain structured payload or a full tool result with content, structuredContent, and meta" — with only minor gaps (refinement and output steps are unmentioned).

4 / 5

Completeness

The "what" is clear (generate a single-file widget with two delivery modes and defined input shapes), but there is no "Use when..." clause or equivalent trigger guidance, which caps completeness at 3 per the rubric guidelines.

3 / 5

Trigger Term Quality

"MCP App widget", "MCP tool", and "CDN" are domain-relevant terms, but common natural variations users would say ("widget for a tool", "visualize tool output", "html widget", "tool visualization") are missing from the description.

3 / 5

Distinctiveness Conflict Risk

"MCP App widget for an MCP tool" carves a distinct niche with minimal conflict risk, though "generate... widget" mildly overlaps with generic HTML/visualization skills, keeping it below a 5.

4 / 5

Total

14

/

20

Passed

Validation

81%

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

Validation — 13 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

allowed_tools_field

'allowed-tools' contains unusual tool name(s)

Warning

frontmatter_unknown_keys

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

Warning

relative_links

Relative link issues: 6 suspicious

Warning

Total

13

/

16

Passed

Repository

microsoft/power-platform-skills

Path

plugins/mcp-apps/skills/generate-mcp-app-ui/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.