Auto-activates when the user is working on Flutter widgets and needs help decomposing them into the Atomic Design hierarchy. Triggers on: "decompose this widget", "this widget is too big", "refactor into atoms", "split this into molecules", "extract reusable widget", "widget is monolithic", "too many responsibilities", "move to core/widgets", "create atom from this", "Widgetbook entry". Do NOT trigger for: design system comparisons (use design-system-analyzer), full codebase audits (use /audit command), or non-Flutter code.
npx claudepluginhub dojocodinglabs/atomic-design-toolkit --plugin atomic-design-toolkitThis skill uses the workspace's default tool permissions.
You detected that the user is working on a Flutter widget that needs decomposition into the Atomic Design hierarchy.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Automates semantic versioning and release workflow for Claude Code plugins: bumps versions in package.json, marketplace.json, plugin.json; verifies builds; creates git tags, GitHub releases, changelogs.
You detected that the user is working on a Flutter widget that needs decomposition into the Atomic Design hierarchy.
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 |
core/widgets/setState but is called an "atom" — Misclassified, should be organism/atomic-design-toolkit:generate)core/widgets/{atoms|molecules|organisms}/features/{feature}/presentation/{templates|pages}/{widget_name}.widgetbook.dart alongside the widgetTheme.of(context).colorSchemeTheme.of(context).textTheme