react

Apply React and Next.js conventions to component structure, performance, and accessibility.

Updated Apr 10, 2026
One-click install
npx skills add https://github.com/erichugy/agentic.skills --skill react-erichugy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/erichugy/agentic.skills/tree/main/react
Command: npx skills add https://github.com/erichugy/agentic.skills --skill react-erichugy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent React and Next.js coding practices can lead to scattered patterns, reduced maintainability, and missed accessibility opportunities. This skill provides a disciplined set of conventions to unify component structure, performance considerations, and UI patterns across teams and projects.

Core Features & Use Cases

  • Component Structure: enforce function components, explicit Props types, and explicit import type usage for React types.
  • Performance & Quality: guidelines for server components, code-splitting, and minimizing unnecessary re-renders.
  • Accessibility & UI: standardized keyboard navigation, ARIA practices, and consistent styling conventions.
  • Use Case: during code reviews or refactors, apply these conventions to align with internal standards and improve long-term maintainability.

Quick Start

Audit a React component for explicit function definitions, typed props, and proper React import typing, then apply the recommended conventions across structure, performance, and accessibility.

Frequently Asked Questions about react

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

FAQPage Schema
What are the standard React component conventions for typing props and imports?

Standard React component conventions require explicit function components, explicit Props type definitions, and proper React type imports to ensure type safety and maintainability.

How do I improve React component performance and reduce unnecessary re-renders?

To improve React component performance, apply guidelines for server components, code-splitting, and minimizing unnecessary re-renders across your project to optimize rendering efficiency.

How do I apply React and Next.js conventions during a code review?

During a code review, audit React components for explicit function definitions, typed props, and proper import typing, then apply structured conventions across component structure, performance, and accessibility.

Does this approach work for both React and Next.js projects?

Yes, these conventions apply unified rules across both React and Next.js projects, specifically enforcing structured performance priorities and server component guidelines for robust frontend patterns.

What are the limitations of enforcing frontend patterns across existing projects?

When applying frontend patterns to existing projects, anticipate the need to refactor scattered coding practices into explicit function components and typed imports, which may require significant structural adjustments.