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.

61

Quality

72%

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 tight, well-structured, judgment-oriented skill body: every section is actionable guidance with concrete anti-patterns and a review checklist, and nothing is padded or buried. The main gaps are the absence of an explicit feedback loop from checklist back to revision and a small amount of provenance/bookkeeping text that does not earn its tokens.

Suggestions

Add a short feedback loop after the Review Checklist (e.g., "If any checklist item fails, revisit the Design Direction choice and revise before finishing") to complete the validate-and-retry cycle.

Move the PR #1659 provenance note and the upstream-skill install instructions out of SKILL.md (e.g., to a README or comment), keeping context tokens for guidance only.

Trim or merge the opening paragraph, which restates the frontmatter description, to save tokens without losing information.

DimensionReasoningScore

Conciseness

The body is lean and imperative with no explanation of concepts Claude already knows, and every bullet carries design judgment. It falls short of anchor 5 because of minor trimmable content: the opening paragraph restates the frontmatter, and the PR #1659 provenance / upstream-install note is repo bookkeeping rather than guidance.

4 / 5

Actionability

As an instruction-only judgment skill it gives concrete, directive guidance ("Do not add UI cards inside other cards", "avoid... purple gradients, decorative blobs, oversized cards", "Use CSS variables or existing design tokens"), satisfying the anchor for mostly-executable concrete guidance. Not a 5 because much of it is directional taste rules rather than fully concrete, checkable specifics, with minor gaps (e.g., no worked example of a chosen direction).

4 / 5

Workflow Clarity

A clear sequence is present: the numbered Design Direction steps run "Before coding", followed by Implementation Guidance and a Review Checklist that serves as an explicit verification checkpoint. It misses anchor 5 because there is no feedback loop (e.g., "if the checklist fails, revisit the direction and revise") tying the checklist back into iteration.

4 / 5

Progressive Disclosure

The body is well organized into clearly headed sections (When to Use, Design Direction, Implementation Guidance, Anti-Patterns, Review Checklist), is self-contained, and buries nothing — matching anchor 4's 'good structure, appropriately placed content'. It does not reach 5 because at roughly 84 lines it exceeds the under-50-line simple-skill guideline, and the Review Checklist is a candidate for an external reference if the skill grows.

4 / 5

Total

16

/

20

Passed

Description

70%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 well-formed description with an explicit "Use when..." trigger clause and a clear, well-scoped domain. Its main weakness is that the capability statement stays at the level of a single abstract action rather than enumerating the concrete design decisions it guides.

Suggestions

Enumerate 2-3 concrete capabilities in the description (e.g., "choose typography, color, and layout direction; review UI against a design checklist") to raise specificity from a single abstract action.

Add natural user phrasings users would actually say, such as "polished", "beautiful", "redesign", or "make it look less generic", to broaden trigger-term coverage.

DimensionReasoningScore

Specificity

The description names the domain and one concrete action ("Set an ECC-specific frontend design direction for production UI work") but does not enumerate the specific actions the skill performs (typography, color, motion, layout choices), matching the '1-2 concrete actions, not comprehensive' anchor. It is not a 4 because no several specific actions are listed.

3 / 5

Completeness

Both a "what" ("Set an ECC-specific frontend design direction for production UI work") and an explicit "Use when..." clause with concrete triggers are present, satisfying anchor 4. Not a 5 because the "what" is somewhat abstract — "set a design direction" does not state concretely what the skill does the way anchor 5's examples do.

4 / 5

Trigger Term Quality

Good natural-term coverage ("websites, dashboards, applications, components, landing pages, visual tools, or any web UI") that users would actually say, though common phrasings like "polished", "redesign", or "make it look better" are absent. It clears anchor 4 but falls short of anchor 5's comprehensive synonym coverage.

4 / 5

Distinctiveness Conflict Risk

The ECC-specific framing plus "frontend design direction" carves a mostly distinct niche with distinct triggers, but there is minor overlap risk with the closely related canonical frontend-design skill that the body itself acknowledges. Anchor 4 ("mostly distinct; minor overlap risk") is the best fit.

4 / 5

Total

15

/

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.

Validation — 15 / 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.