web-technique-to-skill

Turn a visual or interaction technique you already built into a reusable web-design skill, by isolating the one mechanism that makes it work while reproducing its approved reference exactly around that focus, and packaging it with a demo that proves both the mechanism and the visual fidelity. Covers finding the mechanism, naming the technique plainly, disclosing the verified runtime and renderer, auditing reference layers, carrying real numbers instead of adjectives, preserving owned staging, keeping expensive gotchas, declaring the boundary against neighbouring skills, and browser-verifying before claiming it works. Use when a page, canvas scene, shader, scroll effect, layout system, or hover interaction turned out well and should become a skill rather than staying in one project.

Quality

85%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

81%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 high-quality instruction skill body: concrete, failure-anchored rules, a sequenced browser-verification workflow with feedback loops, and clear structure. The main weakness is length — some demo-direction and quality-floor content could be externalized or tightened to improve token efficiency and progressive disclosure.

Suggestions

Move the full 'Quality floor' bullet list and the 'Direct the demo' expansion into a referenced file (e.g. DEMO-STANDARDS.md), keeping only the headline rule in SKILL.md to reduce tokens and deepen progressive disclosure.

Tighten the worked Canvas-2D example block, which duplicates guidance already given as rules, to a single illustrative snippet.

Consider a short 'When NOT to use this' line near the top to sharpen the boundary already implied by the article-prompts-to-skills reference.

Dimension	Reasoning	Score
Conciseness	Mostly lean and assumes Claude's competence — rules are stated as imperatives with named failures rather than padded explanations — but a few sections (e.g. the 'Direct the demo' bullet list and repeated worked example) could be trimmed without losing meaning.	4 / 5
Actionability	Gives concrete, executable guidance throughout — real value ranges (`0.3–0.5`, `dt` clamp to 1/30s, DPR cap at 2), specific browser-verification steps at 1440x900 and 390x844, a real worked example — but it is an instruction skill so code is illustrative rather than copy-paste, leaving minor gaps.	4 / 5
Workflow Clarity	Clear sequenced workflow with explicit validation checkpoints and feedback loops: the 'Verify in a browser, then report' numbered list runs forward/backward/fast-skip/reload checks and says 'Expect this pass to find something... fix the demo and re-run', and the closing checklist enforces it — matching the destructive/batch feedback-loop requirement.	5 / 5
Progressive Disclosure	Well-organized with clear section headers and a one-level reference to sibling skills (`article-prompts-to-skills`) and a concrete packaging layout; no bundle files are present so there are no separate-file references to signal, but the body is long and could move some detail (e.g. full quality-floor list) to a reference.	4 / 5
	Total	17 / 20 Passed

Description

88%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, specific description that answers both what and when with concrete trigger phrases and a clear scope. Minor room to tighten the natural-language triggers and reduce the long sub-action list, but it scores high across all dimensions.

Suggestions

Shorten the mid-sentence 'Covers ...' enumeration so the 'Use when ...' trigger clause lands sooner and reads more like something a user would actually say.

Add common synonyms users might say (e.g. 'animation', 'micro-interaction', 'web effect') to broaden natural trigger coverage.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — 'isolating the one mechanism', 'naming the technique plainly', 'disclosing the verified runtime and renderer', 'auditing reference layers', 'carrying real numbers instead of adjectives', 'preserving owned staging', 'keeping expensive gotchas', 'declaring the boundary', and 'browser-verifying' — comprehensive coverage of what the skill does.	5 / 5
Completeness	Clearly answers both what (turn a built technique into a reusable web-design skill, with the listed sub-actions) and when ('Use when a page, canvas scene, shader, scroll effect, layout system, or hover interaction turned out well and should become a skill rather than staying in one project').	5 / 5
Trigger Term Quality	Natural terms are present ('page', 'canvas scene', 'shader', 'scroll effect', 'layout system', 'hover interaction', 'skill'), but the phrasing 'turned out well and should become a skill' is somewhat formal rather than the natural thing a user would say; minor variations missing.	4 / 5
Distinctiveness Conflict Risk	Scoped to web-design techniques built from working code, and it explicitly distinguishes itself from 'article-prompts-to-skills' in the body; mostly distinct with only minor overlap risk against neighbouring design skills.	4 / 5
	Total	18 / 20 Passed

Validation

100%

Warnings & errors only

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/web-technique-to-skill/SKILL.md
Commit: 321c769

Reviewed: 11 hours ago

Table of Contents

Discovery Implementation Validation

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.