frontend-web

Files (3)

• SKILL.md
• react-patterns.md · examples/
• react.md · examples/

SKILL.md (first lines)

# Frontend Web Development

## When to Use

- Building web user interfaces
- Implementing component architecture
- Managing application state
- Optimizing performance
- Ensuring accessibility
- Handling forms and validation

## Interactive UI validation (Review / Validate)

When an agent must **exercise UI acceptance criteria** with evidence (Review Frontend/UX pass or Validate phase UI criteria), follow **[docs/INTERACTIVE-UI-VALIDATION.md](../../docs/INTERACTIVE-UI-VALIDATION.md)** — **Chrome DevTools MCP**, not ad-hoc Playwright or generic browser MCP. Playwright remains for CI and `e2e/` test authoring.

## Component Architecture

### Component Types

| Type | Purpose | State | Examples |
|------|---------|-------|----------|
| **Presentational** | UI rendering | None/props only | Button, Card, Avatar |
| **Container** | Data fetching, logic | Yes | UserList, OrderPage |
| **Layout** | Page structure | Minimal | Header, Sidebar, Grid |
| **Feature** | Complete feature | Yes | LoginForm, Checkout |

### Component Structure

```
components/
├── ui/                    # Presentational (reusable)
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.test.tsx
│   │   └── Button.css
│   ├── Input/
│   └── Card/
├── features/              # Feature-specific
│   ├── auth/
│   │   ├── LoginForm.tsx
│   │   └── SignupForm.tsx
│   └── dashboard/
│       └── DashboardStats.tsx
└── layout/                # Layout components
    ├── Header.tsx
    ├── Sidebar.tsx
    └── PageLayout.tsx
```

### Component Patterns

**Composition over Props**

```tsx
// Good: Composable
<Card>
  <Card.Header>Title</Card.Header>
  <Card.Body>Content</Card.Body>
  <Card.Footer>Actions</Card.Footer>
</Card>

// Avoid: Prop overload
<Card 
  title="Title"
  body="Content"
  footer="Actions"
  showBorder
  variant="elevated"
  ...dozens more props
/>
```

**Render Props / Slots**

```tsx
// React: Render props
<DataFetcher url="/api/users">
  {({ data, loading, error }) => (
    loading ? <Spinner /> : <UserList users={data} />
  )}
</DataFetcher>

// Vue: Slots
<template>
  <DataFetcher url="/api/users" v-slot="{ data, loading }">
    <Spinner v-if="loading" />
    <UserList v-else :users="data" />
  </DataFetcher>
</template>
```

## State Management

### When to Use What

| State Type | Location | Example |
|------------|----------|---------|
| **Local UI** | Component state | Modal open/closed |
| **Form** | Form library | Input values |
| **Server** | React Query/SWR | API data |
| **Global UI** | Context/Store | Theme, sidebar |
| **Global App** | Store | User session |

### React State Patterns

```tsx
// Local state
const [count, setCount] = useState(0);

// Server state with React Query
const { data, isLoading } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
});

// Global state with Context
const ThemeContext = createContext<Theme>('light');

function App() {

From queen-of-code/AI-DLC, MIT.

More from queen-of-code/AI-DLC