skills.rest
Femad-6
Femad-6COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-patterns

Implements React and Next.js patterns for components, state management, performance, and accessibility.

Updated Mar 25, 2026
Search Tags:#typescript#accessibility#state management#frontend#react#performance optimization#nextjs
One-click install
npx skills add https://github.com/Femad-6/my-skills --skill frontend-patterns-femad-6
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/Femad-6/my-skills/tree/main/.github/skills/frontend-patterns
Command: npx skills add https://github.com/Femad-6/my-skills --skill frontend-patterns-femad-6

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend developers often reinvent solutions for common challenges like component composition, state management, form validation, and performance optimization, leading to inconsistent and hard-to-maintain React codebases. ## Core Features & Use Cases - Component Patterns: Provides composition, compound components, and render props patterns with TypeScript examples for building reusable UI. - State & Data Fetching: Includes custom hooks (useToggle, useQuery, useDebounce) and Context + Reducer patterns for managing application state. - Performance & Accessibility: Covers memoization, code splitting, list virtualization, keyboard navigation, and focus management for production-grade interfaces. - Use Case: When building a dashboard with a long market list, apply the virtualization pattern with @tanstack/react-virtual and lazy-load heavy chart components to keep rendering fast. ## Quick Start Ask the assistant to apply frontend patterns to build a React component with debounced search, memoized rendering, and accessible keyboard navigation.

Frequently Asked Questions about frontend-patterns

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

FAQPage Schema
How do I manage state in React without Redux?▼

Use the Context + Reducer pattern: create a context with useReducer, wrap your app in a provider, and expose a custom hook like useMarkets for consumers. This handles complex state transitions without external libraries.

How to optimize React performance for long lists?▼

Use list virtualization with @tanstack/react-virtual to render only visible rows, combined with React.memo for pure child components. Add useMemo for expensive computations and useCallback for stable function references passed to children.

What is the compound components pattern in React?▼

Compound components share implicit state through React Context, letting parent components like Tabs coordinate children like TabList and Tab. This creates flexible, declarative APIs where child order and composition stay under the caller's control.

Does React.lazy work with any component?▼

React.lazy works with default-exported components loaded via dynamic import, and must be wrapped in a Suspense boundary with a fallback UI. It is best suited for heavy components like charts or 3D backgrounds that are not needed on initial render.

How do I make a React modal accessible?▼

Add role="dialog" and aria-modal="true", move focus into the modal on open, restore focus to the previous element on close, and handle the Escape key to dismiss. Keyboard navigation patterns like arrow-key handling apply to dropdowns and menus as well.

Related Skills

Explore More Software Engineering Skills→
MicSingMicSing
1

frontend-patterns

Implements React component, state management, and performance optimization patterns for frontend development.

Community
Intermediate
genesis-agentsgenesis-agents
2

Testing Suite

Coordinate Jest, Vitest, and Playwright tests across CI/CD pipelines.

Community
Advanced
OmOc3OmOc3

optimize

Diagnose and fix UI performance issues in React and Next.js applications.

Community
Advanced
MinhAnh-CorpMinhAnh-Corp

react-state-management

Provide structured React state management patterns for local, global, and server state.

Official
Advanced