frontend-component

To enforce consistent React component naming conventions, apply strict rules like PascalCase for components, kebab-case for utilities, and camelCase prefixed with 'use' for hooks across your Next.js project. This approach reduces duplication and visual drift.

Standardizing TypeScript prop interfaces requires explicit prop definitions and strict type validation for all React UI components. This method ensures design-system integration and improves component maintainability in real-world UI scenarios.

To scaffold a new UI component matching a design system, follow established architecture and import standards from your project's UI libraries. This ensures cohesive styling and motion patterns across all pages and features.

This standardization approach applies to React components, utilities, and hooks within a Next.js project. It validates strict TypeScript types and explicit prop interfaces across all these file types to ensure comprehensive project consistency.

Frontend teams experience visual drift across React pages due to inconsistent patterns for styling, motion, and design system usage. Enforcing explicit component conventions and strict typing aligns UI elements to resolve this duplication.