architecting-components
Defines rules for Atomic Design and separating logic from UI. Use when creating new components in the src directory.
SKILL.md
Full skill instructions
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.