CtrlK
BlogDocsLog inGet started
Tessl Logo

implementing-mcp-ui-apps

Guide for adding MCP UI apps — interactive visualizations that render tool results in MCP clients like Claude Desktop. Use when adding a new detail or list view for an MCP tool, creating view components in products/*/mcp/apps/, or linking tools to UI apps via YAML.

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

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 content is highly actionable and well-structured, with executable examples for every app type and clear external references. Its only soft spots are a few verbose passages and the absence of an explicit validation feedback loop in the main codegen workflow.

Suggestions

Add an explicit validation checkpoint in the quick workflow, e.g. after generate:ui-apps, 'review the generated diff, then run build' to form a validate-before-commit feedback loop.

Tighten the list-view code example by trimming the styling/labeling boilerplate to reduce tokens while keeping the ListDetailView usage pattern.

Consider moving the long field-definition tables for each app type into a referenced reference file to shorten the SKILL.md body.

DimensionReasoningScore

Conciseness

The body is dense and assumes Claude's competence with React/TS/Mosaic, with every section earning its place; minor introductory prose and the lengthy list-view example could be trimmed slightly.

4 / 5

Actionability

Provides fully executable, copy-paste-ready TSX/YAML/TS examples for each app type, specific pnpm commands, and field tables with defaults covering the common cases.

5 / 5

Workflow Clarity

The numbered quick workflow plus CI validation step gives a clear sequence, and the generator enforces schema/reference validation; the main flow lacks an explicit 'regenerate, verify diff, commit' feedback checkpoint for the codegen step.

4 / 5

Progressive Disclosure

No bundle files exist; the body is well-organized into focused sections and points one level deep to clearly signaled external references (CONTRIBUTING.md, yaml-config-schema.ts).

5 / 5

Total

18

/

20

Passed

Description

87%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: it answers both what the skill does and when to use it, with concrete triggers and a distinct niche. It is slightly below top marks on specificity and trigger-term breadth because the action list and synonyms are somewhat narrow.

DimensionReasoningScore

Specificity

Lists several concrete actions ('adding a new detail or list view', 'creating view components in products/*/mcp/apps/', 'linking tools to UI apps via YAML') with a specific path, but the actions cluster around variants of adding UI apps rather than a broad menu.

4 / 5

Completeness

Clearly states the 'what' ('interactive visualizations that render tool results in MCP clients') and gives an explicit 'when' ('Use when adding a new detail or list view...') with concrete trigger phrases.

5 / 5

Trigger Term Quality

Includes natural developer phrases like 'detail or list view for an MCP tool', 'creating view components', 'linking tools to UI apps via YAML', and 'Claude Desktop', but is missing some common synonyms or alternate phrasings users might say.

4 / 5

Distinctiveness Conflict Risk

Targets a clear niche (MCP UI apps) with triggers tied to specific paths (products/*/mcp/apps/) and YAML config, making overlap with unrelated skills unlikely.

5 / 5

Total

18

/

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

relative_links

Relative link issues: 2 suspicious

Warning

Total

15

/

16

Passed

Repository
PostHog/posthog
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.