react-frontend

Standardize React frontend development with hooks, state management, testing, and accessibility patterns.

17|1|Updated Jun 8, 2025

Search Tags:#testing #performance #accessibility #react #hooks

Ready to run

npx skills add https://github.com/williamzujkowski/standards --skill react-frontend

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-frontend
Source: https://github.com/williamzujkowski/standards/tree/main/skills/frontend/react
Command: npx skills add https://github.com/williamzujkowski/standards --skill react-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes templates (resource) components.

What problem does it solve?

React Frontend standards cover hooks usage, state management, performance optimization, testing, and accessibility.

Core Features & Use Cases

Hooks & State: useState, useEffect, useContext, useMemo, useCallback patterns.
Performance: Memoization, code splitting, and virtualized lists.
Testing & Accessibility: RTL testing patterns and ARIA guidelines.

Quick Start

Build a React app using functional components with hooks and add a unit test for a small component.

Frequently Asked Questions about react-frontend

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

FAQPage Schema

How do I structure React components using hooks for scalable applications?▼

Hooks like useState, useEffect, useContext, useMemo, and useCallback enable functional component patterns that scale. This Skill provides prescriptive patterns and runnable examples for organizing state, side effects, and performance optimization across modern SPAs using hooks-based architecture.

What's the best way to test React components with React Testing Library?▼

React Testing Library testing patterns validate component behavior from the user's perspective. This Skill supplies RTL testing standards, configuration references including jest.config.js, and linting guidance to ensure consistent, maintainable test coverage across your React frontend.

How do I optimize React app performance with code splitting and memoization?▼

Performance optimization combines memoization, lazy loading, and code splitting to reduce bundle size and render overhead. This Skill documents these techniques with configuration examples and best practices for functional components, enabling faster SPAs.

Can I build accessible React apps that meet WCAG 2.1 and ARIA standards?▼

Yes. This Skill standardizes accessibility practices including WCAG 2.1 compliance and ARIA guidelines for React frontends. It provides documentation and patterns to ensure functional components, hooks, and state management work with assistive technologies.

What state management approach should I use—Context API, Redux, or Zustand?▼

Context API, Redux, and Zustand each suit different complexity levels. This Skill covers patterns for all three, helping you choose based on your app's scale and requirements, with prescriptive guidance and configuration references for consistent implementation.

Why does my React component re-render unnecessarily and how do I fix it?▼

Unnecessary re-renders stem from missing memoization or inefficient dependency arrays in hooks. This Skill provides useMemo and useCallback patterns, performance optimization techniques, and linting standards to prevent re-render performance bottlenecks in functional components.