CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

html-to-interaction-prompts

Convert a supplied HTML page or generated HTML reference into a screenshot-backed article containing multiple reusable interaction prompts. Use when the user provides an HTML file, exported page, generated-page.html, or local/live reference and asks to extract animation/interactions, create prompts, capture screenshots for each prompt, add them to an article, or commit the resulting article/assets.

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

70%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-sequenced workflow with strong validation and recovery guidance, undermined by significant duplication between the capture contract, the workflow, and the verify step, and by a monolithic single-file structure with no reference split. Condensing the repeated rules and moving the library catalog and daily-capture contract to reference files would raise both conciseness and progressive disclosure.

Suggestions

State the full-page/section-crop rules (contiguity, structure headings, no cover-image fallback) exactly once — in the workflow capture step — and have the verify step reference them as a checklist instead of restating them, cutting roughly a third of the body.

Move the Library Guidance catalog and the Daily UI Inspiration Capture Contract into separate reference files (e.g. references/library-guidance.md, references/daily-capture-contract.md) linked from a short overview, so SKILL.md stays a lean workflow overview.

Add concrete capture examples or commands for the browser/screenshot and manifest steps (e.g. a sample manifest.json snippet with fullPageImage and sectionImages entries) to close the actionability gap.

DimensionReasoningScore

Conciseness

The body is task-specific and avoids explaining concepts Claude already knows, but the daily-capture rules are stated three times — the 'Daily UI Inspiration Capture Contract' (contiguous pixel-complete crops, full-page/section structure, cover-image prohibition) reappear nearly verbatim in workflow step 4 and again in the verify step. Anchor 3 fits: mostly efficient but could be tightened by consolidating the duplicated crop/evidence rules into one place.

3 / 5

Actionability

Guidance is concrete and executable for an instruction-only skill: specific grep terms ('mousemove', 'ScrollTrigger', 'parallax'), exact commands ('git diff --check', 'ffprobe'), a 2-second settle delay, explicit folder naming ('articles/YYYY-MM-DD-ui-inspiration-capture/'), and a full prompt anatomy template. Not 5 because the actual browser capture steps and manifest creation lack any commands or examples, leaving minor gaps.

4 / 5

Workflow Clarity

Eight clearly sequenced steps (inspect → decide → write → capture → video → article → verify → commit) with an explicit, checklist-style verification step ('verify exactly 5 inspirations, 5 embedded videos..., use ffprobe to confirm MP4 files are readable') and error-recovery feedback ('If live capture is blocked, prefer replacing the candidate...', 'If verification is blocked, report what was checked locally'). This matches the anchor-5 pattern of clear sequence, explicit validation, and feedback loops.

5 / 5

Progressive Disclosure

Sections are well-organized (Goal, Contract, Workflow, Prompt Style Rules, Library Guidance) but the skill is ~130 lines with zero reference files: the Library Guidance catalog and the lengthy Daily UI contract are content that clearly belongs in separate reference files and is inlined instead. This matches anchor 3 — some structure, but content that should be separate is inline; not 4 because there are no well-signaled references at all, and the skill exceeds the under-50-line exception.

3 / 5

Total

15

/

20

Passed

Description

96%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: concrete third-person actions, an explicit 'Use when' clause with natural trigger phrases and synonyms, and a clearly scoped niche. The only weakness is mild overlap risk with general screenshot/article tooling terms.

DimensionReasoningScore

Specificity

The description lists multiple concrete, third-person actions — 'Convert a supplied HTML page... into a screenshot-backed article', 'extract animation/interactions, create prompts, capture screenshots for each prompt, add them to an article, or commit the resulting article/assets' — covering the full workflow comprehensively. It is not below 4 because coverage has no meaningful gaps; it is not vague at any point.

5 / 5

Completeness

Both 'what' (convert HTML into a screenshot-backed article of reusable interaction prompts) and 'when' (an explicit 'Use when the user provides... and asks to...' clause with concrete triggers) are clearly and explicitly stated. It matches the anchor-5 example structure exactly; score 4 would apply only if the 'when' were less explicit.

5 / 5

Trigger Term Quality

Natural user phrases are comprehensively covered with synonyms and a concrete filename: 'HTML file, exported page, generated-page.html, or local/live reference' plus verbs users would actually say ('extract animation/interactions', 'create prompts', 'capture screenshots', 'commit'). Anchor 4 would require missing natural terms, but none are evident.

5 / 5

Distinctiveness Conflict Risk

The HTML-to-interaction-prompt niche with specific triggers like 'generated-page.html' is mostly distinct, but 'capture screenshots for each prompt' and 'add them to an article' carry minor overlap risk with generic screenshot or article-writing skills. Not 5 due to that residual overlap; clearly above 3 because the core trigger combination is unique.

4 / 5

Total

19

/

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

MengTo/Skills

Path

agent-skills/codex/html-to-interaction-prompts/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.