CtrlK
BlogDocsLog inGet started
Tessl Logo

devtools

Drop-in inspector panel for any json-render app. Use when the user wants to debug a generative UI, inspect the spec tree, edit state at runtime, see dispatched actions, follow stream patches live, browse a catalog, or pick DOM elements to find their spec keys. Triggers include "add devtools", "debug json-render", "inspect the spec", "why is this element not rendering", "see the state at runtime", or requests to tap streams / capture action logs for `@json-render/devtools`.

76

Quality

94%

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

88%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 highly actionable, well-sectioned reference for a drop-in devtools panel: executable code for all four frameworks, complete props documentation, and a clear integration recipe. The main gaps are mild redundancy between the Controls/Props/docking sections and a monolithic single-file structure with one dangling examples reference that keeps progressive disclosure short of top marks.

Suggestions

Consolidate the overlapping content between 'Controls', 'Props', and 'Reserved space & docking' (hotkey default, drawer persistence, allowDockToggle, reserveSpace are each described twice) into a single location.

Move the long 'Reserved space & docking' and 'Multiple renderers on one page' sections into one-level-deep reference files (e.g. references/docking.md, references/multi-renderer.md) to keep SKILL.md a lean overview.

Fix or remove the dangling 'See `examples/devtools`' pointer — the examples directory does not exist in the skill bundle, so either add the example or reference the recipe content directly.

DimensionReasoningScore

Conciseness

The body is largely lean and dense (props table, one code block per framework), but there is redundant material: the 'Controls' section restates prop information (hotkey default, drawer persistence) and 'Reserved space & docking' re-explains allowDockToggle and reserveSpace already covered in Props. This is minor over-explanation that could be trimmed, matching the 'efficient; minor instances of over-explanation' anchor rather than the fully lean level of 5.

4 / 5

Actionability

Install commands per framework, copy-paste drop-in usage for React/Vue/Svelte/Solid, a complete imperative API example, and a working server-side stream tap snippet are all executable. The specific examples cover the common cases, matching the 'fully executable; copy-paste ready' anchor.

5 / 5

Workflow Clarity

The adoption flow (install core + matching adapter, place the component inside the provider) is unambiguous, and the multi-renderer integration is given as a clearly sequenced 5-step recipe. No destructive or batch operations are involved, so no validation checkpoint is required — the single-action drop-in usage is fully clear.

5 / 5

Progressive Disclosure

Sections are well-organized and navigable, but everything lives inline in one ~185-line file with no actual reference files in the bundle, and the single pointer 'See `examples/devtools`' is dangling (no examples directory exists). The docking prose and multi-renderer recipe are candidates for one-level-deep reference files, which fits the 'good structure; minor organization gaps' anchor rather than the clean overview-plus-references level of 5.

4 / 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.

An exemplary description: concrete what, explicit use-when guidance, natural trigger phrases with synonyms and the package name, and a tightly scoped niche with minimal overlap risk. Third-person voice throughout, no fluff or over-claims.

DimensionReasoningScore

Specificity

The description states a concrete what ('Drop-in inspector panel for any json-render app') and enumerates specific capabilities: 'inspect the spec tree, edit state at runtime, see dispatched actions, follow stream patches live, browse a catalog, or pick DOM elements to find their spec keys'. This is multiple concrete actions with comprehensive coverage matching the skill's actual panels, so it sits firmly at the top anchor rather than the 'minor gaps' level of 4.

5 / 5

Completeness

It explicitly answers what ('Drop-in inspector panel for any json-render app... framework-agnostic core + per-framework adapters') and when ('Use when the user wants to debug a generative UI, inspect the spec tree...') with a concrete 'Triggers include' list, matching the explicit-what-and-when-with-triggers anchor.

5 / 5

Trigger Term Quality

Trigger phrases are natural user phrasings covering synonyms and variations: 'add devtools', 'debug json-render', 'inspect the spec', 'why is this element not rendering', 'see the state at runtime', plus 'tap streams / capture action logs' with the package name. Coverage is comprehensive including both plain-language and package-scoped terms.

5 / 5

Distinctiveness Conflict Risk

The description is scoped to a clear niche (json-render apps, '@json-render/devtools') with distinctive trigger phrases like 'debug json-render' and 'inspect the spec tree', so it is unlikely to fire for unrelated debugging or UI skills. It fits the 'clear niche with distinct triggers; minimal conflict risk' anchor.

5 / 5

Total

20

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
vercel-labs/json-render
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.