react-conventions

Standardize React and React Native component conventions for TypeScript projects.

Updated Feb 5, 2026
One-click install
npx skills add https://github.com/benaor/Virtus --skill react-conventions-benaor
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-conventions
Source: https://github.com/benaor/Virtus/tree/main/.claude/skills/react-conventions
Command: npx skills add https://github.com/benaor/Virtus --skill react-conventions-benaor

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent component structure, typing patterns, and accessibility practices across React and React Native codebases slow teams down. This skill standardizes conventions to improve readability, maintainability, and performance.

Core Features & Use Cases

  • Naming conventions, explicit Props typing, and component structure for predictable code.
  • Accessibility and performance best practices applied across React/React Native components.
  • Use Case: When starting a new UI module, apply these conventions to ensure consistency, faster code reviews, and better onboarding.

Quick Start

Follow these conventions when creating a new React/React Native component to ensure consistent naming, typing, and accessibility.

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 and React Native component conventions across my team?

Standardize React and React Native component conventions by enforcing explicit named exports, Props interfaces, and consistent naming structures. This approach improves code readability, maintainability, and team collaboration during TypeScript development.

What are the best practices for typing React component props in TypeScript?

Best practices for typing React component props in TypeScript involve using explicit Props interfaces and avoiding unsafe patterns. Applying these typing conventions ensures predictable component structure and enhances overall code maintainability.

How do I include accessibility rules when creating React UI components?

Include accessibility rules when creating React UI components by applying standardized conventions during component creation. This ensures consistent accessibility practices are integrated directly into your React and React Native codebase.

Can I use these React conventions for both web and React Native TypeScript projects?

Yes, you can use these React conventions for both web and React Native TypeScript projects. They standardize coding practices across both platforms, covering naming, typing, performance, and accessibility for reliable UI development.

When should I apply React coding conventions during the development workflow?

Apply React coding conventions during component creation, hook development, and code reviews. Using these conventions when starting a new UI module ensures consistency, speeds up code reviews, and facilitates better onboarding.

Why do inconsistent React component structures slow down code reviews?

Inconsistent React component structures slow down code reviews because varying typing patterns and accessibility practices reduce readability. Standardizing conventions improves maintainability and performance, accelerating the review process.