# Architecting Components

> Defines rules for Atomic Design and separating logic from UI. Use when creating new components in the src directory.

- Skill: `diegosouzapw/architecting-components` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add diegosouzapw/architecting-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/architecting-components/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: diegosouzapw (https://skillmd.com/u/diegosouzapw)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/diegosouzapw/architecting-components

---


# 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.