Flutter Atomic Design widget generator — decompose features into atoms, molecules, organisms, templates, and pages. Audit mode, 14+ design system lenses.
npx claudepluginhub dojocodinglabs/atomic-design-toolkit --plugin atomic-design-toolkitAuto-activates when the user discusses design system gap analysis, component catalogs, or cross-referencing their Flutter project against a design system. Triggers on: "design system gap", "component catalog", "what components am I missing", "Material 3 components", "cross-reference design system", "compare against Carbon", "what widgets does Primer have that I don't", "design token audit". Do NOT trigger for: generating specific feature widgets (use /generate command), or general Flutter development questions.
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.
Flutter Atomic Design widget generator — decompose features into atoms, molecules, organisms, templates, and pages. Audit your codebase. Cross-reference against 14+ design systems.
A Claude Code plugin by Luis Andres Pena Castillo.
claude plugin add DojoCodingLabs/atomic-design-toolkit
npx @DojoCodingLabs/atomic-design-toolkit install
Other commands:
npx @DojoCodingLabs/atomic-design-toolkit update # Sync assets to latest version
npx @DojoCodingLabs/atomic-design-toolkit doctor # Health check
npx @DojoCodingLabs/atomic-design-toolkit uninstall # Remove all managed files
| Command | Description |
|---|---|
/atomic-design-toolkit:generate <feature> | Generate a complete widget hierarchy for a feature |
/atomic-design-toolkit:audit [:<system>] | Scan codebase for decomposable widgets + design system gap analysis |
| Skill | Triggers when you... |
|---|---|
design-system-analyzer | Discuss design system gaps, component catalogs, or cross-referencing |
widget-decomposition | Work on a monolithic widget that needs splitting |
/atomic-design-toolkit:generate rescue-alerts
/atomic-design-toolkit:generate adoption-listings
Produces a full Atomic Design decomposition:
/atomic-design-toolkit:audit # Pure codebase scan
/atomic-design-toolkit:audit :material3 # Material 3 gap analysis
/atomic-design-toolkit:audit :cupertino # Apple HIG gap analysis
/atomic-design-toolkit:audit :carbon # IBM Carbon gap analysis
/atomic-design-toolkit:audit :audit:material3 # Combined
14+ supported design systems:
| System | Key Unique Components |
|---|---|
| Material 3 | Badge, BottomSheet, Chip, NavigationRail, SearchBar |
| Cupertino | ActionSheet, ContextMenu, DatePicker, SegmentedControl |
| Fluent 2 | Persona, Toolbar, DataGrid, InfoBar, TeachingBubble |
| Carbon | StructuredList, ContentSwitcher, InlineNotification, TreeView |
| Headless UI | Accessibility-first patterns (ARIA, focus trap) |
| Atlassian | InlineEdit, DynamicTable, Flag notifications |
| Cloudscape | AppLayout, SplitPanel, Wizard |
| Primer | Timeline, StateLabel, Blankslate |
| Polaris | AccountConnection, CalloutCard, IndexTable |
| Spectrum | CoachMark, IllustratedMessage, StatusLight |
| Lightning | ActivityTimeline, DataTable, Path |
| Ant Design | Cascader, Transfer, TreeSelect |
| Chakra UI | Editable, PinInput, Show/Hide |
| Radix UI | HoverCard, NavigationMenu, ScrollArea |
| shadcn/ui | Command, DataTable, InputOTP, Sheet |
| Level | Responsibility | State? | Location |
|---|---|---|---|
| Atom | Single-purpose UI element | No | core/widgets/atoms/ |
| Molecule | Atoms with local interaction | Minimal | core/widgets/molecules/ |
| Organism | Molecules with data binding | Yes | core/widgets/organisms/ |
| Template | Page layout with slots | No | features/*/templates/ |
| Page | Template bound to route | Yes | features/*/pages/ |
atomic-design-toolkit/
├── .claude-plugin/
│ ├── plugin.json
│ └── marketplace.json
├── commands/
│ ├── generate.md # Feature widget generation
│ └── audit.md # Codebase audit + design system gaps
├── skills/
│ ├── design-system-analyzer/
│ │ └── SKILL.md # Auto-activates on DS discussions
│ └── widget-decomposition/
│ └── SKILL.md # Auto-activates on widget refactoring
├── references/
│ ├── atomic-methodology.md
│ └── design-systems/
│ ├── material3.md
│ ├── cupertino.md
│ └── carbon.md
└── README.md
Business Source License 1.1 — you may use, modify, and redistribute for non-competitive purposes. Converts to Non-Profit OSL 3.0 after 5 years.
Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
Standalone image generation plugin using Nano Banana MCP server. Generates and edits images, icons, diagrams, patterns, and visual assets via Gemini image models. No Gemini CLI dependency required.
Qiushi Skill: methodology skills for AI agents guided by seeking truth from facts, with Claude Code, Cursor, OpenClaw, Codex, OpenCode, and Hermes guidance.
Memory compression system for Claude Code - persist context across sessions
Comprehensive skill pack with 66 specialized skills for full-stack developers: 12 language experts (Python, TypeScript, Go, Rust, C++, Swift, Kotlin, C#, PHP, Java, SQL, JavaScript), 10 backend frameworks, 6 frontend/mobile, plus infrastructure, DevOps, security, and testing. Features progressive disclosure architecture for 50% faster loading.