# Agent Frontend Patterns

> Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

- Skill: `dokhacgiakhoa/agent-frontend-patterns` (Agent Skill, multi-file: 15 files)
- Install (CLI): `npx skillmds@latest add dokhacgiakhoa/agent-frontend-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dokhacgiakhoa/agent-frontend-patterns/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Dokhacgiakhoa (https://skillmd.com/u/dokhacgiakhoa)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/dokhacgiakhoa/agent-frontend-patterns

---


# 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)