skills.rest
walid-mos
walid-mosCOMMUNITY
Explore all skills by this author →
𝕏@dev_au_bonnetGitHub

react

Enforce React coding standards for components, state, hooks, JSX, and data fetching.

2|Updated Aug 8, 2024
Search Tags:#code quality#best practices#frontend#react#javascript#component development
One-click install
npx skills add https://github.com/walid-mos/mac-config --skill react-walid-mos
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/walid-mos/mac-config/tree/main/claude/.claude/skills/react
Command: npx skills add https://github.com/walid-mos/mac-config --skill react-walid-mos

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures adherence to modern React coding standards, improving code quality, maintainability, and developer collaboration.

Core Features & Use Cases

  • Component Best Practices: Guides on component splitting, composition, and prop typing.
  • State Management: Recommends efficient state colocation and immutable updates.
  • Hook Usage: Provides guidelines for useCallback, useMemo, and startTransition.
  • JSX & Styling: Enforces conventions for keys, fragments, and Tailwind CSS.
  • Data Fetching: Outlines patterns for handling loading, error, and success states.

Quick Start

Review the provided React code snippet for adherence to the defined standards.

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 development and state management?▼

React component development best practices involve efficient component splitting, composition, prop typing, and state colocation with immutable updates to improve maintainability and code quality.

How do I enforce consistent React coding standards across JSX and TSX codebases?▼

Enforce React coding standards across JSX and TSX codebases by applying rules for component structure, hook usage, JSX conventions, styling, and data fetching patterns to ensure consistency.

When should I use useCallback, useMemo, and startTransition in React hooks?▼

Use useCallback, useMemo, and startTransition in React hooks to optimize rendering performance and manage expensive calculations or state updates, following modern React core principles.

Does this React code standard guidance work with Tailwind CSS and TypeScript?▼

Yes, this React code standard guidance works with Tailwind CSS and TypeScript, enforcing specific styling conventions for Tailwind and applying consistently across all JSX and TSX files.

What is the best way to handle data fetching states in React applications?▼

The best way to handle data fetching states in React applications is to implement distinct patterns for loading, error, and success states, ensuring predictable UI rendering and data flow.

Related Skills

Explore More Software Engineering Skills→
Claude-Code-Community-IrelandClaude-Code-Community-Ireland
10

bun-development

Initialize Bun projects and manage JavaScript/TypeScript development workflows.

Official
Intermediate
constellizeconstellize
1

leverage-ai-assistance

Generate tests, documentation, and deployment readiness artifacts for software projects.

Official
Advanced
wshobsonwshobson
38.6k

web-component-design

Design reusable web UI components with patterns and styling approaches.

Community
Intermediate
xiaoniuge36xiaoniuge36
6

code-review

Analyze code for standards compliance, bugs, performance issues, and security vulnerabilities.

Community
Advanced