diegosouzapw Component Design Architecture
When to use this skill
- Structuring the
components/directory. - Deciding where to place logic (Server vs Client).
Folder Structure
components/ui/: Base shadcn/custom elements (Buttons, Inputs).components/shared/: Reusable across multiple pages (Navbar, Footer).components/features/: Complex logic-heavy components (TourCard, BookingForm).
Design Rules
- Dumb UI: Pure presentational components with props.
- Smart Logic: Components or Server Pages that fetch data or handle state.
- Colocation: Keep test files and local styles near the component.
Instructions
- RSC First: Use Server Components for data fetching. Use
'use client'only when Interactivity (hooks, event listeners) is needed.