dojocodinglabs Design System Analyzer
You detected that the user wants to compare their project against a design system's component catalog. This works for both Flutter and Vite codebases.
What To Do
Detect the stack so you know which design systems are compatible:
pubspec.yaml→ Flutter (use Material 3 / Cupertino / Spectrum Flutter implementations)vite.config.*or"vite"inpackage.json→ Vite (use any web-compatible system)
Ask which design system they want to compare against (or infer from context). Stack-appropriate options:
Stack Compatible design systems Flutter Material 3, Cupertino, Fluent 2 (ports), Carbon (ports), Spectrum Flutter Vite + React Material 3 (MUI), Tailwind + shadcn, Carbon, Fluent UI, Ant Design, Chakra, Radix, Cloudscape, Polaris, Atlassian, Primer, Spectrum (React Aria), Lightning, Headless UI Vite + Vue Material (Vuetify), Ant Design Vue, Element Plus, Naive UI, Headless UI Vue, Radix Vue Vite + Svelte Skeleton UI, Melt UI, shadcn-svelte, Carbon Svelte Vite + Solid Kobalte, shadcn-solid Vite + Vanilla Bootstrap 5, Bulma, UIkit, Tailwind + HeroUI, Material Web components Suggest the dedicated command for a full gap analysis:
Use
/atomic-design-toolkit:audit :{system}for a full gap analysis, or/atomic-design-toolkit:audit :audit:{stack}:{system}for combined component + bundle-health audit.If the question is quick (e.g. "does Carbon have a TreeView equivalent?"), answer directly using Context7 MCP without needing the full audit command.
For design token comparisons, reference
${CLAUDE_PLUGIN_ROOT}/references/design-systems/for pre-compiled catalogs.
Context7 Integration
resolve-library-id: "{design system name}"
query-docs:
libraryId: "{resolved ID}"
query: "list all components with descriptions"
Key Unique Components Per System
Read ${CLAUDE_PLUGIN_ROOT}/references/design-systems/ for detailed catalogs (material3.md, mui.md, cupertino.md, carbon.md, bootstrap5.md, tailwind-shadcn.md, vuetify.md, ant-design.md). Quick reference:
Flutter-native
- Material 3: Badge, BottomSheet, NavigationRail, SearchBar, SegmentedButton
- Cupertino: ActionSheet, ContextMenu, DatePicker, SegmentedControl
- Spectrum: CoachMark, IllustratedMessage, StatusLight
Web-native (Vite-compatible)
- Bootstrap 5: Offcanvas, Toast, Accordion, Carousel, Scrollspy (needs JS plugins + Popper)
- Tailwind + shadcn: Command, DataTable, InputOTP, Sheet, Resizable (Radix-powered)
- Carbon: StructuredList, ContentSwitcher, InlineNotification, TreeView
- Headless UI: Accessibility-first patterns (ARIA, keyboard nav, focus trap)
- Atlassian: InlineEdit, DynamicTable, Flag notifications
- Cloudscape: AppLayout, SplitPanel, Wizard
- Primer: Timeline, StateLabel, Blankslate
- Polaris: AccountConnection, CalloutCard, IndexTable
- Ant Design: Cascader, Transfer, TreeSelect
- Chakra UI: Editable, PinInput, Show/Hide
- Radix UI: HoverCard, NavigationMenu, ScrollArea
Framing the Gap Report
For any stack, the gap report should include:
- Present — components the project already has (even if named differently).
- Missing — components in the catalog with no project equivalent.
- Partial — project has a component but it lacks variants the catalog provides.
- Extra — project components that do not map to the catalog (worth reviewing for invention vs duplication).
On Vite projects, also flag:
- Mis-sourced — a catalog component re-implemented from scratch when a packaged version exists (e.g. hand-rolled accordion instead of Bootstrap 5's
.accordion). - Vendor-forked — a catalog component copied into
public/orvendor/rather than imported via npm.