skills.rest
johnpooch
johnpoochCOMMUNITY
Explore all skills by this author →
GitHub

react

Guide React development with component patterns, data fetching, forms, and testing.

12|5|Updated Dec 13, 2024
Search Tags:#testing#react#data fetching#component library#frontend development#form validation
One-click install
npx skills add https://github.com/johnpooch/diplicity-react --skill react-johnpooch
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/johnpooch/diplicity-react/tree/main/.claude/skills/react
Command: npx skills add https://github.com/johnpooch/diplicity-react --skill react-johnpooch

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and patterns for developing React applications, ensuring code quality, maintainability, and efficient use of modern React features and libraries.

Core Features & Use Cases

  • Component Development: Guidelines for creating reusable, well-structured React components, including patterns for complex UIs and migration strategies (e.g., Material UI to Radix UI).
  • Data Fetching & Management: Best practices for using TanStack Query and RTK Query, including error handling, caching, and real-time updates.
  • Form Handling: Standards for implementing forms with React Hook Form and Zod for robust validation and state management.
  • Testing: Strategies for writing effective unit and integration tests using Testing Library and MSW.
  • Use Case: When building a new feature that involves user input, data display, and interaction with an API, consult this Skill for guidance on component structure, data fetching, form validation, and testing to ensure a high-quality implementation.

Quick Start

Use the react skill to create a new component for displaying user profiles, following the guidelines for component structure and data fetching.

Frequently Asked Questions about react

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

FAQPage Schema
How do I handle data fetching in React using TanStack Query?▼

To fetch data in React with TanStack Query, apply best practices for error handling, caching, and real-time updates to maintain robust state management and efficient UI rendering.

What is the best way to validate forms in React?▼

The best way to validate forms in React is using React Hook Form combined with Zod, which provides robust validation schemas and efficient state management for user input.

How do I write unit and integration tests for React components?▼

Writing tests for React components involves using Testing Library and MSW to implement effective unit and integration testing strategies, ensuring reliable component behavior and interactions.

Can I migrate a React UI library from Material UI to Radix UI?▼

Yes, you can migrate a React UI library from Material UI to Radix UI by following specific component migration strategies and patterns to maintain reusable and well-structured UIs.

Does this React guidance cover modern React 19 features and performance optimization?▼

Yes, this React guidance addresses modern React 19 features and includes performance optimization strategies to improve code quality, maintainability, and application efficiency.

Related Skills

Explore More Software Engineering Skills→
aaronbassettaaronbassett

compact-core:compilation-tooling

Configure the Compact compiler and interpret zkir, keys, and TypeScript outputs.

Community
Advanced
reomgitreomgit

setup-deploy

Detect deployment platforms and write configuration settings to CLAUDE.md.

Community
Advanced
ChenYCLChenYCL

web-artifacts-builder

Generate HTML artifacts with React, Tailwind CSS, and shadcn/ui components.

Community
Intermediate
leksaleksa

vuejs-development

Guide frontend developers in building Vue.js 3 applications with the Composition API.

Community
Advanced