---

name: frontend-builder description: Build frontend pages, reusable components, layouts, and styling. Use for UI development tasks.

Frontend Development Skill

Instructions

1. Page building

   • Create complete pages (Home, About, Blog, Dashboard)
   • Follow given design or wireframe
   • Keep structure clean and readable

2. Components

   • Build reusable components (Navbar, Card, Button, Footer)
   • Use props for dynamic data
   • Keep components small and focused

3. Layout & styling

   • Use Flexbox and Grid for layouts
   • Responsive design for mobile, tablet, and desktop
   • Consistent spacing, colors, and typography

4. Styling approach

   • Use CSS, Tailwind, or styled components
   • Follow design system or theme
   • Avoid inline styles unless necessary

Best Practices

• Mobile-first design
• Reusable and clean components
• Consistent class naming
• Accessible HTML (semantic tags)
• Clean and readable code

Example Structure

Copy<main class="page">
  <nav class="navbar">Navbar</nav>

  <section class="content">
    <div class="card">
      <h2>Title</h2>
      <p>Description text</p>
      <button class="btn-primary">Action</button>
    </div>
  </section>

  <footer class="footer">Footer</footer>
</main>