widget-decomposition
Installation
SKILL.md
Widget Decomposition Advisor
You detected that the user is working on a Flutter widget that needs decomposition into the Atomic Design hierarchy.
Atomic Design Levels
Read ${CLAUDE_PLUGIN_ROOT}/references/atomic-methodology.md for the full methodology.
Quick reference:
| Level | Responsibility | State? | Examples |
|---|---|---|---|
| Atom | Single-purpose UI element, no business logic | No (stateless) | Button, Avatar, Badge, TextInput, Icon |
| Molecule | Atoms composed with local interaction logic | Minimal (form state) | SearchBar, UserChip, RatingStars |
| Organism | Molecules with data binding and state management | Yes (provider/bloc) | UserList, CommentThread, ProductCard |
| Template | Page layout structure, slots for organisms | No (layout only) | DashboardTemplate, DetailTemplate |
| Page | Template bound to route and data providers | Yes (route + DI) | DashboardPage, ProfilePage |