react-development-patterns

Build accessible React components by applying WCAG guidelines during component design, using semantic HTML, ARIA attributes, and TypeScript for type-safe props. This Skill provides accessibility checklists and component templates that enforce these patterns from the start, ensuring your React 18+ UIs meet inclusive standards.

Separate server state from client state: use React Query for server-side data fetching and caching, and Zustand for client state management. This Skill guides you through both patterns, showing how to structure data flow efficiently across React applications and avoid redundant state logic.

Structure components using standardized patterns: separate data-fetching logic into service layers, create reusable component templates, and integrate APIs consistently. This Skill provides templates and patterns for basic and data-fetching components paired with robust API service layers, ensuring clean architecture.

Yes. TypeScript strong-typing is central to this Skill's component and service templates, enabling type-safe props, API responses, and state definitions. It reduces runtime errors and improves developer experience when building React 18+ applications with modern tooling.

Test React components by validating rendering, user interactions, and state changes using established testing patterns. This Skill includes component testing patterns alongside accessibility compliance checks, helping you write reliable, inclusive tests from component creation.

Use the component and API pattern templates in this Skill to scaffold features with built-in state management, data fetching, testing structure, and accessibility compliance. This ensures new React features adhere to modern best practices for component design and type safety from the outset.