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.

49

Quality

53%

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

57%

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 and non-pedantic, with strong progressive disclosure for a self-contained design-direction skill. Its main weaknesses are an empty Workflow section, cross-section repetition, and directional rather than exact specifications.

Suggestions

Fill the empty '## Workflow' section with an explicit sequence (e.g., 1. establish base palette, 2. frame the split container, 3. wire mono labels, 4. integrate the WebGL zone, 5. verify legibility/contrast), or remove the header if the skill is intentionally single-step.

Deduplicate the split-screen and bright-green-accent guidance so each idea lives in one section (Visual target) and other sections reference it rather than restating it, including the verbatim 'Use When' copy of the description.

Tighten actionability by giving at least one exact value (e.g., a specific lime-green hex, stroke width, or corner-bracket size) so the direction is copy-paste ready rather than a range.

DimensionReasoningScore

Conciseness

The body is directive rather than conceptual (no explanations of what WebGL or design systems are), but 'Use When' duplicates the description verbatim and the split-screen / bright-green-accent points recur across Scope, Visual target, Implementation guidance, and Recommended patterns, so it could be tightened.

2 / 3

Actionability

Guidance is concrete for a design skill ('deep charcoal or near-black base', 'bright lime, acid green, or signal-green accent', mono text for 'labels, status readouts, process steps'), but it gives ranges rather than exact values and no copy-paste-ready specs, matching 'some concrete guidance but incomplete.'

2 / 3

Workflow Clarity

The '## Workflow' header is present but empty, so the procedural sequence is only implicit; the well-organized thematic sections partially compensate, but the missing explicit workflow leaves checkpoints implicit.

2 / 3

Progressive Disclosure

At roughly 50 lines with no external references needed, the body is well-organized into clear, navigable section headers (Scope, Visual target, Implementation guidance, Recommended patterns, Tuning knobs, Avoid), meeting the simple-skill threshold for a top score.

3 / 3

Total

9

/

12

Passed

Description

50%

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 concrete and domain-specific about what to build, but it omits any explicit 'when to use' trigger, leaving completeness, trigger quality, and distinctiveness at the mid-level. Adding a natural 'Use when...' clause would lift the weakest dimensions.

Suggestions

Append a 'Use when...' trigger clause naming natural user phrasings (e.g., 'Use when building a technical, dark, bright-green-accented interface with a WebGL visualization zone').

Replace designer jargon like 'hard-framed dark surfaces' and 'mono utility labels' with terms a user would actually say, and add common variations (e.g., 'WebGL', 'Three.js', 'dark dashboard', 'lime-green UI').

Surface more than one concrete action verb (e.g., 'Design, lay out, and render a bright-green technical interface...') to reach the multi-action specificity of the level-3 anchor.

DimensionReasoningScore

Specificity

Names the domain and concrete deliverables ('structured split layouts, hard-framed dark surfaces, mono utility labels, and a prominent WebGL visualization zone'), but the single verb 'Create' with attribute nouns is not the multiple-distinct-actions pattern of the level-3 anchor.

2 / 3

Completeness

It clearly states what the skill does (create a specific design system) but has no 'Use when...' or equivalent explicit trigger guidance; per the judging guidelines a missing trigger clause caps completeness at 2.

2 / 3

Trigger Term Quality

Contains some natural terms ('WebGL', 'design system', 'bright green'), but the phrasing is jargon-heavy ('hard-framed dark surfaces', 'mono utility labels') and lacks common user-level variations, matching 'some relevant keywords but missing common variations.'

2 / 3

Distinctiveness Conflict Risk

The bright-green WebGL technical aesthetic is a fairly specific niche, but without explicit 'Use when' triggers (present in the level-3 anchor example) it could still overlap with other design-system skills.

2 / 3

Total

8

/

12

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.