using-react-component-pattern

What problem does it solve?

This Skill helps React teams enforce a consistent component-building pattern by requiring a dedicated Props interface and a named export, reducing ambiguity and errors in codebases.

Core Features & Use Cases

• Props interface naming: Require a component-specific interface named after the component with a Props suffix.
• Named exports: Enforce exporting components by name and avoiding default exports.
• Destructuring inside the function: Ensure props are destructured within the function body, not in the parameters.
• TypeScript integration: Applies to TypeScript React components to promote type-safety and clarity.
• Use Case: When scaffolding new components or auditing existing ones, apply these rules to ensure consistency and easier refactoring.

Quick Start

Create a component file that exports by name, defines a Props interface named after the component with Props suffix, destructures props inside the function, and uses an arrow function.