CtrlK
BlogDocsLog inGet started
Tessl Logo

convert-web-app

This skill should be used when the user asks to "add MCP App support to my web app", "turn my web app into a hybrid MCP App", "make my web page work as an MCP App too", "wrap my existing UI as an MCP App", "convert iframe embed to MCP App", "turn my SPA into an MCP App", or needs to add MCP App support to an existing web application while keeping it working standalone. Provides guidance for analyzing existing web apps and creating a hybrid web + MCP App with server-side tool and resource registration.

70

Quality

86%

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

SKILL.md
Quality
Evals
Security

Quality

Content

72%Weight 40%Scale 1-3

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

The body is highly actionable and well-structured with good progressive disclosure, but it is somewhat redundant in its hybrid-pattern examples and lacks an explicit build validation feedback loop. Tightening the repeated hybrid examples and adding a verify/retry checkpoint for the bundling step would raise conciseness and workflow clarity.

Suggestions

Consolidate the repeated hybrid initialization examples: keep one canonical complete example and have the per-data-source (URL/API/localStorage) sections show only the differing snippet rather than re-deriving isMcpApp and App setup each time.

Add an explicit validate-then-retry checkpoint after the Vite single-file build (e.g., verify dist/mcp-app.html is self-contained / no external asset references) before compiling the server.

Dedupe the runtime-detection methods, which are listed in both the Step 5 comment block and the detection-method comment, into a single reference.

DimensionReasoningScore

Conciseness

Largely efficient and free of known-concept padding, but the hybrid pattern recurs across 'The Hybrid Pattern', per-data-source 'Hybrid' sub-blocks, and a 'Complete Hybrid Example' that re-demonstrates isMcpApp, ontoolinput, onhostcontextchanged, and the styling helpers, which could be tightened.

2 / 3

Actionability

Executable npm/git/vite commands, a full server.ts, vite.config.ts, mcp-app.html, and copy-paste-ready hybrid TypeScript examples plus concrete testing commands provide fully concrete guidance.

3 / 3

Workflow Clarity

Six well-sequenced steps with a Testing/verify section are present, but the fragile single-file bundling build lacks an explicit validate-then-retry feedback loop, and checkpoints like 'Present findings and confirm' are soft rather than gating.

2 / 3

Progressive Disclosure

SKILL.md serves as an overview with well-organized, one-level-deep tables pointing to API source files, framework templates, and reference examples in the cloned repo, with clear navigation and no deep nesting.

3 / 3

Total

10

/

12

Passed

Description

100%Weight 40%Scale 1-3

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, trigger-rich, and fully answers both what and when with explicit natural-language triggers. It is a strong, low-conflict description.

DimensionReasoningScore

Specificity

Names concrete actions like 'analyzing existing web apps', 'creating a hybrid web + MCP App', and 'server-side tool and resource registration' alongside several conversion verbs, matching the multiple-specific-actions anchor.

3 / 3

Completeness

Explicitly states what ('Provides guidance for analyzing... creating a hybrid web + MCP App with server-side tool and resource registration') and when ('This skill should be used when the user asks to...') with explicit triggers.

3 / 3

Trigger Term Quality

Six quoted natural phrasings a user would say ('add MCP App support to my web app', 'turn my SPA into an MCP App', 'convert iframe embed to MCP App') give good coverage of natural variations.

3 / 3

Distinctiveness Conflict Risk

The hybrid MCP-App-support niche is specific with distinctive triggers, making it unlikely to fire for unrelated skills.

3 / 3

Total

12

/

12

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

skill_md_line_count

SKILL.md is long (526 lines); consider splitting into references/ and linking

Warning

Total

15

/

16

Passed

Repository
modelcontextprotocol/ext-apps
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.