react

Generate React/TypeScript components with performance and accessibility standards.

Updated May 23, 2026

Search Tags:#typescript #architecture #performance #accessibility #react #tailwindcss #ui-components

Ready to run

npx skills add https://github.com/devturco/thiago-dev-template --skill react-devturco

💬 Prompt for ChatGPT / Claude Chat▼

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.