React Mastery

What problem does it solve?

This Skill provides comprehensive, up-to-date guidelines for React 18 development, ensuring frontend agents adhere to best practices across hooks, component composition, state management, performance, styling, and accessibility. It streamlines development, reduces bugs, and guarantees robust, maintainable applications.

Core Features & Use Cases

• Standardized Development: Enforces consistent patterns for React hooks, component structure, and state management using Apollo Client, eliminating guesswork.
• Performance Optimization: Guides on implementing memoization, lazy loading, and virtualization to ensure fast and efficient user interfaces.
• Accessibility & Error Handling: Provides clear instructions for WCAG 2.1 AA accessibility and robust error management, leading to inclusive and stable applications.
• Use Case: An AI agent developing a complex data table can leverage this Skill to correctly implement data fetching with Apollo, manage table state with TanStack Table, optimize rendering with useMemo, and ensure the component is accessible and responsive, all while adhering to strict coding standards.

Quick Start

Example: Fetching data with GraphQL Apollo Client

import { useQuery } from '@apollo/client/react' import { GET_DATA } from '@/graphql/queries'

const { data, loading, error } = useQuery(GET_DATA)

if (loading) return <Skeleton /> if (error) return <Alert variant="destructive">{error.message}</Alert> return <div>{data}</div>