CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

frontend-design

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

Quality

65%

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

65%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-organized, but it trades away actionability: the workflow gives abstract direction with no concrete patterns, examples, or acceptance criteria, and the visual QA step lacks any validation or fix-retry loop. It reads as a skeleton of a good skill rather than a self-sufficient guide.

Suggestions

Make each workflow step executable: specify what 'accessible patterns' means (e.g. keyboard navigation, ARIA roles, focus order, contrast ratios) and what 'Visual QA' concretely checks (layout breakage at common breakpoints, reduced-motion, screen-reader labels).

Add a feedback loop after the QA step: 'If QA fails, fix the failing criterion and re-run QA before shipping', turning step 4 into a genuine validation checkpoint.

Either define the 'acceptance criteria' referenced in step 4 or move detailed checklists/patterns into a references/ file (e.g. QA-CHECKLIST.md) linked from the body.

DimensionReasoningScore

Conciseness

The 14-line body is lean with zero padding, no explanation of concepts Claude already knows, and every line carrying instruction. It matches the anchor 'lean and efficient; assumes Claude's competence; every token earns its place.'

5 / 5

Actionability

The workflow steps ('Design hierarchy, spacing, and states', 'Implement with responsive/accessible patterns') are high-level hints with no specific steps, examples, patterns, or QA criteria to execute against. It exceeds 1 because the steps do outline real direction, but stays at 2 rather than 3 because no step reaches concrete, executable guidance.

2 / 5

Workflow Clarity

A clear 4-step sequence exists and ends with a QA step ('Visual QA against the acceptance criteria'), but there is no validation checkpoint or feedback loop — what to do when QA fails is unstated and 'acceptance criteria' is never defined. It is above 2 because the sequence is coherent and a verification step is present, but below 4 because that step has no concrete check or recovery path.

3 / 5

Progressive Disclosure

The skill is under 50 lines, needs no external references, and is organized into clearly labeled sections (When to use, Non-goals, Workflow). Per the rubric's simple-skill guideline, well-organized sections with no need for external files warrant a 5; no references/ or scripts/ bundle exists and none is referenced.

5 / 5

Total

15

/

20

Passed

Description

50%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, buzzword-light 'what' with a distinctive positioning against generic component assembly, but it omits any explicit 'when to use' trigger guidance and relies on generic terms like 'UI work' rather than concrete natural-language triggers. It is serviceable but below the standard of the good examples, which pair an action list with explicit use-conditions.

Suggestions

Add an explicit trigger clause, e.g. 'Use when building or restyling web interfaces, landing pages, component libraries, or when the user asks for design, layout, responsiveness, or accessibility work.'

Replace the abstract 'UI work' with concrete actions, e.g. 'Design visual hierarchy and spacing, build responsive layouts, apply accessible patterns, and QA the rendered UI.'

Include natural trigger synonyms users would say (design, frontend, layout, CSS, mockup, component styling) to improve trigger-term coverage.

DimensionReasoningScore

Specificity

The description names the domain ('UI work') and 1-2 actions ('Produce intentional, responsive, accessible UI work', 'perform visual QA'), but coverage is not comprehensive. It falls short of 4 because 'UI work' is abstract and the action list lacks specifics such as layout, styling, or component-level operations.

3 / 5

Completeness

The 'what' is clear (produce intentional/responsive/accessible UI, perform visual QA) but there is no 'Use when...' clause or equivalent explicit trigger guidance, which the rubric caps at 3. Not 4 because the 'when' is entirely absent rather than merely imprecise.

3 / 5

Trigger Term Quality

'UI', 'responsive', 'accessible', and 'visual QA' are keywords users would plausibly say, but common natural variations ('design', 'frontend', 'layout', 'CSS', 'mockup') are missing. Not 4 because keyword coverage has notable gaps rather than 'a few' missing terms.

3 / 5

Distinctiveness Conflict Risk

The contrast framing ('instead of generic component assembly') gives it a niche identity, but 'UI work' is broad and would overlap with other frontend/UI/design skills. Not 4 because the trigger surface remains wide enough to collide with closely related skills.

3 / 5

Total

12

/

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

frontmatter_unknown_keys

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

Warning

Total

15

/

16

Passed

Repository

Hmbown/Codewhale

Path

crates/tui/assets/skills/frontend-design/SKILL.md

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.