frontend-patterns

Frontend Patterns is a guidance skill that collects modern React and Next.js development patterns into a single reference. It solves the problem of inconsistent, hard-to-maintain frontend code by demonstrating well-established idioms for component design, state management, data fetching, and performance, each illustrated with TypeScript examples. It is meant to activate when building components, managing state, fetching data, optimizing rendering, handling forms, or building accessible, responsive UI.

The single SKILL.md document walks through component patterns (composition over inheritance, compound components using Context, and render props), custom hooks (a toggle hook, an async data-fetching useQuery hook with ref-based stability to avoid infinite fetch loops, and a debounce hook), and state-management approaches (Context plus reducer, with mentions of Zustand and React Query for larger apps). Data fetching, memoization, virtualization, code splitting, form validation with Zod, and client-side routing are named as in-scope concerns. The examples are practical and emphasize correct dependency handling and referential stability.

It targets React and Next.js developers—particularly those working on component libraries or performant single-page and server-rendered apps—who want a consistent set of conventions to follow or to guide an AI assistant. It is documentation only, with no scripts or tooling, so it acts as a pattern catalogue and teaching aid rather than an automated generator. Its origin metadata marks it as part of the "ECC" collection.