claudegoodies
Skill

frontend-ui-engineering

From addyosmani

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.

Guides building accessible, production-quality frontend UI components with WCAG 2.1 AA compliance and design system adherence.

Use it when

  • Building or modifying user-facing React components or pages
  • Implementing responsive layouts and state management patterns
  • Fixing accessibility issues or meeting WCAG 2.1 AA requirements
  • Avoiding generic 'AI-generated' visual patterns in UI output

Skip it if

  • Assumes a React/TSX + Tailwind-style stack; not framework-agnostic
  • It's a style/process guideline, not a tool that writes or checks code for you
  • Backend, non-UI, or non-web codebases won't benefit

Facts

Repository
addyosmani/agent-skills
Status
Actively maintained
Last commit
Source file
skills/frontend-ui-engineering/SKILL.md

Source preview

The instructions Claude Code reads when this skill runs.

# 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:**

```tsx
// Good: Composable
<Card>
  <CardHeader>
    <CardTitle>Tasks</CardTitle>
  </CardHeader>
  <CardBody>
    <TaskList tasks={tasks} />
  </CardBody>
</Card>

// Avoid: Over-configured
<Card
  title="Tasks"
  headerVariant="large"
  bodyPadding="md"
  content={<TaskList tasks={tasks} />}
/>
```

**Keep components focused:**

```tsx
View full source on GitHub →

Other skills