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

—

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Quality

Content

77%

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

Highly actionable and well-structured UI guidance with concrete code, decision tables, and a verification checklist. It loses points on conciseness due to persuasive prose, and on progressive disclosure because the single referenced file is missing from the bundle and the body is monolithic.

Suggestions

Create the referenced references/accessibility-checklist.md and move the detailed Accessibility section into it, or remove the dangling See Also reference so navigation is not broken.

Trim or remove the 'Common Rationalizations' table and the motivational framing around the 'AI Aesthetic' to reduce persuasive prose that assumes Claude needs convincing.

Split the large inline body (component architecture, state management, design system) into one-level-deep reference files with clearly signaled links so SKILL.md stays a lean overview.

Dimension	Reasoning	Score
Conciseness	The body is mostly efficient with concrete examples, but at ~325 lines it includes persuasive prose Claude does not need, such as the 'Common Rationalizations' table and the motivational 'AI Aesthetic' framing, which could be tightened without losing the actionable guidance.	2 / 3
Actionability	It provides numerous copy-paste-ready, executable code examples (tsx, css), specific decision tables, concrete spacing/type/color rules, and an explicit verification checklist, fully meeting the anchor for executable and specific guidance.	3 / 3
Workflow Clarity	Although this is a guidance skill rather than a fragile multi-step operation, the final 'Verification' section supplies an explicit validation checklist, satisfying the anchor for checklists that catch errors before considering the work complete.	3 / 3
Progressive Disclosure	Sections are well organized, but the body is a large monolithic document and its only 'See Also' pointer targets references/accessibility-checklist.md, a file that does not exist in the bundle, so the reference is broken and accessibility content that should be split out remains inline.	2 / 3
	Total	10 / 12 Passed

Description

85%

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, third-person description that clearly states capabilities and explicit use-when triggers with a distinct UI-engineering niche. Its only weakness is trigger-term coverage, which leans on technical phrasing and omits common natural variations a user would actually say.

Dimension	Reasoning	Score
Specificity	The description lists multiple concrete actions ('building or modifying user-facing interfaces', 'creating components, implementing layouts, managing state'), matching the anchor for listing several specific concrete actions.	3 / 3
Completeness	It explicitly states what it does ('Builds production-quality UIs') and gives an explicit 'Use when' trigger clause covering multiple scenarios, clearly answering both what and when.	3 / 3
Trigger Term Quality	It includes relevant terms a user might say ('components', 'layouts', 'state', 'user-facing interfaces') but misses common natural variations like 'UI', 'frontend', 'web app', 'design', or 'responsive', and the trigger 'production-quality rather than AI-generated' is model-speak rather than user phrasing.	2 / 3
Distinctiveness Conflict Risk	The triggers are narrowly scoped to user-facing interface work ('building or modifying user-facing interfaces', 'creating components'), giving it a clear niche unlikely to fire for non-UI coding tasks.	3 / 3
	Total	11 / 12 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
referenced_paths_exist	Referenced path issues: 1 missing	Warning

	Total	15 / 16 Passed

Repository: addyosmani/agent-skills
Commit: 70b7506

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.