skills.rest
ENG-BXI
ENG-BXICOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-patterns

Standardize React and Next.js component, state, data-fetching, performance, and accessibility patterns.

1|Updated Jan 28, 2026
Search Tags:#accessibility#state management#react#performance optimization#nextjs#component patterns#ui best practices
One-click install
npx skills add https://github.com/ENG-BXI/SAAS-SMART-SHIPMENT-TRACKING-CLIENT-SIDE --skill frontend-patterns-eng-bxi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-patterns
Source: https://github.com/ENG-BXI/SAAS-SMART-SHIPMENT-TRACKING-CLIENT-SIDE/tree/main/.agents/skills/frontend-patterns
Command: npx skills add https://github.com/ENG-BXI/SAAS-SMART-SHIPMENT-TRACKING-CLIENT-SIDE --skill frontend-patterns-eng-bxi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often ship inconsistent component behavior, accessibility gaps, and performance regressions because React/Next.js code patterns are applied ad hoc instead of consistently.

Core Features & Use Cases

  • Component composition and compound patterns: Use predictable structures (e.g., shared layout wrappers, tabs with context) that scale as features grow.
  • State and data-fetching architecture: Choose suitable state approaches and integrate client/server data workflows without tangled effects.
  • Performance and UX polish: Apply memoization, virtualization, and efficient rendering strategies to keep interfaces responsive.
  • Accessibility and focus correctness: Implement keyboard navigation and focus management for modals and interactive widgets.

Quick Start

Ask the skill to propose a component architecture and accessibility-compliant interaction model for your new React/Next.js UI feature, then provide example code following best practices.

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 component patterns for building scalable UIs?▼

React state management without tangled effects involves choosing suitable state approaches and integrating client/server data workflows, allowing components to fetch and synchronize data directly rather than relying on manual effect-driven updates.

How do I manage React state and data fetching without tangled effects?▼

React state management without tangled effects involves choosing suitable state approaches and integrating client/server data workflows, allowing components to fetch and synchronize data directly rather than relying on manual effect-driven updates.

How do I implement keyboard navigation and focus management for modals in Next.js?▼

Keyboard navigation and focus management for modals in Next.js require accessibility-focused interaction models that trap focus within interactive widgets and correctly restore focus upon closing to ensure compliant user experiences.

What's the best way to optimize React performance and prevent rendering regressions?▼

Optimizing React performance to prevent rendering regressions involves applying memoization, virtualization, and efficient rendering techniques that keep interfaces responsive during complex state updates and large list rendering.

Can I use this to standardize UI behavior across a large Next.js codebase?▼

Yes, you can standardize UI behavior across a large Next.js codebase by applying consistent component architecture, state management, and accessibility patterns rather than relying on ad hoc implementation choices across different teams.

Related Skills

Explore More Software Engineering Skills→
markhamsquareventuresmarkhamsquareventures

react

Create typed React components with Inertia props for Laravel projects.

Official
Intermediate
PrasadTelasulaPrasadTelasula

component-testing

Test React components with React Testing Library and Playwright for frontend correctness.

Community
Intermediate
duylinhdang1998duylinhdang1998

react-expert

Guide React component design, hooks, state management, and performance optimization.

Community
Advanced
MaxKlat29MaxKlat29

ui-styling

Style React apps with Tailwind CSS and shadcn/ui components.

Community
Intermediate