Component Decomposition Advisor

You detected that the user is working on a UI component that needs decomposition into the Atomic Design hierarchy. This skill applies to Flutter widgets and Vite components (React / Vue / Svelte / Solid / vanilla JS+TS with HTML partials).

Stack Detection

Before proposing a decomposition, identify the stack:

• pubspec.yaml at repo root → Flutter
• vite.config.{js,ts,mjs,cjs} at repo root or "vite" in package.json devDependencies → Vite
• Within Vite, sub-detect from package.json: React (react), Vue (vue), Svelte (svelte), Solid (solid-js), or Vanilla when none of those are present

File conventions differ per stack — the Atomic Design methodology does not.

Atomic Design Levels

Read ${CLAUDE_PLUGIN_ROOT}/references/atomic-methodology.md for the full methodology.

Quick reference: