react-convention

Standardize React and Next.js coding conventions for components, hooks, and project structure.

1|Updated Mar 17, 2026

Search Tags:#performance #frontend #react #hooks #next.js #coding-conventions #component-design

Ready to run

npx skills add https://github.com/iceflower/agent-skills --skill react-convention

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-convention
Source: https://github.com/iceflower/agent-skills/tree/main/react-convention
Command: npx skills add https://github.com/iceflower/agent-skills --skill react-convention

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often suffer from inconsistencies in component patterns, hooks usage, and project structure, making reviews slower and onboarding harder.

Core Features & Use Cases

Component Design Principles: Server Components vs Client Components, naming, and composition for predictable UI.
Hooks & Patterns: Rules for using hooks, custom hooks, and data fetching patterns (server vs client).
Project Governance: Clear guidelines for file layout, testing, performance, and documentation.

Quick Start

Follow these conventions to write consistent, maintainable React and Next.js components, hooks, and project structure.

Frequently Asked Questions about react-convention

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

FAQPage Schema

How do I standardize React and Next.js coding conventions across my codebase?▼

To standardize React and Next.js coding conventions, enforce rules for component design, hooks usage, and project structure. This reduces inconsistencies in component patterns and structure, making code reviews faster and onboarding easier during authoring and refactoring.

What are the best practices for Server Components vs Client Components in Next.js App Router?▼

Best practices for Server Components vs Client Components in the Next.js App Router involve following predictable UI composition principles. Standardizing their usage ensures clear data fetching patterns and consistent naming conventions across your React project.

How should I structure custom hooks and data fetching patterns in React?▼

Custom hooks and data fetching patterns in React should follow strict usage rules. Standardizing these patterns, especially distinguishing server versus client data fetching, reduces inconsistencies and makes hook logic predictable across different codebases.

Does this React convention guide cover performance guidelines and file layout?▼

Yes, this React convention guide covers project governance including file layout, testing, performance guidelines, and documentation. It provides comprehensive rules for project structure to ensure maintainable React and Next.js applications.

Why do my React component patterns suffer from inconsistencies during code review?▼

React component patterns suffer from inconsistencies during code review due to a lack of standardized conventions. Enforcing component design principles, naming conventions, and hook usage rules reduces these inconsistencies across codebases.

Can I apply these coding conventions during React refactoring?▼

Yes, you can apply these coding conventions during React refactoring. They are designed to be applied during code authoring, review, and refactoring of components, hooks, and project structure to improve maintainability.