CtrlK
BlogDocsLog inGet started
Tessl Logo

od-web-effect-extractor

Extract visual effects, animation systems, Canvas/WebGL/Shader behavior, and interaction details from a reference website, then rebuild them as an editable Open Design web artifact.

61

Quality

72%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./plugins/_official/scenarios/od-web-effect-extractor/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

75%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 well-structured, actionable, and concise with a clear multi-step workflow and an explicit parity-verification checkpoint, falling just short of top marks only because it lacks copy-paste code and a formal validate→fix→retry loop.

Suggestions

Add a short validate→fix→retry loop after the Verify Visual Parity step (e.g. 'If the canvas is blank or rendering diverges, return to step 3 and correct the visual model before re-verifying') to reach the workflow_clarity 5 anchor.

Include one minimal copy-paste-ready snippet (e.g. a Three.js full-screen shader skeleton or a WAAPI motion template) to lift actionability to 5.

Trim a few restating sentences like 'Prefer evidence over guesses' that restate prior guidance to nudge conciseness toward 5.

DimensionReasoningScore

Conciseness

The body is largely efficient and assumes Claude's competence (e.g. lists exactly what to intercept like 'gl.shaderSource()' without explaining what WebGL is), with only minor trimmable phrasing such as 'Prefer evidence over guesses. If an effect cannot be observed directly, mark it as an inference.' that slightly over-explains.

4 / 5

Actionability

Provides concrete, specific guidance throughout—named interception points ('gl.uniform*()', 'gl.bindFramebuffer()'), a decision matrix for which implementation to choose (DOM/CSS vs GSAP vs Three.js), and a defined deliverable; it stops short of copy-paste-ready code, which keeps it at 4 rather than 5.

4 / 5

Workflow Clarity

A clear six-step sequence (Prepare → Runtime Inspection → Extract → Rebuild → Verify → Deliver) with an explicit verification checkpoint ('Verify Visual Parity') and fallback handling, but it lacks a strict validate→fix→retry feedback loop for the rebuild, leaving minor checkpoint gaps versus the 5 anchor.

4 / 5

Progressive Disclosure

Well-organized with clear section headers and a focused overview; there are no bundle files, so content is appropriately self-contained in one level, with the only optional offload being the EXTRACTION-REPORT.md output—minor organization gaps versus the 5 anchor.

4 / 5

Total

16

/

20

Passed

Description

70%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.

The description is specific and distinctive with concrete named actions, but it lacks an explicit 'Use when...' trigger clause inside the frontmatter, which caps completeness at 3 and slightly limits trigger-term coverage.

Suggestions

Add an explicit 'Use when the user provides a website URL and asks to recreate or learn from its visual effects, WebGL/Canvas animations, or shader behavior.' clause to the description so both 'what' and 'when' live in the frontmatter.

Include a few more natural user phrasings and synonyms (e.g. 'hero animations', 'cursor trails', 'scroll effects') to broaden trigger-term coverage.

Reframe the opening as a third-person capability statement (e.g. 'Extracts ... and rebuilds them') rather than the bare imperative 'Extract' to match the expected voice.

DimensionReasoningScore

Specificity

Names the domain (visual effects/WebGL/Canvas/shaders) and multiple concrete actions—'Extract', animation systems, Canvas/WebGL/Shader behavior, interaction details, and 'rebuild them as an editable Open Design web artifact'—giving comprehensive, specific coverage rather than generic language.

5 / 5

Completeness

It clearly answers 'what' (extract effects and rebuild as an editable artifact) but the 'when' is only weakly implied within the description itself; the explicit 'Use when...' trigger lives in the body, not the frontmatter, so per the guidelines completeness caps at 3.

3 / 5

Trigger Term Quality

Strong natural terms ('visual effects', 'animation systems', 'shader effects', 'Canvas', 'WebGL') that a user would plausibly say, but it omits common synonyms/extensions and the explicit 'website URL' framing is a setup cue rather than a broad keyword set, leaving a few natural phrasings absent.

4 / 5

Distinctiveness Conflict Risk

The niche is very specific—extracting visual effects/shaders/Canvas behavior from a reference website to rebuild in Open Design—so it has distinct triggers and minimal overlap with general web or design skills.

5 / 5

Total

17

/

20

Passed

Validation

93%

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

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
nexu-io/open-design
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.