frontend

name	frontend
description	Build modern, responsive pages, components, layouts, and styling systems. Use for all UI development tasks including React/Next.js components, CSS styling, and interactive elements.

Frontend Skill – Build Pages, Components, Layout, Styling

Overview

This skill covers building production-ready user interfaces with modern frameworks, responsive layouts, and polished styling. Focus on creating accessible, performant, and maintainable frontend code.

Instructions

1. Component Architecture

• Structure components logically

  • Separate presentational and container components
  • Keep components focused and single-responsibility
  • Use composition over inheritance
  • Extract reusable UI elements

• State management

  • Use appropriate state solutions (useState, useContext, etc.)
  • Keep state as local as possible
  • Lift state only when necessary

2. Layout Systems

• Responsive design

  • Mobile-first approach (start at 320px)
  • Use CSS Grid and Flexbox appropriately
  • Breakpoints: mobile (< 640px), tablet (640-1024px), desktop (> 1024px)
  • Test on multiple screen sizes

• Layout patterns

  • Container/wrapper components for content width
  • Consistent spacing system (4px, 8px, 16px, 24px, 32px, 48px, 64px)
  • Proper use of margins and padding
  • Grid systems for complex layouts

3. Styling Approaches

• CSS methodologies

  • Use Tailwind utility classes for rapid development