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.
Best for Frontend engineers building…Works with GitHubLow risk
⌘source
- author
@addyosmani- language
- Shell
★17kstars
2.2kforks
Apr 18, 2026
✦overview.md
Key Features
- ·Builds production-quality, polished user interfaces
- ·Adheres to real design systems and accessibility standards
- ·Implements composable component architecture
- ·Provides file structure patterns for component colocation
- ·Focuses on visual and UX quality over AI-generated aesthetics
Use Cases
- →Building new UI components or pages from scratch
- →Modifying existing user-facing interfaces to improve quality
- →Implementing responsive layouts for web applications
- →Adding interactivity or state management to components
- →Fixing visual inconsistencies or UX issues in a frontend
Best for
- ✓Frontend engineers building production applications
- ✓Teams implementing or adhering to a design system
Not ideal for
- !Backend or API development tasks
- !Generating quick, disposable prototypes
FAQs
name
frontend-ui-engineering
description
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.
Frontend UI Engineering
Overview
Build production-quality user interfaces that are accessible, performant, and visually polished. The goal is UI that looks like it was built by a design-aware engineer at a top company — not like it was generated by an AI. This means real design system adherence, proper accessibility, thoughtful interaction patterns, and no generic "AI aesthetic."
When to Use
- Building new UI components or pages
- Modifying existing user-facing interfaces
- Implementing responsive layouts
- Adding interactivity or state management
- Fixing visual or UX issues
Component Architecture
File Structure
Colocate everything related to a component:
src/components/
TaskList/
TaskList.tsx # Component implementation
TaskList.test.tsx # Tests
TaskList.stories.tsx # Storybook stories (if using)
use-task-list.ts # Custom hook (if complex state)
types.ts # Component-specific types (if needed)
Component Patterns
Prefer composition over configuration:
// Good: Composable
<Card>
<CardHeader>
<CardTitle>Tasks</CardTitle>
</CardHeader>
<CardBody>
$install
1-click copynpx skills add addyosmani/agent-skills --skill frontend-ui-engineeringSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
4/ 5
very goodClear and well structured, with only minor parts that might need a second read.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
3/ 5
mediumPartially actionable with several concrete steps, but still missing important details.