Agent Frontend Patterns

dokhacgiakhoa/agent-frontend-patterns

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

4k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

505

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/Dokhacgiakhoa/Agent-Skills-4-Vibe-Coding-CLI --skill agent-frontend-patterns

What comes with it

13 959 bytes besides the instruction

sub-skills/async-data-fetching-hook.md

sub-skills/code-splitting-lazy-loading.md

sub-skills/composition-over-inheritance.md

sub-skills/compound-components.md

sub-skills/context-reducer-pattern.md

sub-skills/controlled-form-with-validation.md

sub-skills/debounce-hook.md

sub-skills/focus-management.md

sub-skills/framer-motion-animations.md

sub-skills/keyboard-navigation.md

sub-skills/memoization.md

sub-skills/render-props-pattern.md

sub-skills/state-management-hook.md

sub-skills/virtualization-for-long-lists.md

The instruction itself

17 sections, as written by the author

Frontend Development Patterns

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

Component Patterns

🧠 Knowledge Modules (Fractal Skills)

1. Composition Over Inheritance

2. Compound Components

3. Render Props Pattern

4. State Management Hook

5. Async Data Fetching Hook

6. Debounce Hook

7. Context + Reducer Pattern

8. Memoization

9. Code Splitting & Lazy Loading

10. Virtualization for Long Lists

11. Controlled Form with Validation

12. Framer Motion Animations

14. Focus Management

How to use it

Copy the folder

Take dokhacgiakhoa/agent-frontend-patterns from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.