component-placement

name	component-placement
description	Code-generation skill. Use only when generating or refactoring repo code and deciding where new components belong across feature, shared, and primitive UI layers.
metadata	{"family":"code","owner":"engineering","last_reviewed":"2026-04-30T00:00:00.000Z","version":"1.0.0"}

Component Placement

This is a code-generation skill. Use it only when the outcome is a repo code change.

Use When

• creating a new component
• moving a component
• deciding whether a component is feature-specific or shared
• breaking down a large page component

Placement Order

Choose a layer in this order:

1. src/features/<feature>/...
2. src/features/career-hub/shared/...
3. src/components/common/...
4. src/components/ui/...
5. src/shared/...

Layer Rules

src/features/<feature>

Default for:

• sections
• page shells
• route-family UI
• feature clients
• feature-specific display components

src/features/career-hub/shared

Use for domain-shared Career Hub UI:

• header/footer
• shared layouts
• CTA blocks
• navigation hubs
• schema helpers

src/components/common

Use only for truly generic cross-feature helpers:

• layout primitives
• stat grids
• callouts
• typography helpers

src/components/ui

Use for primitive UI controls only.

src/shared

Use for cross-feature infrastructure, not normal display components.

Naming Patterns

• SomethingShell.tsx
• SomethingSections.tsx
• SomethingClient.tsx

Forbidden Patterns

• new feature UI under @/components/career-hub/...
• dropping route-family UI into src/components/common by default
• creating brand-new primitives when src/components/ui already has one

Reuse Rule

Before creating a component, search in this order:

1. current feature folder
2. src/features/career-hub/shared
3. src/components/common
4. src/components/ui