skills.rest
salverius-tech
salverius-techCOMMUNITY
Explore all skills by this author →
GitHub

react-workflow

Guide React development with functional components, hooks, and Server Components.

Updated Apr 11, 2023
Search Tags:#typescript#best practices#frontend#react#javascript#component development
One-click install
npx skills add https://github.com/salverius-tech/dotfiles --skill react-workflow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-workflow
Source: https://github.com/salverius-tech/dotfiles/tree/main/home/dot_claude/skills/react-workflow
Command: npx skills add https://github.com/salverius-tech/dotfiles --skill react-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive set of guidelines and best practices for developing React applications, ensuring consistency, maintainability, and performance.

Core Features & Use Cases

  • Component Best Practices: Enforces functional components, PascalCase naming, and typed props.
  • Modern React Features: Guides on using useActionState, useFormStatus, useOptimistic, and use().
  • Server Components (RSC): Defines patterns for Server Components and Client Components.
  • Testing & Accessibility: Promotes accessible testing with Testing Library and ARIA standards.
  • State Management & Hooks: Recommends state hierarchy and custom hook patterns.

Quick Start

Follow the guidelines in this skill to refactor an existing React component to use functional components and typed props.

Frequently Asked Questions about react-workflow

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

FAQPage Schema
What are the best practices for building React components with TypeScript?▼

React component best practices involve using functional components, enforcing PascalCase naming, and utilizing typed props to ensure consistency and maintainability across your application.

How do I use React 19 hooks like useActionState and useFormStatus?▼

Modern React development guides you on using hooks like useActionState, useFormStatus, useOptimistic, and use() to manage state and handle form submissions effectively.

When should I use Server Components versus Client Components in React?▼

Server Components (RSC) patterns define when to render data-fetching or static UI on the server, while Client Components handle interactivity, state, and browser APIs.

How do I test React components for accessibility using Testing Library?▼

Accessible React testing with Testing Library promotes querying elements by their accessible roles and ARIA standards, ensuring your components are both functional and usable.

What is the recommended way to handle errors with Error Boundaries in React?▼

React error handling with Error Boundaries involves wrapping component trees to catch JavaScript errors, log them, and display a fallback UI instead of crashing the app.

Related Skills

Explore More Software Engineering Skills→
adamhjkadamhjk
2

solid-typescript

Configure TypeScript and SolidJS for strongly-typed component development.

Community
Advanced
jyang234jyang234

testing

Codifies comprehensive testing standards for Go projects and test suites.

Community
Advanced
xxihxxih
1

frontend-patterns

Implement React and Next.js patterns for component composition, state hooks, and performance.

Community
Advanced
HardyLiu6HardyLiu6

gsap-frameworks

Animate components in Vue, Svelte, and other non-React frameworks.

Community
Intermediate