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.

56

Quality

64%

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

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 body is well-structured, concise, and directive with clean sectioning appropriate for a sub-50-line aesthetic guidance skill. It lacks executable code examples and has an empty "Workflow" section, which weakens actionability and workflow clarity.

Suggestions

Fill in or remove the empty "## Workflow" section; either add a short sequenced application order (base shell → split layout → typography split → WebGL panel → motion/reveals) or drop the heading to avoid a dead section.

Add at least one minimal executable snippet (e.g., a Three.js particle/scene skeleton or CSS token block for the green accent and hard-framed container) to lift actionability.

Provide concrete tokens or values (accent color hex, border weights, corner-bracket sizing) so the guidance is directly applicable rather than descriptive.

DimensionReasoningScore

Conciseness

Tight, directive bullets with no explanations of concepts Claude already knows; a few descriptive phrases (e.g., the "atmospheric and premium" bullet) could be trimmed slightly, keeping it just below a 5.

4 / 5

Actionability

Provides concrete design directives (sans-serif + mono split, masked staggered reveals, real Three.js rendering) but no executable code, CSS tokens, or concrete config values, leaving guidance more descriptive than step-executable.

3 / 5

Workflow Clarity

Content is organized into clear thematic sections, but the "## Workflow" heading is empty with no sequenced steps, and there is no procedural sequence for applying the direction.

3 / 5

Progressive Disclosure

At ~47 lines with no need for external references, the skill is cleanly sectioned (Use When, Scope, Visual target, Implementation guidance, Recommended patterns, Tuning knobs, Avoid), satisfying the simple-skill exception for a 5.

5 / 5

Total

15

/

20

Passed

Description

63%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, clearly articulating a concrete visual design niche with multiple concrete attributes. It lacks any explicit "Use when..." trigger guidance and is missing natural synonyms, which caps completeness and trigger-term quality.

Suggestions

Add an explicit 'Use when...' clause stating when Claude should apply this skill (e.g., 'Use when the user requests a bright-green technical or instrument-panel aesthetic with an embedded WebGL/Three.js visualization zone').

Include natural trigger synonyms users would actually say, such as 'Three.js', 'dark mode', 'lime/acid green theme', or 'synthesis console'.

Consider mentioning the dominant signal-color framing in the trigger so it is distinguishable from generic dark design-system skills.

DimensionReasoningScore

Specificity

Names the domain and lists multiple concrete attributes ("structured split layouts", "hard-framed dark surfaces", "mono utility labels", "WebGL visualization zone"), giving comprehensive coverage of the skill's components.

5 / 5

Completeness

The "what" is clearly and concretely stated, but there is no "Use when..." clause or equivalent explicit trigger guidance, which caps completeness at 3 per the rubric guidelines.

3 / 5

Trigger Term Quality

Relevant terms like "bright-green", "WebGL", and "technical design system" are present, but common synonyms and natural variations a user might say ("Three.js", "dark mode", "lime green", "dashboard") are missing.

3 / 5

Distinctiveness Conflict Risk

The bright-green + hard-framed + WebGL combination carves a fairly distinct niche from generic design-system skills, though "design system" is a broad category with potential sibling overlap.

4 / 5

Total

15

/

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.

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