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.

68

Quality

82%

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

SKILL.md
Quality
Evals
Security

Quality

Content

72%

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-organized and gives concrete, actionable design guidance with a useful review checklist. Its weak spots are non-essential provenance/rebundling commentary that pads the token budget and a workflow that lacks explicit validation gates between direction-setting, implementation, and review.

Suggestions

Remove the "Source: salvaged from stale community PR #1659" line and the multi-sentence rebundling disclaimer; keep only guidance that helps Claude execute the skill.

Turn the Design Direction + Review Checklist into an explicit gated workflow (e.g. "Pick direction → implement → run the checklist → fix any failing item → re-check") so validation is explicit rather than implied.

Add one or two concrete worked examples (e.g. a sample tone + palette choice applied to a dashboard) to push actionability from strong to copy-paste-ready.

DimensionReasoningScore

Conciseness

The guidance itself is lean and assumes Claude's competence, but the "Source: salvaged from stale community PR #1659" attribution and the multi-sentence note about not rebundling the canonical Anthropic skill are unnecessary context that doesn't help perform the task, so it could be tightened.

2 / 3

Actionability

Concrete, specific directives throughout ("Use CSS variables or existing design tokens", "Keep palettes multi-dimensional", "Build the actual usable experience as the first screen") plus a worked domain mapping (SaaS tool = dense/quiet/scannable; portfolio = expressive) and explicit do/don't lists; for an instruction-only skill this is actionable guidance.

3 / 3

Workflow Clarity

A numbered "Design Direction" sequence and a final "Review Checklist" are present, but the five direction items read as parallel considerations rather than a gated sequence, and there is no explicit validate→fix→retry checkpoint tying implementation to the checklist.

2 / 3

Progressive Disclosure

A single self-contained document with no external references and clear sections (When to Use, Design Direction, Implementation Guidance, Anti-Patterns, Review Checklist); no bundle files exist and none are needed, so well-organized sections suffice.

3 / 3

Total

10

/

12

Passed

Description

92%

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 description: concrete action, explicit "Use when" trigger, and natural user-facing terms. Its main weakness is overlap risk with general frontend skills given the very broad list of triggered surfaces.

Suggestions

Tighten the trigger so it fires only for design-judgment work (e.g. "Use when the user wants a deliberate visual direction or design system choice for a web UI"), reducing overlap with generic frontend build skills.

Drop or sharpen the catch-all "or any web UI" to lower conflict risk with the canonical Anthropic frontend-design skill.

DimensionReasoningScore

Specificity

Names a concrete action ("Set an ECC-specific frontend design direction for production UI work") plus multiple specific concrete targets (websites, dashboards, applications, components, landing pages, visual tools, web UI), matching the 'lists multiple specific concrete actions' anchor.

3 / 3

Completeness

Clearly states what it does ("Set an ECC-specific frontend design direction for production UI work") and an explicit "Use when building or improving..." trigger, answering both what and when.

3 / 3

Trigger Term Quality

"building or improving websites, dashboards, applications, components, landing pages, visual tools, or any web UI" are natural terms users actually say when requesting frontend work, giving good coverage of common variations.

3 / 3

Distinctiveness Conflict Risk

The "design direction / product-specific design judgment" niche is fairly distinct, but the broad trigger list (websites, dashboards, apps, components, landing pages) could still overlap with generic frontend or the official frontend-design skill, so it is not clearly conflict-free.

2 / 3

Total

11

/

12

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.