What libraries does this skill specialize in?

This skill is primarily focused on the React and Next.js ecosystem, including state management tools like Zustand, data fetching with React Query/SWR, and UI animations with Framer Motion.

Can it help with form validation?

Absolutely. It includes patterns for controlled components and schema-based validation (e.g., Zod) to ensure type-safe and user-friendly form handling.

How does it help with web performance?

It implements industry-standard optimization patterns such as React.memo, useMemo, useCallback, code splitting via Suspense, and list virtualization to minimize re-renders and load times.

Does this skill provide Korean documentation?

Yes, this skill is part of the docs-ko-KR collection and provides specialized guidance and patterns in Korean for developers working in that locale.

Frontend Engineering Patterns

Name: Frontend Engineering Patterns
Author: affaan-m

byaffaan-m

•

156,032

•

Design Tools

Implements high-performance React and Next.js architectural patterns to build scalable, maintainable, and accessible user interfaces.

This skill provides a comprehensive library of modern frontend development patterns specifically tailored for React and Next.js ecosystems. It equips Claude with the expertise to implement advanced architecture such as compound components, render props, and custom hooks for complex state management. Beyond basic UI, the skill focuses on performance-critical optimizations including memoization, code splitting, and virtualization, ensuring that even data-heavy applications remain responsive and production-ready.

Key Features

01Comprehensive state management strategies using Context, Reducers, and Hooks

02Robust form handling and validation patterns with Zod integration

03Performance tuning via memoization, lazy loading, and list virtualization

04Seamless animation and interactive UI patterns using Framer Motion

05Advanced React component patterns like Composition and Compound Components

06156,032 GitHub stars

Use Cases

01Optimizing dashboard performance for high-frequency data updates

02Architecting scalable state management for complex enterprise applications

03Refactoring monolithic React components into reusable, composable patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add affaan-m/everything-claude-code frontend-patterns

For use in Claude.ai and ChatGPT

Key Features

01Comprehensive state management strategies using Context, Reducers, and Hooks

02Robust form handling and validation patterns with Zod integration

03Performance tuning via memoization, lazy loading, and list virtualization

04Seamless animation and interactive UI patterns using Framer Motion

05Advanced React component patterns like Composition and Compound Components

06156,032 GitHub stars

Use Cases

01Optimizing dashboard performance for high-frequency data updates

02Architecting scalable state management for complex enterprise applications

03Refactoring monolithic React components into reusable, composable patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add affaan-m/everything-claude-code frontend-patterns

For use in Claude.ai and ChatGPT