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.

72

Quality

90%

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

SKILL.md
Quality
Evals
Security

Quality

Content

82%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 well-structured, highly actionable skill body: a clear six-step workflow with concrete, copy-paste-ready code for server, build, initialization, and testing. The main costs are redundancy between the overlapping hybrid examples and a long monolithic body that could offload optional material to reference files.

Suggestions

Consolidate "The Hybrid Pattern" and the "Complete Hybrid Example" in Step 5 into one example — the complete version already demonstrates everything the first snippet does, saving ~40 lines.

Move "Optional Enhancements" (app-only helper tools, streaming partial input, fullscreen, text fallback) into a reference file and keep one-line pointers in SKILL.md to shrink the always-loaded body.

Add an explicit recovery loop to the Testing section, e.g. "If a Verify item fails, check the corresponding entry in Common Mistakes, fix, and re-run the basic-host check" so verification failure has a defined next step.

DimensionReasoningScore

Conciseness

The body assumes Claude's competence — no basic-concept explanations, dense tables for API files and framework templates — but the "Complete Hybrid Example" largely repeats "The Hybrid Pattern", and the "register handlers BEFORE connect()" warning is stated three times, so some tokens could be trimmed.

4 / 5

Actionability

Fully executable guidance throughout: copy-paste-ready server.ts, vite.config.ts, package.json scripts, mcp-app.html entry point, hybrid initialization code, and runnable basic-host test commands with SERVERS configuration; framework variations are covered via template tables.

5 / 5

Workflow Clarity

Steps 1–6 are clearly sequenced with useful checkpoints ("Present findings to the user and confirm the approach", mandatory CSP origin documentation before coding, a 6-item Verify checklist), but there is no explicit failure-recovery loop — what to do when a Verify item fails is only implicit in "Common Mistakes to Avoid".

4 / 5

Progressive Disclosure

With no bundle files, deep material (full API reference, framework templates, examples) is kept out of the body via clearly signaled one-level tables pointing into the cloned SDK repo. However, the ~19KB body inlines complete code examples and optional enhancements that could live in reference files.

4 / 5

Total

17

/

20

Passed

Description

95%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 strong description: third-person, explicit when-to-use triggers with multiple natural user phrasings and synonyms, paired with a clear statement of what the skill does. The only weakness is that the what-statement captures only part of the skill's scope.

DimensionReasoningScore

Specificity

The description lists several concrete actions — "analyzing existing web apps", "creating a hybrid web + MCP App", "server-side tool and resource registration" — but omits parts of the skill's actual scope (CSP investigation, build pipeline, host styling), so coverage has minor gaps rather than being comprehensive.

4 / 5

Completeness

It explicitly answers both questions: a clear "what" ("Provides guidance for analyzing existing web apps and creating a hybrid web + MCP App with server-side tool and resource registration") and a fully explicit "when" ("This skill should be used when the user asks to...") with concrete trigger phrases, in third person.

5 / 5

Trigger Term Quality

Six quoted natural user phrasings ("add MCP App support to my web app", "turn my SPA into an MCP App", "convert iframe embed to MCP App", "wrap my existing UI as an MCP App") plus synonyms across web app/web page/UI/SPA give comprehensive coverage of terms a user would actually say.

5 / 5

Distinctiveness Conflict Risk

The MCP App conversion niche is narrow and the triggers (hybrid MCP App, wrap UI as MCP App, SPA conversion) are distinct; there is no meaningful overlap risk with generic web-development skills.

5 / 5

Total

19

/

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

skill_md_line_count

SKILL.md is long (545 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.