# Component Design

> Design React components with clear FSD ownership and public APIs.

- Skill: `irwebtools/component-design` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add irwebtools/component-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/irwebtools/component-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: irwebtools (https://skillmd.com/u/irwebtools)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/irwebtools/component-design

---


# component-design

## When to use

Use when splitting UI into reusable React components inside an FSD slice.

## Purpose

Keep components owned by the correct layer and avoid cross-feature dumping.

## Input

- UX flow states and interactions
- Architecture Decision Record
- Existing shared UI primitives (if any)

## Process

1. Place business UI in the owning feature/entity slice.
2. Extract truly shared primitives to `shared/ui` only when reused.
3. Expose public API through the slice index/public file.
4. Prefer composition over global utility helpers for business logic.
5. Keep TypeScript props explicit and stable.

## Output

- Component ownership map
- Public API notes
- Reuse decisions

## Verification

- Components live under ADR locations.
- No business feature dumped into `src/components`.
- Shared extraction is justified by reuse, not convenience.

## Restrictions

- React + TypeScript + FSD only.
- Do not create global component warehouses for business features.
- Do not bypass architecture decision for "faster demo".