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

0•

Design Tools

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.

Key Features

010 GitHub stars

02Feature-based file organization and standardized naming conventions

03Logic extraction patterns for creating reusable custom React hooks

04Advanced Apollo Client patterns for optimistic updates and cache management

05Anti-pattern detection for improper useEffect usage and prop drilling

06Strict component size guidelines to prevent monolithic code blocks

Use Cases

01Establishing a standardized directory structure for new React projects

02Refactoring complex React components into modular, functional units

03Architecting GraphQL-powered state management using Apollo Client's cache

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add alexanderstephenthompson/claude-hub web-react

For use in Claude.ai and ChatGPT

Download Skill