---
name: web-dev
description: Modern web development with HTML/CSS/JS, React, Next.js, API design. Use for frontend/backend web tasks.
---

# Web Development Skill

## Frontend Architecture
```
src/
├── components/    # Reusable UI components
├── pages/         # Route-based pages
├── hooks/         # Custom React hooks
├── utils/         # Helper functions
├── styles/        # CSS/SCSS files
├── services/      # API client functions
└── types/         # TypeScript types
```

## React Patterns
```jsx
// Functional component with hooks
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser(userId).then(setUser).finally(() => setLoading(false));
  }, [userId]);

  if (loading) return <Spinner />;
  if (!user) return <NotFound />;
  return <ProfileCard user={user} />;
}
```

## API Design (REST)
```
GET    /api/users          # List users
GET    /api/users/:id      # Get user
POST   /api/users          # Create user
PUT    /api/users/:id      # Update user
DELETE /api/users/:id      # Delete user
```

## CSS Best Practices
- Use CSS variables for theming
- Mobile-first responsive design
- Use flexbox/grid for layouts
- Avoid !important

## Performance
- Lazy load routes and heavy components
- Optimize images (WebP, srcset)
- Use proper caching headers
- Minimize bundle size
