Skills
.Work. You
Rest

web-react

Community

Structure React apps with clean patterns.

Software Engineering#architecture#react#hooks#patterns#state-management#apollo
AuthorAlexanderStephenThompson
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: web-react
Download link: https://github.com/AlexanderStephenThompson/claude-hub/archive/main.zip#web-react

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.