skills.rest
rodrigobranas
rodrigobranasCOMMUNITY
Explore all skills by this author →
Website𝕏@rodrigobranasGitHub

react

Consolidate React 19+ development guidelines for components, hooks, state, TypeScript, and tests.

1|1|Updated Apr 18, 2026
Search Tags:#typescript#vitest#testing#frontend#react#hooks#patterns
One-click install
npx skills add https://github.com/rodrigobranas/formacao_ia_arq_t1_4 --skill react-rodrigobranas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/rodrigobranas/formacao_ia_arq_t1_4/tree/main/mastra-rag/.agents/skills/react
Command: npx skills add https://github.com/rodrigobranas/formacao_ia_arq_t1_4 --skill react-rodrigobranas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The React development guide helps teams standardize component architecture, hooks usage, state management patterns, TypeScript integration, and testing practices across frontend projects, reducing divergence and speeding delivery.

Core Features & Use Cases

  • Clear guidance on functional components, single-responsibility principles, separation of concerns with custom hooks, feature-based organization, and modern React 19+ features.
  • Established patterns for TypeScript integration, data fetching, error handling, testing with Vitest, and accessible UI design.
  • Use cases include building robust components, writing custom hooks, applying consistent patterns across screens, and validating code with tests.

Quick Start

Read the references/best-practices.md and references/useeffect-patterns.md to apply the guidelines to your React code.

Frequently Asked Questions about react

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

FAQPage Schema
How do I standardize React component architecture and hooks usage across my team?▼

For React state management, apply established patterns for data fetching and error handling using modern React 19+ features. Consolidate development guidelines to ensure consistent state handling and robust component design across your frontend application.

What is the best way to integrate TypeScript into React 19+ projects?▼

The best way to integrate TypeScript into React 19+ projects is by applying established patterns for type safety within functional components and custom hooks. This ensures robust UI design and consistent frontend code across the codebase.

How do I write tests for React hooks and components using Vitest?▼

Write tests for React hooks and components using Vitest by validating code against established frontend guidelines. This ensures your functional components, state management, and TypeScript integration perform reliably and maintain high quality.

Does this React guide support feature-based organization and separation of concerns?▼

Yes, this React guide supports feature-based organization and separation of concerns. It enforces these patterns alongside single responsibility principles and custom hooks extraction to standardize frontend development and reduce codebase divergence.

Related Skills

Explore More Software Engineering Skills→
SnakeOSnakeO
9

refactor:react

Refactor React 19 TypeScript components by extracting custom hooks and memoizing.

Community
Advanced
ynittoynitto
1

react-frontend-unit-tester

Automate frontend unit testing for React components and Zustand stores.

Community
Intermediate
patricio0312revpatricio0312rev
5

eslint-prettier-config

Configure ESLint and Prettier for TypeScript and React projects.

Community
Advanced
MinhAnh-CorpMinhAnh-Corp

react-state-management

Provide structured React state management patterns for local, global, and server state.

Official
Advanced