Claude-skill-registry architecting-components

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

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/architecting-components" ~/.claude/skills/majiayu000-claude-skill-registry-architecting-components && rm -rf "$T"

manifest: skills/data/architecting-components/SKILL.md

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.