How does it improve application performance?

It includes a performance checklist covering useMemo/useCallback usage, list virtualization, and efficient re-render prevention strategies.

Is this skill compatible with TypeScript?

While the core patterns are shown in JSX, the architectural principles and Apollo integration methods are fully compatible and recommended for TypeScript projects.

How does it handle component complexity?

It enforces a guideline where components should stay under 200 lines, encouraging developers to split UI into smaller, reusable responsibilities.

What core stack does the Web React skill support?

This skill is optimized for vanilla React (no framework abstractions) and Apollo Client for GraphQL state management.

Does this skill help with Apollo Client cache management?

Yes, it provides patterns for using the Apollo cache as the single source of truth, preventing the anti-pattern of duplicating server data in local state.

Web React & Apollo Patterns

Name: Web React & Apollo Patterns
Author: AlexanderStephenThompson

byAlexanderStephenThompson

デザインツール

Enforces best practices for vanilla React development and Apollo Client state management to ensure clean, maintainable code.

概要

The Web React skill provides Claude with a rigorous framework for building React applications without heavy framework abstractions. It focuses on the 'clean React' philosophy, emphasizing small component sizes, logic extraction through custom hooks, and efficient server state management via Apollo Client. By following these patterns, developers can avoid common pitfalls like prop drilling, server state duplication, and monolithic component files, resulting in a scalable and high-performance frontend architecture.

主な機能

0 GitHub stars
Feature-based file organization and standardized naming conventions
Logic extraction patterns for creating reusable custom React hooks
Advanced Apollo Client patterns for optimistic updates and cache management
Anti-pattern detection for improper useEffect usage and prop drilling
Strict component size guidelines to prevent monolithic code blocks

ユースケース

Establishing a standardized directory structure for new React projects
Refactoring complex React components into modular, functional units
Architecting GraphQL-powered state management using Apollo Client's cache

概要

主な機能

0 GitHub stars
Feature-based file organization and standardized naming conventions
Logic extraction patterns for creating reusable custom React hooks
Advanced Apollo Client patterns for optimistic updates and cache management
Anti-pattern detection for improper useEffect usage and prop drilling
Strict component size guidelines to prevent monolithic code blocks

ユースケース

Establishing a standardized directory structure for new React projects
Refactoring complex React components into modular, functional units
Architecting GraphQL-powered state management using Apollo Client's cache