Agent Frontend Patterns

---
name: agent-frontend-patterns
description: Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
author: affaan-m
version: 4.1.0-fractal
---

# Frontend Development Patterns

Modern frontend patterns for React, Next.js, and performant user interfaces.

## Component Patterns

## 🧠 Knowledge Modules (Fractal Skills)

### 1. [Composition Over Inheritance](./sub-skills/composition-over-inheritance.md)
### 2. [Compound Components](./sub-skills/compound-components.md)
### 3. [Render Props Pattern](./sub-skills/render-props-pattern.md)
### 4. [State Management Hook](./sub-skills/state-management-hook.md)
### 5. [Async Data Fetching Hook](./sub-skills/async-data-fetching-hook.md)
### 6. [Debounce Hook](./sub-skills/debounce-hook.md)
### 7. [Context + Reducer Pattern](./sub-skills/context-reducer-pattern.md)
### 8. [Memoization](./sub-skills/memoization.md)
### 9. [Code Splitting & Lazy Loading](./sub-skills/code-splitting-lazy-loading.md)
### 10. [Virtualization for Long Lists](./sub-skills/virtualization-for-long-lists.md)
### 11. [Controlled Form with Validation](./sub-skills/controlled-form-with-validation.md)
### 12. [Framer Motion Animations](./sub-skills/framer-motion-animations.md)
### 13. [Keyboard Navigation](./sub-skills/keyboard-navigation.md)
### 14. [Focus Management](./sub-skills/focus-management.md)