Frontend Development Patterns
Modern frontend patterns for React, Next.js, and performant user interfaces.
Agent Frontend Patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
Dokhacgiakhoa
Updated Agent Frontend Patterns by Dokhacgiakhoa · 8047c2b
npx skillmds@latest add dokhacgiakhoa/agent-frontend-patterns File contents
---name: agent-frontend-patternsdescription: Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.---
# 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)
Dokhacgiakhoa/Agent-Skills-4-Vibe-Coding-CLI/tree/main/.agent/skills/agent-frontend-patterns commit 8047c2b251
Frequently asked questions
Run npx skillmds@latest add dokhacgiakhoa/agent-frontend-patterns in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Dokhacgiakhoa (@dokhacgiakhoa) published this skill. Their other Agent Skills are listed on their SkillMD profile.