frontend-ui-engineering

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

Quality

66%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

—

The risk profile of this skill

Fix and improve this skill with Tessl

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

The canonical home for this skill is frontend-ui-engineering in addyosmani/agent-skills

Quality

Content

64%Scale 1-3

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This is a strong, actionable skill with excellent concrete code examples and a valuable 'AI aesthetic' avoidance table that provides genuinely novel guidance. Its main weaknesses are length (several sections could be extracted to reference files) and some content that explains concepts Claude already understands well (basic ARIA, heading hierarchy, composition patterns). The verification checklist is good but would benefit from being integrated into an explicit build workflow.

Suggestions

Extract the detailed Accessibility section and Design System Adherence section into separate reference files (e.g., references/accessibility-checklist.md, references/design-system-guide.md) and keep only key reminders in the main SKILL.md.

Remove or significantly trim content Claude already knows: basic ARIA patterns, heading hierarchy rules, composition vs configuration explanations, and the 'Common Rationalizations' motivational table.

Add an explicit sequenced workflow for building a new component (e.g., 1. Check design system tokens → 2. Build component → 3. Add states → 4. Run accessibility audit → 5. Test breakpoints) to improve workflow clarity.

Dimension	Reasoning	Score
Conciseness	The skill is well-structured but includes some content Claude already knows (e.g., explaining what composition over configuration means, basic accessibility concepts, the 'Common Rationalizations' table which is motivational rather than instructional). The AI aesthetic table is valuable and novel, but sections like typography hierarchy and basic ARIA patterns are largely known to Claude.	2 / 3
Actionability	The skill provides fully executable, copy-paste-ready code examples throughout — component patterns, state management decision tree, accessibility implementations, skeleton loading, optimistic updates with React Query. Every section has concrete, specific guidance rather than abstract descriptions.	3 / 3
Workflow Clarity	The verification checklist at the end provides validation steps, and the state management decision tree is clear. However, there's no explicit sequenced workflow for building a component from start to finish — the sections are organized topically rather than as a step-by-step process. For a skill involving building production UIs (which can involve destructive changes to existing components), the lack of an explicit build-then-validate sequence is a gap.	2 / 3
Progressive Disclosure	The skill references `references/accessibility-checklist.md` in a 'See Also' section, which is good progressive disclosure. However, the skill itself is quite long (~250+ lines) and could benefit from splitting detailed sections (e.g., the full accessibility section, the design system adherence section) into separate reference files. No bundle files are provided, so the referenced file cannot be verified.	2 / 3
	Total	9 / 12 Passed

Description

67%Scale 1-3

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

This is a competent description that clearly communicates both what the skill does and when to use it, with an explicit 'Use when' clause covering multiple scenarios. Its main weaknesses are the breadth of scope (which creates overlap risk with other UI-related skills) and the lack of more specific natural trigger terms that users would commonly use when requesting UI work (e.g., framework names, 'frontend', 'CSS', 'responsive').

Suggestions

Add more specific natural trigger terms users would say, such as 'frontend', 'React', 'CSS', 'styling', 'responsive design', 'web app UI', or relevant framework/technology names.

Narrow the scope or add distinguishing details to reduce conflict risk with other potential UI-related skills — e.g., specify the technology stack, types of applications, or design philosophy that makes this skill unique.

Dimension	Reasoning	Score
Specificity	Names the domain (UIs) and some actions (creating components, implementing layouts, managing state), but the actions are somewhat general and not deeply specific to a particular technology or concrete deliverable.	2 / 3
Completeness	Clearly answers both 'what' (builds production-quality UIs) and 'when' (when building/modifying user-facing interfaces, creating components, implementing layouts, managing state, or when output needs to look production-quality). The 'Use when' clause is explicit and covers multiple trigger scenarios.	3 / 3
Trigger Term Quality	Includes relevant terms like 'components', 'layouts', 'state', 'interfaces', and 'production-quality', but misses common user-facing variations like 'frontend', 'React', 'CSS', 'styling', 'responsive', 'web app', 'UI design', or specific framework names that users would naturally mention.	2 / 3
Distinctiveness Conflict Risk	The description is fairly broad — 'building or modifying user-facing interfaces' could overlap with many frontend, design system, or component library skills. The 'production-quality' qualifier adds some distinction but the scope is still wide enough to conflict with more specialized UI skills.	2 / 3
	Total	9 / 12 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 — 11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository: finlay611/agent-skills
Path: skills/frontend-ui-engineering/SKILL.md
Commit: cea2f38

Reviewed: 4 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.