# frontend-patterns

- Author: xsifaiza-rakbank
- Repository: faizal13/everything-copilot
- Version: 20260209192458
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-09
- Source: https://github.com/faizal13/everything-copilot
- Web: https://mule.run/skillshub/@@faizal13/everything-copilot~frontend-patterns:20260209192458

---

# Frontend Patterns Skill

## Name
Frontend Patterns

## Description
Client-side architecture patterns for building maintainable, performant, and accessible user interfaces. Covers React, state management, responsive design, and performance optimization.

## Trigger Conditions
- Working on React components or hooks
- UI/UX implementation tasks
- CSS, styling, or responsive design work
- Frontend performance optimization
- State management decisions
- Client-side routing or data fetching
- Files matching: `*.tsx`, `*.jsx`, `*.css`, `*.scss`, `*.module.css`

## Files
- `react-patterns.md` — Component composition, hooks, rendering optimization
- `state-management.md` — Local state, Context, Redux, Zustand, server state
- `responsive-design.md` — Mobile-first, breakpoints, fluid typography, container queries
- `performance.md` — Code splitting, lazy loading, virtualization, Web Vitals

## Model Recommendation
- **Sonnet** for implementation and component design
- **Haiku** for quick CSS fixes and formatting
- **Opus** for complex architecture decisions (micro-frontends, module federation)