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

When a Widget Needs Decomposition

Installs
1
First Seen
Jun 17, 2026
widget-decomposition — dojocodinglabs/atomic-design-toolkit