react-coding-conventions

What problem does it solve?

This Skill automatically enforces Head Shakers' React coding conventions, ensuring consistent code style, naming, component structure, and TypeScript patterns across all React components, leading to more maintainable and readable code.

Core Features & Use Cases

• Automated Code Style Enforcement: Ensures single quotes, JSX attribute formatting, kebab-case file names, and named exports.
• Standardized Component Structure: Enforces a specific internal organization order for hooks, utility functions, and event handlers.
• Consistent Naming Conventions: Mandates is prefix for boolean values, _ prefix for derived variables, and handle prefix for event handlers.
• Use Case: When refactoring an existing React component, this Skill automatically renames loading to isLoading, extracts complex conditions into _isDataReady variables, reorders useState before useEffect, and ensures all event handlers are prefixed with handle.

Quick Start

Refactor an existing React component to adhere to Head Shakers coding conventions, ensuring all boolean props start with is, event handlers use handle prefix, and hooks are organized in the specified order.