CtrlK
BlogDocsLog inGet started
Tessl Logo

build-mcp-app

This skill should be used when the user wants to build an "MCP app", add "interactive UI" or "widgets" to an MCP server, "render components in chat", build "MCP UI resources", make a tool that shows a "form", "picker", "dashboard" or "confirmation dialog" inline in the conversation, or mentions "apps SDK" in the context of MCP. Use AFTER the build-mcp-server skill has settled the deployment model, or when the user already knows they want UI widgets.

74

Quality

93%

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

86%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 high quality: executable scaffolds, well-sequenced workflows with validation checkpoints, and clean progressive disclosure into six real reference files. The only weak spot is mild verbosity in a few explanatory sections.

Suggestions

Tighten the Architecture section's ASCII diagram and the additive-UI lead-in — the deployment shapes can be conveyed in a sentence each since the code already shows the mechanism.

Add a short explicit 'verify the widget renders (non-blank iframe, no CSP violation in iframe devtools)' checkpoint to the main scaffold-then-test flow so the validate→fix→retry loop is as explicit as the testing section's loops.

Consider moving the Widget runtime App-class method table (a long API surface) to references/apps-sdk-messages.md and keeping only the 3-4 most-used methods inline, further trimming the in-body token budget.

DimensionReasoningScore

Conciseness

Mostly lean and assumes Claude's competence (code, constraints, concrete gotchas like the esm.sh CSP warning), with only minor padding in the ASCII diagram and a few explanatory lead-ins; not 5 because a few sentences could be trimmed, not 3 because it avoids explaining basics Claude already knows.

4 / 5

Actionability

Fully copy-paste-ready executable guidance — the complete src/server.ts scaffold, picker.html widget, npm install line, JSON-RPC test loop, and dev shim — covering the common cases with specific values; matches the fully-executable anchor.

5 / 5

Workflow Clarity

Multi-step processes are clearly sequenced with real checkpoints ("Set handlers BEFORE connecting", fully-quit-and-relaunch for cache, CSP-debug feedback loop); not 5 because the main build path lacks a single explicit validate→fix→retry checklist, not 3 because checkpoints are present and explicit rather than implicit.

4 / 5

Progressive Disclosure

Body is a clear overview with bulk detail split into six well-signaled one-level-deep reference files (iframe-sandbox, widget-templates, apps-sdk-messages, payload-budgeting, abuse-protection, directory-checklist — all verified to exist) summarized in a final Reference files section; matches the clear-overview-one-level-deep anchor.

5 / 5

Total

18

/

20

Passed

Description

100%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 strong: third-person voice, comprehensive concrete actions, natural trigger terms with synonyms, and explicit what/when guidance including sequencing relative to a sibling skill. No changes needed.

DimensionReasoningScore

Specificity

Lists many concrete actions and objects — build an "MCP app", add "interactive UI"/"widgets", "render components in chat", build "MCP UI resources", show a "form"/"picker"/"dashboard"/"confirmation dialog" — matching the comprehensive-coverage anchor; not 4 because coverage is broad and varied rather than having minor gaps.

5 / 5

Completeness

Explicitly states both what (build MCP apps / add interactive UI widgets) and when ("This skill should be used when the user wants to…", "Use AFTER the build-mcp-server skill has settled the deployment model…") with concrete trigger phrases, hitting the top anchor; not 4 because the 'when' is explicit and specific rather than improvable.

5 / 5

Trigger Term Quality

Packs in natural quoted phrases a user would actually say ("MCP app", "interactive UI", "widgets", "form", "picker", "apps SDK") plus synonyms, matching the comprehensive-synonym-coverage anchor; not 4 since nearly all common variations are present.

5 / 5

Distinctiveness Conflict Risk

Occupies a clear niche (the apps UI surface) and explicitly distinguishes itself from the base build-mcp-server skill ("Use AFTER the build-mcp-server skill…"), with specific triggers that minimize overlap; matches the clear-niche-minimal-conflict anchor.

5 / 5

Total

20

/

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
anthropics/claude-plugins-official
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.