mesh-gradient-dark-blue-clean

Create a futuristic, premium, clean dark-blue mesh-gradient design system across background rendering, hero shell, navigation, floating nodes, framed sections, CTAs, and motion. Use when the interface needs a near-black navy foundation, procedural blue mesh atmosphere, disciplined minimal structure, and infrastructural or planetary depth.

Quality

82%

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

90%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 a lean, highly executable design-system recipe: complete CSS/JS/HTML artifacts, an explicit build sequence, tuning knobs, an avoid list, and a quick-check verification list, with essentially no wasted tokens. The only headroom is mid-workflow checkpoints and potentially moving the canvas fallback implementation into a bundle script.

Dimension	Reasoning	Score
Conciseness	The body is code-dense with almost zero padding: prose sections ("Direction", "System Recipe", "Motion Defaults", "Tuning Knobs", "Avoid", "Quick Checks") are terse, opinionated bullets that encode design judgment Claude does not already have, and no section explains concepts Claude knows. Every token earns its place.	5 / 5
Actionability	Fully executable and copy-paste ready: complete CSS custom-property token block, border-gradient hero shell CSS plus HTML structure, a complete JS canvas mesh function with DPR clamping, reduced-motion handling, resize handling, and a cleanup return, plus full nav/node/rail/CTA CSS. The HTML sketch's ellipses are acceptable placeholders in a design-system recipe.	5 / 5
Workflow Clarity	"System Recipe" provides a clear 9-step build sequence (foundation → hero shell → mesh field → typography → navigation → nodes → structure → CTAs → motion) and "Quick Checks" gives an end-state verification checklist. It falls short of 5 because there are no mid-build checkpoints or feedback loops; this is acceptable since the skill involves no destructive or batch operations.	4 / 5
Progressive Disclosure	A single well-organized file with clearly headed sections and no buried or nested references (no bundle files exist to score against, and none are referenced from the body). The ~70-line canvas fallback function is the one candidate that could live in a scripts/ file, which keeps it at 4 rather than 5, but for a self-contained design system the single-file split is defensible.	4 / 5
	Total	18 / 20 Passed

Description

75%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 answers both what and when explicitly, uses third person, and covers a well-enumerated set of system components with recognizable trigger terms. It sits solidly at the 4 level across all dimensions: concrete and distinct, but padded with mood adjectives and an abstract when-clause that lack the crisp, user-voiced triggers of the top anchor.

Suggestions

Lead with the concrete actions (e.g., "Render a procedural blue mesh-gradient field, build a hero shell with border-gradient, style navigation pills, floating nodes, framed sections, and CTA capsules") before the aesthetic adjectives.

Make the when-clause more user-voiced and concrete: "Use when the user asks for a futuristic, dark-blue or navy mesh-gradient landing page, premium dark-mode interface, or planetary/infrastructure aesthetic".

Add the natural synonyms users would say — "landing page", "dark mode", "WebGL background", "glassmorphism" — to trigger terms.

Dimension	Reasoning	Score
Specificity	"Create a futuristic, premium, clean dark-blue mesh-gradient design system across background rendering, hero shell, navigation, floating nodes, framed sections, CTAs, and motion" enumerates a comprehensive list of concrete coverage areas, but the action verbs are limited to a single "Create" and "futuristic, premium" reads as soft buzzword padding, keeping it below the 5 anchor's multiple concrete actions.	4 / 5
Completeness	Both halves are explicitly present: what ("Create a ... design system across background rendering, hero shell, ...") and when ("Use when the interface needs a near-black navy foundation..."). The when-clause leans on abstract mood descriptors ("infrastructural or planetary depth") rather than concrete user-utterance triggers, so it does not reach the 5 anchor.	4 / 5
Trigger Term Quality	Natural phrases like "mesh gradient", "dark blue", "design system", "hero", "navigation", "CTAs", and "near-black navy foundation" are terms a user requesting this aesthetic would plausibly say, but common variations like "landing page", "dark mode", "WebGL background", or "glassmorphism" are missing, so coverage is good rather than comprehensive.	4 / 5
Distinctiveness Conflict Risk	"dark-blue mesh-gradient design system" carves out a clear niche with distinctive tokens (near-black navy, hero shell, mesh field) that are unlikely to fire for unrelated skills, though generic premium-design adjectives ("futuristic, premium, clean") create minor overlap risk with other visual design-system skills.	4 / 5
	Total	16 / 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/mesh-gradient-dark-blue-clean/SKILL.md
Commit: 798db0a

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.