CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design

Produce intentional, responsive, accessible UI work and perform visual QA instead of generic component assembly.

55

Quality

62%

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

Quality

Content

71%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 exceptionally concise and well-structured with a clear sequenced workflow and a QA checkpoint, but the per-step guidance stays at a high level without concrete patterns or examples, limiting actionability.

Suggestions

Add one or two concrete responsive/accessible patterns per implement step (e.g., 'use CSS clamp() for fluid type', 'verify focus order and 4.5:1 contrast') to make guidance executable.

Expand 'Visual QA against the acceptance criteria' into a short checklist with a fix-and-retry loop (QA fails → fix → re-QA) to add an explicit feedback loop.

Optionally include a tiny before/after example of 'intentional vs generic' so the non-goals are concrete rather than abstract.

DimensionReasoningScore

Conciseness

The body is lean with no padding or explanation of concepts Claude already knows; every section and line earns its place.

5 / 5

Actionability

The workflow steps are high-level hints ('Implement with responsive/accessible patterns', 'Design hierarchy, spacing, and states') with no concrete patterns, examples, or specific steps to actually execute, which is minimal concrete guidance.

2 / 5

Workflow Clarity

Four steps are clearly sequenced and step 4 ('Visual QA against the acceptance criteria') is an explicit validation checkpoint; the only gap is a missing fix-and-retry feedback loop, which is a minor validation gap.

4 / 5

Progressive Disclosure

The skill is under 50 lines, needs no external references (no bundle files exist), and is organized into clear sections (When to use, Non-goals, Workflow), which meets the simple-skill exception for a top score.

5 / 5

Total

16

/

20

Passed

Description

53%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 states a clear purpose and niche but omits any explicit 'Use when...' trigger guidance, which caps completeness and weakens trigger-term quality. It is reasonably distinct but would benefit from concrete trigger phrasing.

Suggestions

Add an explicit 'Use when...' clause with natural user phrases (e.g., 'Use when building UI that must be responsive and accessible, or when reviewing a UI for design quality').

Replace qualitative fluff ('intentional') with one or two more concrete actions (e.g., 'audit spacing and hierarchy, verify focus order') to lift specificity.

Include common synonyms users actually say (e.g., 'responsive design', 'a11y', 'design review') to improve trigger-term coverage.

DimensionReasoningScore

Specificity

The description names the domain ('UI work') and 1-2 concrete actions ('perform visual QA', 'Produce ... UI work'), but the qualifiers 'intentional, responsive, accessible' are qualitative rather than additional concrete actions, so coverage is not comprehensive.

3 / 5

Completeness

It clearly states what the skill does ('Produce intentional, responsive, accessible UI work and perform visual QA') but provides no explicit 'when' trigger guidance; per the rubric, a missing 'Use when...' clause caps completeness at 3.

3 / 5

Trigger Term Quality

It includes some relevant natural keywords ('responsive', 'accessible', 'UI', 'visual QA'), but there is no explicit 'Use when...' trigger clause and terms like 'intentional' and 'component assembly' are less phrases a user would naturally say, leaving common variations missing.

3 / 5

Distinctiveness Conflict Risk

The framing 'visual QA instead of generic component assembly' carves out a mostly distinct niche, but without explicit triggers there is minor overlap risk with general frontend/component-building skills.

4 / 5

Total

13

/

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

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
Hmbown/Codewhale
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.