# frontend-builder

> Build reusable frontend pages, components, and layouts with responsive styling. Focus on modern UI design patterns.

- Author: ayeshaqadir
- Repository: AyeshaQadir7/taskie-todo-app
- Version: 20260120033124
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/AyeshaQadir7/taskie-todo-app
- Web: https://mule.run/skillshub/@@AyeshaQadir7/taskie-todo-app~frontend-builder:20260120033124

---

---
name: frontend-builder
description: Build reusable frontend pages, components, and layouts with responsive styling. Focus on modern UI design patterns.
---

# Frontend Layout & Components

## Instructions

1. **Page Layout**

   - Use semantic HTML (`<header>`, `<main>`, `<footer>`, `<section>`)
   - Implement responsive grids (CSS Grid or Flexbox)
   - Include consistent spacing and alignment

2. **Components**

   - Buttons, cards, modals, forms
   - Reusable component classes with modular CSS
   - Include interactive states (hover, focus, active)

3. **Styling**

   - Use variables or CSS custom properties for colors, fonts, spacing
   - Apply responsive typography
   - Ensure sufficient color contrast
   - Add subtle transitions for interactivity

4. **Responsive Design**
   - Mobile-first approach
   - Breakpoints for tablets and desktops
   - Components should adapt fluidly to different screen sizes

## Best Practices

- Keep code modular and reusable
- Maintain visual consistency (colors, spacing, typography)
- Test components on multiple devices
- Optimize for accessibility (ARIA attributes, keyboard navigation)