CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design-direction

Set an ECC-specific frontend design direction for production UI work. Use when building or improving websites, dashboards, applications, components, landing pages, visual tools, or any web UI that needs stronger product-specific design judgment.

65

Quality

79%

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 ./skills/frontend-design-direction/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

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

A well-structured, efficient guidance skill with concrete directives and a clear choose-then-review workflow. It is an instruction-only skill appropriately scored without code, with small gains available in conciseness trim, worked examples, and optional content splitting.

Suggestions

Trim the provenance/salvage paragraph (PR #1659, rebundle note) to a one-line aside or move it to a reference, since it consumes tokens without aiding execution.

Add one short before/after or concrete motif example under Design Direction to convert a couple of abstract bullets into immediately actionable guidance.

Turn the Review Checklist into an explicit verify-then-proceed loop (e.g., "If any check fails, revise and re-check before delivering") to add an explicit feedback loop.

DimensionReasoningScore

Conciseness

Lean and assumes Claude's competence—no explanation of what CSS, typography, or design systems are—with only minor removable framing such as the salvage/PR provenance note.

4 / 5

Actionability

Concrete directive guidance ("Use existing project components, tokens, icon libraries", "Use CSS variables or existing design tokens", "Keep palettes multi-dimensional") that an instruction-only skill can execute, with minor gaps where a quick example would help.

4 / 5

Workflow Clarity

The Design Direction section gives a clear numbered 1-5 sequence and the Review Checklist acts as a closing validation checkpoint; not a destructive/batch skill, so the cap does not apply, but explicit error-recovery loops are absent.

4 / 5

Progressive Disclosure

Well-organized single-file structure with clear section headers and no nested references; no bundle files exist and none are needed, with only minor room to split dense bullet lists into a referenced detail file.

4 / 5

Total

16

/

20

Passed

Description

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

A strong, concrete description that clearly states both its purpose and its trigger conditions with natural terms. Minor specificity and distinctiveness gains are possible but it largely meets the top anchors.

Suggestions

Lead with the verb/action (e.g., "Choose and apply a frontend design direction...") so the capability reads as a concrete action rather than a noun phrase.

Add a couple of natural trigger synonyms users might say (e.g., "redesign", "make it look better", "polish the UI") to broaden trigger coverage.

Tighten the distinctiveness signal by noting when NOT to use it (e.g., "not for backend or non-visual work") to reduce overlap with general UI skills.

DimensionReasoningScore

Specificity

Names the domain (frontend design direction) and lists several concrete buildable targets—"websites, dashboards, applications, components, landing pages, visual tools"—with only minor coverage gaps.

4 / 5

Completeness

Explicitly answers both "what" ("Set an ECC-specific frontend design direction for production UI work") and "when" ("Use when building or improving...web UI that needs stronger product-specific design judgment") with concrete trigger phrases.

5 / 5

Trigger Term Quality

Natural user-facing terms ("websites, dashboards, applications, components, landing pages, visual tools, web UI") plus an explicit "Use when building or improving" clause give good coverage, missing only a few synonyms.

4 / 5

Distinctiveness Conflict Risk

The ECC-specific "design direction" framing with concrete UI triggers carves a fairly distinct niche; minor overlap risk remains with generic frontend/UI skills.

4 / 5

Total

17

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
affaan-m/ECC
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.