react

Generate React/TypeScript components with performance and accessibility standards.

Updated May 23, 2026
One-click install
npx skills add https://github.com/devturco/thiago-dev-template --skill react-devturco
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/devturco/thiago-dev-template/tree/main/.claude/skills/react
Command: npx skills add https://github.com/devturco/thiago-dev-template --skill react-devturco

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents slow, hard-to-maintain React code by enforcing modern component structure, performance patterns, and accessibility standards.

Core Features & Use Cases

  • Modern React architecture: Guides component layout, named exports, and consistent file/directory naming to keep UI codebases clean.
  • Performance optimization: Recommends minimizing unnecessary client rendering, using useCallback/useMemo, Suspense fallbacks, and dynamic imports.
  • Accessible, production-ready UI: Ensures interactive elements include keyboard navigation and ARIA attributes, with comprehensive user-friendly error handling.

Quick Start

Ask the skill to generate a React component plan and implementation that follows the repo’s React conventions for a new feature you describe.

Frequently Asked Questions about react

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

FAQPage Schema
How do I build accessible React UI components with TypeScript?▼

Build accessible React UI components by enforcing function-based structures with named exports, ensuring interactive elements include keyboard navigation and ARIA attributes, and implementing robust user-friendly error handling for production readiness.

What's the best way to optimize React rendering performance and prevent unnecessary re-renders?▼

Prevent unnecessary React re-renders by applying performance hooks like useCallback and useMemo, implementing Suspense fallbacks, and utilizing dynamic imports to minimize client rendering overhead in modern app architectures.

How do I structure a maintainable React component directory using Tailwind CSS?▼

Structure maintainable React components by enforcing consistent file and directory naming, applying Tailwind-only styling rules, and using named exports for function-based components to keep your UI codebase clean and organized.

Do I need to use Suspense and dynamic imports for React client boundaries?▼

Yes, implementing safe React client boundaries requires Suspense fallbacks and dynamic imports to handle asynchronous component loading gracefully, preventing slow rendering behavior and ensuring robust error handling.

Why should I enforce named exports for function-based React components?▼

Enforcing named exports for function-based React components ensures consistent architecture, enables reliable static imports, and prevents hard-to-maintain code by keeping modern UI codebases clean and predictable.