skills.rest
feraudet
feraudetCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-conventions

Define standardized React component structure, naming, and Tailwind styling conventions.

Updated Jan 15, 2026
Search Tags:#typescript#frontend#react#hooks#component#conventions#tailwind
One-click install
npx skills add https://github.com/feraudet/ssii --skill react-conventions-feraudet
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-conventions
Source: https://github.com/feraudet/ssii/tree/main/.claude/skills/react-conventions
Command: npx skills add https://github.com/feraudet/ssii --skill react-conventions-feraudet

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Establishes consistent React frontend standards to ensure uniform component structure, naming, hooks usage, and styling across the project.

Core Features & Use Cases

  • Standard component anatomy: consistent imports, types, and rendering patterns to improve readability and onboarding.
  • Naming, hooks, and styling conventions: enforce PascalCase for components, camelCase for handlers, and Tailwind-based styling patterns to maintain design coherence.
  • Use Case: when starting a new React feature, performing a code review, or onboarding a new frontend developer, apply these conventions to align with existing code.

Quick Start

Apply these conventions when creating a new React component to ensure consistent structure and styling.

Frequently Asked Questions about react-conventions

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

FAQPage Schema
How do I standardize React component structure across a TypeScript codebase?▼

Standardize React component structure by enforcing consistent imports, TypeScript types, and rendering patterns. Applying these conventions ensures uniform component anatomy, improving readability and developer onboarding across a project.

What naming conventions should I use for React hooks and event handlers?▼

React hooks and event handlers should use camelCase naming, while components use PascalCase. Enforcing these naming conventions alongside consistent hook ordering maintains code coherence and predictability during feature development and refactoring.

How do I maintain consistent Tailwind styling patterns in a React project?▼

Maintain consistent Tailwind styling by enforcing standardized Tailwind-based styling patterns within React components. This ensures design coherence across the codebase when creating new components or refactoring existing user interfaces.

Can I use these React conventions for code reviews and onboarding?▼

Yes, you can apply these React conventions during code reviews and developer onboarding to align new code with existing patterns. They provide clear component anatomy and documentation examples to guide consistent TypeScript and hooks usage.

What is the best way to organize TypeScript types and hook ordering in React?▼

The best way to organize TypeScript types and hook ordering is by following a standardized component anatomy. This enforces clear structural patterns for imports, types, and hooks, ensuring consistent rendering and maintainability.

Related Skills

Explore More Software Engineering Skills→
thehivegroup-aithehivegroup-ai

vue-component-standards

Provides Vue 3 component development standards using Composition API, TypeScript, and Tailwind CSS.

Official
Intermediate
TheBushidoCollectiveTheBushidoCollective
187

eslint-custom

Automate creation and publishing of custom ESLint rules and plugins.

Official
Advanced
wordshepherdwordshepherd

new-hook

Scaffold custom React hooks with TypeScript interfaces and hook conventions.

Official
Basic
lucas-martinolucas-martino

frontend-architecture-selector

Select a frontend architecture based on project complexity, business domain, and team scale.

Community
Intermediate