react

Codify React UI best practices for component design, state management, and performance.

9|1|Updated Feb 1, 2026

Search Tags:#ui #frontend #react #hooks #best-practices #component-design

Ready to run

npx skills add https://github.com/calcosmic/Aether --skill react-calcosmic

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react
Source: https://github.com/calcosmic/Aether/tree/main/.aether/skills-codex/domain/react
Command: npx skills add https://github.com/calcosmic/Aether --skill react-calcosmic

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent React UI development practices are codified into a concise set of guidelines to improve maintainability and team alignment.

Core Features & Use Cases

Component Design: Prefer function components with hooks and keep components small and focused.
State Management: Use useState and useReducer appropriately, and minimize prop drilling.
Performance Gotchas: Apply useMemo and useCallback judiciously and minimize re-renders.
File Organization: Group by feature, colocate related logic, tests, and styles.

Quick Start

Refactor an existing React UI component to a function component with hooks and extract reusable logic into a custom hook.

Frequently Asked Questions about react

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

FAQPage Schema

What are the best practices for React component design and state management?▼

Organize React UI projects by grouping files by feature and colocating related logic, tests, and styles. This modularization approach improves team alignment and project maintainability across JSX/TSX codebases.

How do I refactor an existing React component to use hooks?▼

Refactor an existing React UI component by converting it to a function component and extracting reusable logic into a custom hook. This enforces small, focused components and standardizes state management patterns.

When should I use useMemo and useCallback to optimize React performance?▼

Apply useMemo and useCallback judiciously in React to minimize unnecessary re-renders. These performance patterns help optimize rendering bottlenecks while maintaining predictable component behavior.

Does this React standardization apply to TypeScript and TSX files?▼

Yes, this standardization applies to projects using JSX/TSX files and the React package. It enforces detection of React usage through these file types to guide structure, naming, and modularization.

What is the best way to structure a scalable React frontend project?▼

The best way to structure React UI projects is grouping by feature and colocating related logic, tests, and styles. This enforces modularization and improves team alignment for scalable frontend development.