CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

editable-html

Let the user edit the copy of an HTML page or web app in the browser while an agent applies each change to the source in real time. Use when the user asks to "make the html editable", "let me edit the text", "live edit", "edit copy in the browser", "watch my edits", or wants to tweak wording on a page, visual, slide or app UI without hunting through the source.

Quality

96%

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

100%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 an excellent example of skill content: lean and free of padding, fully executable commands and API contracts, clearly sequenced workflows with genuine feedback loops and error-recovery guidance, and implementation correctly pushed into two real, well-signaled bundle files. No dimension shows more than a trivial gap.

DimensionReasoningScore

Conciseness

The body is lean with no explanations of concepts Claude already knows: the one explanatory paragraph ("Why a queue and not a direct save") is skill-specific design rationale, the ASCII diagram is compact, and every section (mode table, static steps, app contract, gotchas) carries only operational information — matching anchor 5's 'every token earns its place'.

5 / 5

Actionability

Guidance is copy-paste ready: the exact server command (`python3 scratch/live-edit/live_edit_server.py path/to/page.html 8772 scratch/live-edit`), the exact watch command (`tail -n 0 -F`), a precise API contract (GET/POST `/api/dev/live-edit` with JSON shapes and a 404-unless-dev guard), a concrete Next.js route path, and per-context escaping rules — matching anchor 5's fully executable, common-cases-covered bar.

5 / 5

Workflow Clarity

Both static setup and edit application are clearly numbered, with explicit feedback loops (applied.jsonl driving the badge, result values applied/not found/skipped) and error recovery ("Try those forms before giving up" for whitespace, entities, and escape mismatches; "Fix all of them, or a rebuild reverts the edit") — matching anchor 5. The queued-edit workflow includes validation, so the missing-validation cap at 3 does not apply.

5 / 5

Progressive Disclosure

Verified against the actual bundle: `references/live-edit.js` and `references/live_edit_server.py` both exist, are referenced inline at the point of use (copy step, server command), and are listed in a dedicated References section with one-line role descriptions — one-level-deep, clearly signaled references over a concise overview, matching anchor 5.

5 / 5

Total

20

/

20

Passed

Description

91%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: it states a concrete, mechanism-specific capability and pairs it with an explicit 'Use when' clause containing multiple natural, quoted trigger phrases. Its only weaknesses are mild — the capability list is a single workflow rather than multiple actions, and a couple of trigger phrases are generic enough to overlap with adjacent editing skills.

DimensionReasoningScore

Specificity

Concrete actions are named ("edit the copy of an HTML page or web app in the browser", "an agent applies each change to the source in real time", "tweak wording on a page, visual, slide or app UI") with a clear mechanism, but it describes one workflow from two sides rather than the multiple distinct actions of the anchor-5 example; it is well above anchor 3's '1-2 concrete actions'.

4 / 5

Completeness

The 'what' is explicit (browser copy editing with agent-side source application in real time) and the 'when' is an explicit "Use when the user asks to..." clause with concrete trigger phrases, exactly matching anchor 5; anchor 4's weaker 'when could be more specific' does not apply.

5 / 5

Trigger Term Quality

Five quoted natural phrases users would actually say ("make the html editable", "let me edit the text", "live edit", "edit copy in the browser", "watch my edits") plus synonym paraphrases like "tweak wording" give comprehensive coverage including variations, matching the anchor-5 example's synonym-plus-variation coverage.

5 / 5

Distinctiveness Conflict Risk

The niche is clear (live browser copy-edit synced to source by an agent) with distinct triggers like "live edit" and "watch my edits", but generic phrases such as "let me edit the text" and "tweak wording on a page, visual, slide" leave minor overlap risk with general copy-editing or presentation skills, matching anchor 4 rather than anchor 5's minimal conflict risk.

4 / 5

Total

18

/

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

dwmkerr/claude-toolkit

Path

plugins/toolkit/skills/editable-html/SKILL.md

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.