CtrlK
BlogDocsLog inGet started
Tessl Logo

technical-wireframe-info-layout

Create a monochrome technical wireframe design system with exploded 3D structure, connector annotations, sparse information labels, and precise dark diagnostic framing.

56

Quality

63%

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/technical-wireframe-info-layout/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

61%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 well-organized, reasonably concise style specification for a design-direction skill, and it appropriately needs no external bundle files. Its weaknesses are the empty '## Workflow' section, the verbatim duplication of the description in 'Use When', and guidance that stays at the aesthetic-description level without concrete values or a starter implementation.

Suggestions

Remove or populate the empty '## Workflow' section (line 11) — either give a short step sequence (define palette, build wireframe centerpiece, place annotations, add supporting widgets) or drop the header.

Replace the 'Use When' section, which duplicates the frontmatter description verbatim, with actual trigger scenarios or delete it to save tokens.

Add a minimal concrete anchor for actionability: a small Three.js/SVG wireframe starter snippet or concrete values (e.g. specific hex/gray levels for the monochrome palette, label sizing, rotation speed) so the direction is executable rather than purely descriptive.

DimensionReasoningScore

Conciseness

Mostly lean directive bullets with no explanations of concepts Claude already knows, but there is trimmable redundancy: the 'Use When' section repeats the description verbatim, the '## Workflow' header at line 11 is completely empty, and 'Tuning knobs' overlaps with 'Implementation guidance'.

4 / 5

Actionability

Gives some concrete direction (named neutral palette, 'torus/cylinder/cap layers', 'dashed or routed connector lines', technology options WebGL/Three.js/SVG/canvas), but as an instruction-only skill the guidance lacks key execution details: no starter code or snippet, and no concrete values (hex/gray steps, sizing, timing) — it reads more as a style description than an instructable spec.

3 / 5

Workflow Clarity

The body has coherent topical organization (Scope, Visual target, Implementation guidance, Tuning knobs, Avoid) but the '## Workflow' section is an empty header with no sequence or steps, so any process ordering is only implicit. Not a destructive/batch skill, so no validation cap applies.

3 / 5

Progressive Disclosure

A ~47-line body with no need for external references and clearly headed sections qualifies for the simple-skill exception, but the empty Workflow header and the duplicated Use When section are minor organization gaps that keep it below fully well-organized.

4 / 5

Total

14

/

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 distinctive within its design niche, clearly stating what the skill produces. Its main weakness is the complete absence of a 'Use when...' trigger clause, which caps completeness and slightly raises conflict risk with generic design requests.

Suggestions

Append an explicit trigger clause, e.g. 'Use when the user asks for a technical wireframe aesthetic, exploded 3D diagram view, dark diagnostic dashboard, or annotated schematic-style layout.'

Add common user-facing synonyms such as 'schematic', 'blueprint', or 'exploded view' to broaden natural trigger coverage.

DimensionReasoningScore

Specificity

Names several concrete deliverable components ('exploded 3D structure, connector annotations, sparse information labels, and precise dark diagnostic framing') within the wireframe design-system domain, though it is a single 'Create' action with attributes rather than multiple distinct actions, so it falls short of comprehensive coverage.

4 / 5

Completeness

The 'what' is clear and specific, but there is no 'Use when...' clause or equivalent explicit trigger guidance anywhere in the description, which the rubric guidelines cap at 3. The 'when' is only weakly implied by the aesthetic vocabulary.

3 / 5

Trigger Term Quality

Includes natural niche terms ('technical wireframe', '3D structure', 'annotations', 'design system', 'monochrome', 'dark'), but misses common synonyms and variations a user might say such as 'schematic', 'blueprint', 'exploded view/diagram', or 'dark UI'.

4 / 5

Distinctiveness Conflict Risk

The monochrome technical-wireframe niche is clearly distinguishable with low overlap risk against most skills, but the absence of a 'when' clause leaves moderate risk of it triggering for any dark or aesthetic design request.

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.

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.