What does this skill do, and when should you use it?
This skill supports building and modifying user-facing interfaces, components, and pages. It sets guidance for component boundaries, state management, responsive layouts, design-system adherence, and WCAG 2.1 AA accessibility. It also covers loading, error, and empty states, keyboard interaction, focus management, and post-build verification. It fits frontend projects that need product-quality results instead of a generic AI-generated visual style.
Guides agents to organize component-related files by responsibility, favor composition, and separate data fetching from presentation; choose local state, Context, URL state, server state, or a global store according to scope; implement mobile-first responsive layouts with semantic colors and consistent spacing and type hierarchy; add keyboard access, ARIA labeling, focus management, and meaningful feedback for interactive elements, forms, dialogs, loading, error, and empty states; and verify console errors, keyboard navigation, screen-reader structure, multiple viewport sizes, design-system adherence, and accessibility warnings.
- A frontend engineer adding a task list, form, or page component to a React-like project needs guidance on component boundaries and state handling.
- A product team modifying an existing interface needs to improve layout, interaction, or visual quality while preserving the project’s design system.
- A developer building a page for both mobile and desktop needs mobile-first responsive-layout guidance.
- A team adding WCAG 2.1 AA requirements, keyboard navigation, ARIA labels, and focus management to UI components needs concrete checks.
- A developer implementing asynchronous data views needs loading, error, empty-state, and optimistic-update patterns.
How do you install this skill?
- Examples depend on React, Tailwind, React Query, project design tokens, and the referenced accessibility-checklist.md, which is not included in the supplied skill evidence; confirm stack and file availability before use.
- The skill requires WCAG 2.1 AA and responsive verification but provides no executed test commands, test suite, or results; the target project should add keyboard, screen-reader, breakpoint, and axe-core checks.
- Security-sensitive interfaces, user-data handling, external APIs, side-effect confirmation, and rollback are not specified; use dedicated security, testing, and release guidance for those cases.
Install only this skill with the skills CLI:
npx skills add addyosmani/agent-skills --skill frontend-ui-engineering
The repository also supports installing all 24 skills:
npx skills add addyosmani/agent-skills
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/addyosmani/agent-skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/frontend-ui-engineering" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- Build a mobile-first task-list page for the existing app, follow the project design system, meet WCAG 2.1 AA, and handle loading, error, and empty states.
In an Agent Skills-compatible coding agent, ask it to build or modify an interface, for example: “Build a mobile-first task-list page for the existing app, follow the project design system, meet WCAG 2.1 AA, and handle loading, error, and empty states.” The README says skills activate automatically when building UI and can also be referenced directly.
What are this skill's strengths and limitations?
- Covers the major UI engineering concerns of component architecture, state management, design systems, responsive design, and accessibility.
- Includes concrete React, Tailwind, and CSS examples that can be converted into implementation constraints.
- Explicitly addresses keyboard access, focus management, semantic colors, loading states, error states, and empty states.
- Adds AI-aesthetic avoidance guidance, red flags, and a verification checklist suitable for a production-quality bar.
- It provides engineering guidance and examples without committing to a specific frontend framework, test framework, or build tool.
- The source provides no test suite or project-level validation results for this individual skill.
- It refers to accessibility-checklist.md, but that reference file is not included in the supplied material.
- It specifies testing at 320px, 768px, 1024px, and 1440px without supplying automated commands for those checks.
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Production Frontend UI Engineering this page | 53 · Use with care | ★ 107k | 14d ago | MIT |
| Distinctive Frontend Design ✓ Anthropic · Official | 60 · Recommended | ★ 38k | 13d ago | Apache-2.0 |
| Frontend Design Review ✓ Microsoft · Official | 51 · Use with care | ★ 2.7k | 3mo ago | MIT |
| TypeUI Design Fundamentals | 70 · Strongly recommended | ★ 2k | 3mo ago | NOASSERTION |
| Stitch Design Taste | 42 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
How did FollowSkills review this skill?
The skill provides frontend engineering guidance only and requests no credentials, external writes, or data exfiltration. It does not explicitly define user confirmation, least-privilege boundaries, sensitive-data handling, rollback, or data-flow disclosure. The README supplies an MIT license and maintainer information, but the publisher is not FollowSkills-verified, so points are deducted.
The content is internally coherent and covers components, state, accessibility, responsiveness, and verification with concrete examples. However, examples assume undeclared React, Tailwind, React Query, and project-specific conventions; static material does not demonstrate runnable key paths or complete abnormal-input feedback. The score is therefore kept below the static-review ceiling.
The description and When to Use section clearly target building or modifying user interfaces, layouts, interactions, state, and UX. Boundaries around non-fit cases, input/output contracts, trigger precedence, Chinese-language use, and mainland-China environment fit are not sufficiently specified, so points are deducted.
The document is layered across overview, triggers, architecture, accessibility, responsiveness, and verification, with examples, red flags, and limitations. The README provides installation guidance, MIT licensing, and maintainer information, but the skill lacks independent versioning, changelog, dependency notes, explicit maintenance responsibility, and update path. Its referenced accessibility checklist is not included in the supplied skill evidence, so points are deducted.
The skill can directly guide an agent through component decomposition, state selection, WCAG practices, responsive design, and loading/error/empty states, covering the core task. There is no skill-specific representative output, runtime result, or comparative evidence in the supplied files; project integration and testing remain necessary. The static-review cap therefore limits this to 7.
The SKILL.md contains auditable code examples, checklists, and explicit assertions. Repository CI validates the overall skill content and evaluation runner, but the supplied evidence does not show dedicated tests covering this frontend skill’s key paths or third-party execution evidence, so verifiability remains limited.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →