skills.rest
AlexanderStephenThompson
AlexanderStephenThompsonCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-react

Organize React projects with Apollo Client using component and hooks patterns.

Updated Aug 23, 2026
Search Tags:#architecture#react#hooks#patterns#state-management#apollo
One-click install
npx skills add https://github.com/AlexanderStephenThompson/claude-hub --skill web-react
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-react
Source: https://github.com/AlexanderStephenThompson/claude-hub/tree/main/web/skills/web-react
Command: npx skills add https://github.com/AlexanderStephenThompson/claude-hub --skill web-react

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers organize React projects using established patterns to reduce complexity and improve maintainability.

Core Features & Use Cases

  • Component-based architecture: split UI into cohesive, reusable parts with colocated logic (component + styles + tests).
  • Hooks-driven logic: extract business logic into custom hooks to keep components focused.
  • Apollo client patterns: useQuery and useMutation with cache-aware updates to manage server state efficiently.

Quick Start

  1. Create a new React project (e.g., npx create-react-app my-app) and install @apollo/client and graphql.
  2. Scaffold a small feature (e.g., Products) following the recommended structure (components/ hooks/ graphql/ pages).
  3. Implement data fetch with useQuery and a mutation with useMutation, ensuring data flows from server to UI without duplicating state.

Frequently Asked Questions about web-react

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

FAQPage Schema
How do I organize a React project structure to reduce complexity and improve maintainability?▼

Organize React projects by splitting UI into reusable components with colocated logic, extracting business logic into custom hooks, and managing server state with Apollo Client patterns to enforce clean data flow and predictable state management.

What is the best way to manage server state in React with Apollo Client?▼

Manage server state in React with Apollo Client by using useQuery for data fetching and useMutation for cache-aware updates, ensuring data flows from server to UI without duplicating state in local components.

How do I separate business logic from React components using custom hooks?▼

Separate business logic from React components by extracting it into custom hooks, keeping components focused on rendering while hooks handle data fetching, mutations, and state management logic.

Do I need npm and Apollo Client to use these React architecture patterns?▼

Yes, these React architecture patterns require a React plus Apollo Client environment with npm-based setup, including @apollo/client and graphql packages, to implement useQuery and useMutation workflows.

How do I scaffold a React feature following clean architecture patterns?▼

Scaffold a React feature using a directory structure with separate folders for components, hooks, graphql, and pages, colocating component logic, styles, and tests to maintain cohesive and reusable project architecture.

Related Skills

Explore More Software Engineering Skills→
simnovasimnova
18

apollo-client

Set up Apollo Client 4.x in React apps for GraphQL data and local state.

Official
Advanced
SoSoBurnerSoSoBurner

setup-deploy

Detect deployment platforms and write configuration to CLAUDE.md.

Community
Intermediate
Camilo8902Camilo8902

graphql-schema-designer

Design GraphQL schemas with types, queries, mutations, and resolvers.

Community
Advanced
AI-Foundry-CoreAI-Foundry-Core
4

react-state-management

Manage React state across local, global, and server contexts.

Official
Advanced