CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design

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

58

Quality

67%

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

85%

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 tightly organized, token-efficient instruction skill with a clear sequenced workflow and a built-in QA checkpoint, but its guidance is somewhat abstract and would benefit from concrete examples of the design patterns it references.

Suggestions

Add one or two concrete examples of responsive/accessible patterns (e.g., specific breakpoint behavior, focus-management or ARIA steps) so the implement step is executable rather than abstract.

Specify what "Visual QA against the acceptance criteria" entails (e.g., checklist items like contrast ratio, keyboard navigation, layout at 320px/768px) to make the verification step actionable.

DimensionReasoningScore

Conciseness

The body is lean with every line earning its place ("Clarify audience and constraints", "Design hierarchy, spacing, and states") and assumes Claude's competence without explaining basic concepts, matching anchor 3.

3 / 3

Actionability

It names concrete design considerations (hierarchy, spacing, states) but steps like "Implement with responsive/accessible patterns" stay abstract with no specific patterns or examples given, fitting anchor 2's incomplete guidance.

2 / 3

Workflow Clarity

As a simple under-50-line skill, it has a clear four-step sequence culminating in an explicit visual-QA verification step; the operation is non-destructive so no feedback loop is required, justifying anchor 3 per the simple-skills scoring note.

3 / 3

Progressive Disclosure

The skill is under 50 lines with no need for external references and is organized into well-signaled sections (When to use, Non-goals, Workflow), meeting the anchor-3 condition for simple skills in the scoring notes.

3 / 3

Total

11

/

12

Passed

Description

50%

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 concise and third-person, conveying a clear design-focused niche, but it lacks an explicit "Use when..." trigger and leans on abstract adjectives rather than concrete, natural trigger terms.

Suggestions

Add an explicit "Use when..." trigger clause naming concrete situations (e.g., "Use when building UI that must be responsive and accessible, or when reviewing a UI for visual quality").

Replace abstract adjectives like "intentional" with concrete actions users would request (e.g., "Design responsive layouts, audit accessibility, and run visual QA").

Include natural trigger keywords users actually say ("responsive design", "accessibility audit", "visual QA", "UI polish") to improve discoverability and reduce conflict with general coding skills.

DimensionReasoningScore

Specificity

Names the UI domain and a couple of actions ("produce...UI work", "perform visual QA"), but the qualities "intentional, responsive, accessible" are abstract adjectives rather than a comprehensive list of concrete actions, so it stops short of anchor 3.

2 / 3

Completeness

It clearly states what the skill does, but there is no "Use when..." clause or equivalent explicit trigger guidance, which per the judging guidelines caps completeness at 2.

2 / 3

Trigger Term Quality

Includes some relevant terms users might say ("responsive", "accessible", "UI", "visual QA"), but phrases like "intentional UI work" are not natural user keywords and common variations are missing, matching anchor 2 rather than the broad coverage of anchor 3.

2 / 3

Distinctiveness Conflict Risk

The "instead of generic component assembly" framing carves out a niche, yet "UI work" is broad and could still overlap with general coding or component skills, fitting anchor 2 rather than a conflict-free niche.

2 / 3

Total

8

/

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

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.