webgl-experience

A full-screen, real-time WebGL/WebGL2 experience — animated shaders, 3D scenes, generative visuals, particle fields — rendered live on the GPU with a typographic overlay. Produced as a single self-contained `index.html`. Use when the brief asks for a "WebGL", "shader", "3D", "generative", "GPU", "interactive canvas", "hero animation", or "real-time visual" experience. Open Design serves this in powered-preview mode so the GPU stack actually runs.

Quality

86%

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

78%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 well-structured, concise workflow body with concrete technical standards and a validation checklist. Its main weakness is the missing example.html reference promised in the Resource map, which undermines progressive disclosure and reduces inline actionability.

Suggestions

Ship the referenced example.html alongside SKILL.md (or remove the 'READ FIRST' / Resource map reference) so the one-level-deep pointer actually resolves.

Add a short inline fragment-shader or canvas bootstrap snippet so the build step is executable without the missing reference file.

Add an explicit error-recovery loop to the Step 4 checklist (e.g., 'if a checklist item fails, fix and re-run before delivering') to lift workflow clarity to the top anchor.

Dimension	Reasoning	Score
Conciseness	The body is lean, assumes Claude's competence (no 'what is WebGL' padding), and every section earns its place; the 'powered preview' explanation conveys non-obvious platform behavior rather than basic concepts.	5 / 5
Actionability	Concrete, specific guidance is present (four named techniques, 'alpha:false', DPR clamped to 2, getShaderInfoLog error logging, lime #63fe13, headline ≤ 14ch), but no inline executable code is provided — it defers to the reference file, leaving minor gaps.	4 / 5
Workflow Clarity	A clear Step 0→Step 4 sequence is present with an explicit P0 self-review checklist, but there is no 'if check fails, fix and re-validate' error-recovery loop, which keeps it just below the top anchor.	4 / 5
Progressive Disclosure	The Resource map signals a one-level-deep 'example.html (READ FIRST)' reference, but that file is absent from the actual bundle (only SKILL.md ships, with no references/scripts/assets directories), so the signaled reference does not resolve.	3 / 5
	Total	16 / 20 Passed

Description

95%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 with comprehensive natural trigger terms and a clear what/when structure. Slightly feature-list oriented rather than action-list oriented, but highly distinct and low conflict risk.

Dimension	Reasoning	Score
Specificity	Lists several concrete capabilities — 'animated shaders, 3D scenes, generative visuals, particle fields', 'rendered live on the GPU', 'typographic overlay', 'single self-contained index.html' — but reads more as a feature inventory than discrete operations, leaving minor coverage gaps versus a fully enumerated action list.	4 / 5
Completeness	It explicitly answers both 'what' (a full-screen real-time WebGL/WebGL2 experience with typographic overlay, produced as a single self-contained index.html) and 'when' (concrete 'Use when the brief asks for...' trigger phrases).	5 / 5
Trigger Term Quality	The 'Use when the brief asks for a "WebGL", "shader", "3D", "generative", "GPU", "interactive canvas", "hero animation", or "real-time visual" experience' clause gives comprehensive natural-language terms and synonyms a user would actually say.	5 / 5
Distinctiveness Conflict Risk	The GPU/WebGL real-time-visual niche is clearly delimited by distinctive triggers, making overlap with unrelated skills minimal.	5 / 5
	Total	19 / 20 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	15 / 16 Passed

Repository: nexu-io/open-design
Path: design-templates/webgl-experience/SKILL.md
Commit: 1a7a23d

Reviewed: about 7 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.