skills.rest
BinyaminEden
BinyaminEdenCOMMUNITY
Explore all skills by this author →
GitHub

frontend-patterns

Provide React and Next.js implementation patterns for components, state, performance, and accessibility.

26|1|Updated Mar 19, 2026
Search Tags:#performance#accessibility#frontend#react#next.js#state-management#component-patterns
One-click install
npx skills add https://github.com/BinyaminEden/claude-combine --skill frontend-patterns-binyamineden
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/BinyaminEden/claude-combine/tree/main/skills/frontend-patterns
Command: npx skills add https://github.com/BinyaminEden/claude-combine --skill frontend-patterns-binyamineden

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend developers frequently face inconsistent component implementations, performance bottlenecks, accessibility gaps, and unmaintainable state management in React and Next.js applications, leading to technical debt, poor user experiences, and slowed development velocity.

Core Features & Use Cases

  • Standardized Component Patterns: Composition, compound components, and render props for reusable, maintainable UI building blocks.
  • Scalable State Management: Context + reducer patterns and custom hooks for predictable, centralized state handling.
  • Performance & Accessibility Best Practices: Memoization, code splitting, virtualization, keyboard navigation, and focus management for fast, inclusive user interfaces. A common use case is building a data-heavy dashboard: use this skill to implement virtualized lists and memoized components to eliminate rendering lag, while adding proper keyboard navigation to meet accessibility standards.

Quick Start

Use the frontend-patterns skill to add a performant, accessible virtualized list of product cards to your React e-commerce product page.

Frequently Asked Questions about frontend-patterns

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

FAQPage Schema
How do I optimize React component rendering performance for data-heavy dashboards?▼

Optimize React component rendering performance using memoization, code splitting, and list virtualization to eliminate rendering bottlenecks. These production-ready patterns ensure fast user interfaces while preventing lag in data-heavy dashboards.

What's the best way to manage scalable state in Next.js applications?▼

Manage scalable state in Next.js using Context with reducer patterns and custom hooks for predictable, centralized state handling. This approach reduces unmaintainable state management technical debt and ensures consistent team frontend development standards.

How do I implement WCAG-compliant accessibility in a React UI?▼

Implement WCAG-compliant accessibility in React by applying keyboard navigation and focus management patterns. These vetted implementation patterns satisfy requirements for inclusive user interfaces and eliminate accessibility gaps in web applications.

When should I use compound components vs render props in React?▼

Use compound components and render props in React for standardized, reusable UI building blocks. These component design patterns provide composition methods for maintainable codebases, reducing inconsistent frontend implementations across development teams.

Does this frontend pattern collection require any external state management libraries?▼

No external state management libraries are required. This collection relies on native Context and reducer patterns alongside custom hooks, providing predictable state handling without adding dependencies to your React or Next.js workflow.

Related Skills

Explore More Software Engineering Skills→
windyskywindysky

moai-domain-frontend

Guide React 19, Next.js 16, and Vue 3.5 frontend architecture with reusable components.

Community
Advanced
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate
NabilThangeNabilThange
1

nextjs-best-practices

Guide Next.js developers on server and client component architecture and data fetching.

Community
Intermediate
mnthemnthe
4

frontend-patterns

Document reusable React UI patterns for components, state, and accessibility.

Community
Intermediate