frontend-ui-engineering

Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.

Quality

73%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/frontend-ui-engineering/SKILL.md

Quality

Content

63%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 a well-organized, highly actionable frontend guide with concrete code patterns, specific numeric standards (contrast ratios, breakpoints), and a useful verification checklist. Its weaknesses are instructional padding that re-explains basics Claude already knows, and progressive disclosure: the single external reference is a dangling pointer to a non-existent file while detail that belongs in that reference stays inline.

Suggestions

Trim sections that re-teach knowledge Claude already has — the keyboard-accessibility comparison, aria-label examples, and h1/h2/h3 typography listing could each be cut to one line or a pointer, and the 'Common Rationalizations' table could be dropped or merged into 'Red Flags'.

Fix the dangling reference: '../../references/accessibility-checklist.md' points outside the skill bundle to a file that does not exist. Create references/accessibility-checklist.md inside the skill and move the detailed accessibility code (focus management, ARIA patterns, empty/error states) into it, keeping only a summary in SKILL.md.

Fix the incomplete code snippets — the empty-state TaskList uses an onCreateTask prop it never declares and the container example references an undefined refetch — so the examples are fully copy-paste ready.

Dimension	Reasoning	Score
Conciseness	The body is dense and mostly earns its tokens, but several sections re-teach fundamentals Claude already knows (native <button> focusability, aria-label basics, the h1/h2/h3 heading-hierarchy listing) and the 'Common Rationalizations' table is padding, fitting the 'mostly efficient but could be tightened' anchor rather than anchor 4's 'minor instances'.	3 / 5
Actionability	Concrete, runnable TSX/CSS appears throughout (container/presentation split, optimistic-update mutation, skeleton loader) with specific numeric standards ('4.5:1 for normal text', '320px, 768px, 1024px, 1440px'), but a few snippets have minor gaps — the empty-state TaskList calls onCreateTask absent from its props and the container references an undefined refetch — matching anchor 4 rather than fully copy-paste-ready anchor 5.	4 / 5
Workflow Clarity	The reference-led design process is a clearly numbered 4-step sequence and the final 'Verification' checklist supplies explicit checkpoints, but there is no validate/fix/retry feedback loop in the workflow itself, fitting anchor 4 ('clear sequence with most checkpoints present; minor validation gaps') rather than anchor 5.	4 / 5
Progressive Disclosure	Sections are well-organized, but the ~340-line body inlines detailed accessibility code that belongs in a separate reference, and its only reference — '../../references/accessibility-checklist.md' — points outside the bundle to a file that does not exist (no references/, scripts/, or assets/ directories are present), fitting anchor 3 ('content that should be separate is inline') rather than anchor 4.	3 / 5
	Total	14 / 20 Passed

Description

83%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 strong description: third-person, concise, with a clear capability statement and an explicit multi-trigger 'Use when...' clause covering building, modifying, components, layouts, WCAG, state, and production-quality output. Its only weaknesses are slightly generic verbs and a broad trigger surface that could overlap with related frontend or design skills.

Dimension	Reasoning	Score
Specificity	The description lists several specific action areas ('creating components, implementing layouts, meeting WCAG accessibility requirements, managing state'), but the verbs remain somewhat generic ('building', 'modifying') with minor coverage gaps, matching the 'several specific actions; minor gaps' anchor rather than the comprehensive anchor 5.	4 / 5
Completeness	It clearly answers 'what' ('Builds production-quality, accessible, responsive user-facing UIs') and 'when' with an explicit 'Use when...' clause enumerating concrete triggers, exactly matching anchor 5; it exceeds anchor 4 because the 'when' is explicit and specific rather than improvable.	5 / 5
Trigger Term Quality	Natural phrases users would say are well covered ('interfaces and pages', 'creating components', 'WCAG accessibility', 'managing state', 'production-quality rather than AI-generated'), but a few common synonyms like 'frontend', 'styling', or 'design system' are missing, so it fits anchor 4 rather than the comprehensive synonym coverage of anchor 5.	4 / 5
Distinctiveness Conflict Risk	The WCAG and anti-'AI-generated' quality framing carves a distinct niche, but the broad triggers ('building or modifying interfaces and pages, creating components, implementing layouts') create minor overlap risk with general web-development and design skills, fitting anchor 4 rather than the minimal-conflict anchor 5.	4 / 5
	Total	17 / 20 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: addyosmani/agent-skills
Path: skills/frontend-ui-engineering/SKILL.md
Commit: 2686b62

Reviewed: 3 days ago

Table of Contents

Discovery Implementation Validation

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.