skills.rest
a2mus
a2musCOMMUNITY
Explore all skills by this author →
GitHub

frontend-patterns

Identify frontend-patterns opportunities in React/Next.js components.

Updated Apr 6, 2026
Search Tags:#typescript#architecture#frontend#react#patterns#nextjs#state-management
One-click install
npx skills add https://github.com/a2mus/ecc-antigravity --skill frontend-patterns-a2mus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/a2mus/ecc-antigravity/tree/main/skills/frontend-patterns
Command: npx skills add https://github.com/a2mus/ecc-antigravity --skill frontend-patterns-a2mus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides structured frontend best practices and patterns for React and Next.js, covering component architecture, state management, data fetching, performance optimizations, accessibility, and TypeScript conventions to improve maintainability and scalability of web apps.

Core Features & Use Cases

  • Component patterns and co-location rules (e.g., ComponentCard with tests and styles) to keep related code together.
  • State management guidance: local UI state, derived state, and preferred global patterns with examples using React hooks and lightweight stores.
  • Data fetching and rendering strategies: server components by default with client data fetching when live updates are needed; patterns for caching and revalidation.
  • Performance and accessibility best practices: memoization, code splitting, image optimization, keyboard and screen-reader considerations.
  • Real-world use case: architect and implement a reusable product-card UI with clear separation of concerns and accessibility.

Quick Start

Review a React/Next.js component and apply the patterns for structure, state, data fetching, and accessibility to improve maintainability.

Frequently Asked Questions about frontend-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the best React and Next.js patterns for structuring components?▼

State management patterns for React recommend using local UI state and derived state with hooks, preferring lightweight stores for global state, and structuring data flow to maintain clear separation of concerns across client and server components.

How do I handle data fetching and caching in Next.js server and client components?▼

Data fetching in Next.js should default to server components, utilizing client data fetching only for live updates, while applying specific patterns for caching and revalidation to optimize rendering strategies.

Does this frontend architecture guidance include accessibility and performance optimizations?▼

Yes, the frontend architecture guidance includes accessibility and performance optimizations, covering memoization, code splitting, image optimization, and specific keyboard and screen-reader considerations for robust UI.

How do I architect a reusable React product card with TypeScript and proper state management?▼

To architect a reusable React product card with TypeScript, apply structured patterns for component architecture, state management, data fetching, and accessibility checklists to ensure clear separation of concerns and scalability.

When should I avoid using global state management in my React application?▼

You should avoid using global state management in React when dealing with local UI state or derived state, preferring React hooks and lightweight stores to maintain clear data flow and separation of concerns without unnecessary complexity.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
tyronerosstyroneross
1

design-validation

Audit live pages and native simulators for design and accessibility compliance.

Community
Advanced
JosiahSiegelJosiahSiegel
51

nextjs-data-fetching

Guide data fetching patterns in Next.js with server components and caching.

Community
Advanced
Tomlord1122Tomlord1122

frontend-architect

Plan frontend architectures with component patterns and state management strategies.

Community
Advanced