feature-components-expert

Imported from luizarnoldch/code-automation (.claude/skills/feature-components-expert/SKILL.md). Install upstream with npx skills add luizarnoldch/code-automation --skill feature-components-expert. Copyright stays with the author.

src/features/[entity]/components/ — UI components

Flat components (no sub-components)

• PascalCase, entity prefix prevents import collisions across features.
• Purpose segment describes the UI role: Table, Form, Card, FilterBar, EmptyState, Actions.

Complex components (with sub-components)

components/
  ProductForm/
    index.tsx            ← entry point, re-exports <ProductForm />
    ProductFormFields.tsx
    ProductFormActions.tsx
    ProductFormHeader.tsx

• Folder name: [Entity][Purpose]/ in PascalCase.
• index.tsx is the only public entry point — consumers import from ./ProductForm, not from sub-files.
• Sub-components: [Entity][Purpose][Part].tsx — keeps the full namespace visible in every import.
• It should continue for sub-components of sub-components. For example, if ProductFormFields.tsx has sub-components, they should be named ProductFormFields[Part].tsx converting first ProductFormFields.tsx to a folder in PascalCase and set index.tsx as entry point.

Base UI Components

• For the UI components, we will use Shadcn located on src/components/ui/ folder to create any component we need.
• We can use the components from Shadcn as they are, or we can create our own components by extending the Shadcn components.

Form Components

• For the form components, we will use hooks on src/features/[entity]/hooks/ folder to create the forms.
• We will use the Field component from src/components/ui/ folder to create the fields for the forms.