CtrlK
BlogDocsLog inGet started
Tessl Logo

bright-green-tech-system-webgl

Create a bright-green technical design system with structured split layouts, hard-framed dark surfaces, mono utility labels, and a prominent WebGL visualization zone.

48

Quality

50%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./agent-skills/web-design/bright-green-tech-system-webgl/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

47%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 communicates a coherent, well-scoped aesthetic direction with useful positive and negative guidance, but it is weakened by an empty Workflow heading, repeated constraints across sections, and a lack of concrete tokens (colors, fonts, spacing) that would make the direction directly executable. It reads as guidance rather than instruction, and would benefit from deduplication and either a real workflow or removal of the empty heading.

Suggestions

Delete the empty "## Workflow" heading or replace it with an actual ordered process (e.g. pick palette tokens → build shell → split layout → integrate WebGL viewport → tune motion).

Consolidate the green-usage and motion constraints, each stated 2-3 times across Scope, Visual target, Implementation guidance, and Tuning knobs, into a single source of truth.

Add concrete tokens to make guidance executable: a hex accent value, a font pairing for the sans/mono split, and a minimal Three.js snippet for the visualization zone.

DimensionReasoningScore

Conciseness

The body avoids explaining concepts Claude already knows and stays directive, but it is noticeably redundant: the green-usage limit appears three times (Scope's "not flooding every surface", Visual target's "rather than flooding every surface", Tuning knobs' "balance it against dark neutrals"), motion discipline is repeated in Implementation guidance and Tuning knobs, and the "Use When" section restates the frontmatter description verbatim. This matches "mostly efficient but could be tightened" rather than 4, whose over-explanation is only minor.

3 / 5

Actionability

Concrete qualitative guidance exists — "corner brackets", "progress rails", "real canvas or Three.js rendering", "additive glow, subtle fog" — but nothing is executable: no hex accent values, font pairings, spacing tokens, or code, so the guidance stops short of "mostly executable" (4) while being far more specific than vague high-level hints (2).

3 / 5

Workflow Clarity

The "## Workflow" heading is completely empty, and the rest of the body is organized thematically (Scope, Visual target, patterns, knobs) with no sequence at all — matching "rough sequence present but many gaps" is generous; there is no sequence and no checkpoints. Not 1 only because the skill is a design-direction skill where a stepwise process is less critical and the thematic organization is coherent; the destructive/batch validation cap does not apply.

2 / 5

Progressive Disclosure

The body is under 50 lines with no external references needed, and its sections are topical and scannable, so it qualifies for a high disclosure score; the empty Workflow heading and the Scope/Visual-target overlap keep it from fully well-organized (5).

4 / 5

Total

12

/

20

Passed

Description

53%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 gives a clear, specific picture of the deliverable's visual character, but it never states when the skill should be used. Adding an explicit "Use when..." clause with natural trigger phrases (e.g. dark technical dashboards, WebGL landing pages, lime-green design systems) would raise both completeness and trigger quality.

Suggestions

Append an explicit trigger clause, e.g. "Use when creating dark technical dashboards, WebGL/Three.js landing pages, or lime-green instrument-panel interfaces."

Add natural synonyms and related terms users would say ("acid green", "lime", "Three.js", "dark UI") to widen trigger coverage.

Optionally enumerate one or two more actions beyond "Create" (e.g. "apply across layout, typography, and a WebGL viewport") for fuller capability coverage.

DimensionReasoningScore

Specificity

The single action "Create a bright-green technical design system" is accompanied by concrete output attributes ("structured split layouts", "hard-framed dark surfaces", "WebGL visualization zone"), but only one action verb is listed, matching the anchor for 1-2 concrete actions without comprehensive coverage. Not 4 because no several specific actions are enumerated, and not 2 because the deliverable features are specific rather than generic.

3 / 5

Completeness

The "what" is clear — a bright-green technical design system with split layouts, framed dark surfaces, mono labels, and a WebGL zone — but the "when" is entirely absent: there is no "Use when..." clause or equivalent trigger guidance, which caps completeness at 3 per the judging guidelines. Not 4 because the trigger context is missing altogether rather than merely under-specified.

3 / 5

Trigger Term Quality

Relevant keywords like "WebGL", "design system", and "bright-green" are present and plausible trigger terms, but there are no synonyms (e.g. "lime", "acid green"), related artifacts ("Three.js", "dashboard"), or natural "use when" phrasing. Not 4 because common variations a user would actually say are missing; not 2 because the terms present are domain-specific rather than generic.

3 / 5

Distinctiveness Conflict Risk

The niche is clear — bright-green/acid-green signal color combined with an embedded WebGL visualization zone is a distinctive aesthetic direction — leaving only minor overlap risk with other dark or technical design-system skills. Not 5 because "technical design system" and "structured split layouts" are phrasings that could also surface in sibling design-skill descriptions.

4 / 5

Total

13

/

20

Passed

Validation

100%

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