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.