skills.rest
gwpjp
gwpjpCOMMUNITY
Explore all skills by this author →
GitHub

react-specialist

Design scalable React 18+ architectures with component libraries and hook patterns.

3|Updated Jan 31, 2026
Search Tags:#architecture#performance#react#hooks#ui-design#component-library
One-click install
npx skills add https://github.com/gwpjp/Web3-Claude --skill react-specialist-gwpjp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-specialist
Source: https://github.com/gwpjp/Web3-Claude/tree/main/.claude/skills/react-specialist
Command: npx skills add https://github.com/gwpjp/Web3-Claude --skill react-specialist-gwpjp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides teams to design scalable React architectures, optimize performance, and implement reusable component patterns, leveraging a common component library to accelerate UI development.

Core Features & Use Cases

  • Component architecture design for scalable UI modules across React 18+ apps
  • Performance optimization and advanced hook design to reduce re-renders
  • Reusable component library integration and state management patterns
  • Collaboration with theme-ui-specialist and typescript-specialist for consistent theming and typing
  • Use Case: Architect a new dashboard by outlining components, hooks, and data flow, then generate a ready-to-implement scaffold

Quick Start

Provide a React UI task (e.g., design a dashboard with reusable Card, Button, and List components) and request an architecture plan, hook design, and performance improvements. For UI/styling tasks, route changes through /ui-designer.

Frequently Asked Questions about react-specialist

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

FAQPage Schema
How do I design a scalable React architecture for a new dashboard?▼

Optimize React performance and reduce re-renders by applying advanced hook design. Designing custom hooks with proper dependency arrays and memoization ensures scalable component architecture across your application.

What is the best way to build a reusable component library in React 18?▼

Building a reusable component library in React 18 involves establishing consistent patterns for components, hooks, and state management. Project rules in docs must be enforced to maintain architectural consistency across all UI modules.

Does this React architecture approach work with TypeScript and theme-ui?▼

This React architecture approach collaborates with typescript-specialist and theme-ui-specialist. Routing UI and styling tasks through dedicated design tools ensures consistent typing and theming alongside your component library integration.

Can I use this for performance optimization across existing React projects?▼

You can use this for performance optimization across React 18+ projects. It refines scalable React architectures by applying advanced hook design and reusable component patterns to reduce unnecessary re-renders in existing applications.

When should I route UI styling tasks to a dedicated designer instead of the component architect?▼

You should route UI styling tasks to a dedicated designer when implementing visual changes. The React architecture Skill focuses on component structure, hook design, and performance, directing styling execution through /ui-designer.

Related Skills

Explore More Software Engineering Skills→
Aniket-a14Aniket-a14
22

design-system-patterns

Define design tokens and implement theming with CSS custom properties.

Community
Advanced
SalesforceCommerceCloudSalesforceCommerceCloud
51

b2c-scaffold

Scaffold B2C Commerce components from built-in templates.

Official
Basic
itou-daikiitou-daiki

coding-standards

Enforce coding standards across TypeScript, JavaScript, React, and Node.js projects.

Community
Advanced
CinderZhangCinderZhang
3

implement-screen

Builds and runs Streamlit apps and React UIs for iterative visual feedback.

Community
Intermediate