component-architecturelisted

# Component Architecture Skill When creating or modifying React components in this project, follow these strict conventions. ## Folder Structure Rules ### CRITICAL: Naming Conventions ```text ✅ CORRECT (kebab-case folders): src/components/user-profile/index.tsx src/components/checkout-wizard/index.tsx src/components/contact-form/index.tsx ❌ INCORRECT (never use): src/components/UserProfile.tsx # No standalone files src/components/userProfile/index.tsx # No camelCase folders src/components/UserProfile/index.tsx # No PascalCase folders ``` ### Component Folder Pattern Every component MUST be in its own folder with `index.tsx`: ```text src/components/payment-form/ ├── index.tsx # ONLY the component + props interface ├── types.ts # Shared types (if multiple) ├── helpers.ts # Helper functions ├── constants.ts # Component constants └── __tests__/ └── payment-form.test.tsx ``` ## One Component Per File (CRITICAL) If a file exports more than one component, split it — even when the components are small and closely related. This surfaced repeatedly in a 2026-08 multi-repo audit: a `skeleton/index.tsx` exporting `PageSkeleton`/`CardSkeleton`/`TextSkeleton`, and a `menu/index.tsx` exporting `Menu`/`MobileMenu`, each in a **single file with multiple named exports** — found independently in 6+ separate codebases that had never seen each other's code, meaning it's an easy default to fall into, not a one-off mistake. ```text