react-coding-conventions

Refactor React components to enforce Head Shakers coding conventions.

2|Updated Aug 20, 2025

Search Tags:#React #frontend #TypeScript #coding standards #code style #naming conventions #component architecture

One-click install

npx skills add https://github.com/JasonPaff/head-shakers --skill react-coding-conventions

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: react-coding-conventions
Source: https://github.com/JasonPaff/head-shakers/tree/main/.claude/skills/react-coding-conventions
Command: npx skills add https://github.com/JasonPaff/head-shakers --skill react-coding-conventions

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.