background-grid-webgl

Create a perspective WebGL background grid with fading lines, subtle particle haze, slow forward drift, and gentle camera parallax.

Quality

65%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./agent-skills/web-design/background-grid-webgl/SKILL.md

Quality

Content

65%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 content is well-structured, concise, and clearly scoped with useful tuning knobs and avoid-list, but it provides no executable code or concrete starting values and leaves the Workflow section empty, limiting actionability and workflow clarity. It works well as design guidance but would be stronger with at least a minimal code scaffold and a real workflow.

Suggestions

Fill the empty 'Workflow' section with a short ordered sequence (e.g. set up scene/camera -> build fading grid -> add particles -> wire parallax -> tune) to give an explicit procedure.

Add a small executable Three.js starter snippet (camera setup, GridHelper or custom plane with distance-based opacity, additive particle field) so the guidance is copy-paste ready.

Provide concrete starting values for the tuning knobs (e.g. default division count, fade falloff exponent, drift speed) rather than only naming the dimensions to tune.

Dimension	Reasoning	Score
Conciseness	The body is lean and directive with no padding explaining what WebGL or Three.js is, though 'Visual target' and 'Implementation guidance' overlap slightly and could be tightened, keeping it just below the fully-lean anchor 5.	4 / 5
Actionability	Guidance is concrete at a design level ('perspective camera positioned above the plane', 'large plane helper or custom grid with line opacity fading by distance', 'sparse additive particle field'), but there is no executable code or concrete starting parameter values, leaving key details missing.	3 / 5
Workflow Clarity	The 'Workflow' section is an empty header and there is no sequenced set of steps; the remaining sections describe features rather than an ordered procedure, so checkpoints and sequence are only implicit.	3 / 5
Progressive Disclosure	The body is under 50 lines, needs no external references, and is organized into clearly labeled sections (Use When, Scope, Visual target, Implementation guidance, Tuning knobs, Avoid), matching the simple-skill exception for a 5.	5 / 5
	Total	15 / 20 Passed

Description

66%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 visually concrete, naming four distinct effect attributes, but it omits any explicit 'Use when' trigger guidance, which caps its completeness and slightly weakens distinctiveness. It is a strong, niche-scoped description that would benefit from an explicit trigger clause.

Suggestions

Append an explicit 'Use when...' clause (e.g. 'Use when a design needs a perspective tech-grid background receding into space with subtle motion and depth.') to lift completeness above 3.

Add a couple of natural synonyms users might say ('3D grid background', 'parallax grid') to broaden trigger-term coverage.

Consider splitting the single 'Create' verb into two named actions (e.g. 'Build a perspective WebGL grid... Add particle haze and parallax...') to push specificity toward the comprehensive anchor.

Dimension	Reasoning	Score
Specificity	The single verb 'Create' is followed by four concrete visual elements ('fading lines, subtle particle haze, slow forward drift, and gentle camera parallax'), giving several specific outcomes, though it is one action rather than a list of distinct actions so it falls short of the comprehensive multi-action anchor 5.	4 / 5
Completeness	The 'what' is clear ('Create a perspective WebGL background grid...'), but there is no explicit 'Use when...' trigger clause, which per the rubric caps completeness at 3.	3 / 5
Trigger Term Quality	Phrases like 'perspective WebGL background grid', 'fading lines', 'particle haze', and 'camera parallax' are natural terms a user would say for this effect, but a few common synonyms (e.g. '3D grid', 'parallax background') are missing.	4 / 5
Distinctiveness Conflict Risk	The description carves a fairly distinct niche (perspective WebGL grid with specific motion/parallax traits) with minor overlap risk against other background/particle visual skills, but the absence of a 'Use when' trigger phrase keeps it just below the clearest-anchor 5.	4 / 5
	Total	15 / 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/web-design/background-grid-webgl/SKILL.md
Commit: 4c716b5

Reviewed: 5 days 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.