skills.rest
calcosmic
calcosmicCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/calcosmic/Aether --skill react-calcosmic
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
jidohyunjidohyun
17

frontend-code-review

Review React/Next.js files and git diffs for code quality issues.

Community
Intermediate
reomgitreomgit

setup-deploy

Detect deployment platforms and write configuration settings to CLAUDE.md.

Community
Advanced
mtsatryanmtsatryan
1

frontend-specialist

Plan and design frontend interfaces across React, Vue, Angular, and Svelte.

Community
Advanced
michsindlingermichsindlinger
1

UI Component Architecture

Guide scalable UI component architecture across React, Vue, and Angular.

Community
Advanced