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

88%

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 thorough, highly actionable conversion guide with concrete code at every step and good externalization of API detail. It is held back from a perfect score by light redundancy across the hybrid examples and missing explicit error-recovery loops for the silent-failure CSP cases.

Suggestions

Add an explicit CSP failure-recovery loop in Step 2 or Testing (e.g., 'if a resource fails to load in the iframe, re-scan the build output for unlisted origins, add them to connectDomains/resourceDomains, rebuild, and re-verify') to turn silent failures into a validate→fix→retry cycle.

Consolidate the URL-params, API-calls, and localStorage hybrid snippets into the single 'Complete Hybrid Example' (or move the per-source before/after pairs into a reference table) to remove redundancy and tighten the body.

Consider shortening the 33-line Table of Contents to top-level sections only, since the nested anchors add length without proportional navigational value in a single-file skill.

DimensionReasoningScore

Conciseness

Mostly lean, code- and table-driven, and it assumes Claude's competence (no explanations of what Vite/CSP/iframes are), but the ~33-line TOC and the overlap between the per-source hybrid snippets and the 'Complete Hybrid Example' are minor trim opportunities.

4 / 5

Actionability

Fully executable, copy-paste-ready guidance throughout: the git clone one-liner, npm install commands, complete server.ts, vite.config.ts, mcp-app.html, and the hybrid initialization code all cover the common cases concretely.

5 / 5

Workflow Clarity

Steps 1–6 are clearly sequenced with 'Before writing any code' gating in Steps 1–2 and a 6-item Verify checklist, but explicit validate→fix→retry feedback loops are weak (CSP failures 'fail silently' with no stated recovery loop).

4 / 5

Progressive Disclosure

A clear TOC and well-signaled one-level-deep external references (API reference, framework templates, and example tables pointing into the cloned repo's src/examples) keep the API bulk out of SKILL.md; the single ~560-line file with no bundle split leaves minor consolidation room.

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, specific description with comprehensive natural trigger phrases and an explicit what/when structure. The only soft spot is 'analyzing existing web apps' being slightly abstract relative to the other concrete actions.

DimensionReasoningScore

Specificity

Names the domain plus several concrete actions — 'analyzing existing web apps', 'creating a hybrid web + MCP App', 'server-side tool and resource registration' — but 'analyzing' is somewhat abstract, stopping just short of the fully comprehensive 5 anchor.

4 / 5

Completeness

Explicitly answers 'what' ('Provides guidance for analyzing existing web apps and creating a hybrid web + MCP App with server-side tool and resource registration') and 'when' (multiple concrete 'Use when' trigger phrases).

5 / 5

Trigger Term Quality

Six verbatim natural trigger phrases ('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') cover synonyms and phrasings a user would actually say.

5 / 5

Distinctiveness Conflict Risk

Occupies a clear 'MCP App' niche with highly specific triggers ('hybrid MCP App', 'convert iframe embed to MCP App') that are unlikely to fire for unrelated 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.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

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

Warning

Total

15

/

16

Passed

Repository
seanGSISG/claude-depot
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.