CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

image-to-editable-html

Turn an image of a poster, flyer, menu, banner or UI screenshot into a single editable HTML file — every text line becomes real editable text, every object (a product with everything on and around it, an illustration, a logo, an icon) is cut from the background as one movable piece, and the page has a built-in editor (drag, resize, edit text, layers panel, export). Use when the user sends an image and asks to make it editable, split it into layers/components, "convert to HTML", or "拆图层 / 转成可编辑的网页".

78

Quality

98%

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.

A dense, fully operational skill body: every step is executable with exact commands, validation is built in (editability counts, SSIM threshold, visual preview comparison) with explicit error-recovery loops, and all implementation detail is correctly deferred to the scripts bundle behind a clean CLI. No padding, no concept explanations, no time-sensitive churn.

DimensionReasoningScore

Conciseness

The body is lean and assumes Claude's competence: it never explains what OCR, matting, or HTML are, and every section carries operational specifics the model could not infer (timings, the FAL_ACCOUNT_ERROR policy, tested font mappings, delivery templates). It matches anchor 5 ('every token earns its place'); anchor 4 would require identifiable over-explanation that could be trimmed, and the closest candidates (the font defaults list, the Chinese reply templates) encode tested defaults and required output formats rather than generic knowledge.

5 / 5

Actionability

Guidance is fully executable and copy-paste ready: exact commands like `bash {baseDir}/scripts/run.sh run "<Working Directory>/<image file>" --extras "<names from step 2>" --title "<short title>"`, concrete `--extras` examples for two common cases (menu/poster and chat UI), a complete follow-up command table with argument syntax, and the exact delivery reply format. It matches anchor 5 ('copy-paste ready… specific examples cover the common cases'); the only loosely specified argument (`--title "<short title>"`) is self-evident from context and does not constitute a gap.

5 / 5

Workflow Clarity

The 7-step sequence is explicit with genuine validation checkpoints: compare `objects_preview` against the image, proof-read every `texts` entry with enumerated fix patterns, and check `check.editability` ("All should be 0") and `static_ssim` (~0.7 threshold) with prescribed actions when they fail. Feedback loops are present throughout — re-run with the graphic in `--extras` when it isn't tinted, the FAL_ACCOUNT_ERROR handling with an explicit "don't retry", `undo` for follow-up edits, and "Skip the rebuild if nothing needed fixing". This matches anchor 5 ('explicit validation steps; feedback loops for error recovery'); the operation is generative rather than destructive, so the validation cap does not apply.

5 / 5

Progressive Disclosure

The split is exactly right: the ~150 KB of implementation (build_scene.py, scene.py, pipeline.py, etc.) lives in scripts/ and is exposed only through run.sh's three-subcommand interface (run / rebuild / scene), verified to exist on disk, while the body stays at workflow level. References are one level deep, clearly signaled via the command blocks, and navigation is trivial — matching anchor 5 ('content appropriately split; easy navigation'); anchor 4's 'minor organization gaps' has no instance here.

5 / 5

Total

20

/

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 and comprehensive about capabilities, with an explicit 'Use when…' clause containing natural trigger phrases in both English and Chinese. It uses third-person imperative voice and contains no vague or padded language.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions — "every text line becomes real editable text", each object "is cut from the background as one movable piece", and "a built-in editor (drag, resize, edit text, layers panel, export)" — with comprehensive coverage of the skill's capability surface. It matches the anchor 'Lists multiple specific concrete actions; comprehensive coverage' exactly; score 4 would require minor gaps in coverage, and none are present.

5 / 5

Completeness

It explicitly answers both questions: the 'what' is detailed (text lines become editable text, objects become movable pieces, built-in editor with named features) and the 'when' is an explicit "Use when the user sends an image and asks to make it editable, split it into layers/components…" clause with concrete trigger phrases. This matches the anchor 5 example structure precisely; score 4 would require the 'when' to be less explicit, which it is not.

5 / 5

Trigger Term Quality

Triggers include natural user phrasings with synonyms in two languages — "make it editable", "split it into layers/components", "convert to HTML", "拆图层 / 转成可编辑的网页" — plus the domain nouns users would name (poster, flyer, menu, banner, UI screenshot). This is comprehensive natural-term coverage; the only anchor above does not exist and anchor 4 ('a few natural terms missing') does not apply since the common variations are all present.

5 / 5

Distinctiveness Conflict Risk

The niche is distinct — decomposing an attached image into editable text and movable objects in a single HTML file — and triggers are gated on that exact scenario ("the user sends an image and asks to make it editable"), minimizing conflict with generic HTML-generation or image-editing skills. The 'convert to HTML' phrase alone could overlap with a page-building skill, but combined with the image-attachment requirement the risk is minimal, matching anchor 5 rather than anchor 4's 'minor overlap risk'.

5 / 5

Total

20

/

20

Passed

Validation

81%

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

Validation — 13 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

metadata_field

'metadata' should map string keys to string values

Warning

relative_links

Relative link issues: 3 missing, 1 deeper-than-1-level

Warning

Total

13

/

16

Passed

Repository

fastclaw-ai/fastclaw

Path

skills/image-to-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.