design-system

Guides the transformation of Stack-and-Flow Design System into a properly distributable npm package with per-component tree-shaking, correct exports map, vite lib mode, and peer dependency hygiene. Trigger: When someone asks "how do we distribute this as npm?", "set up the npm package", "configure the build for publishing", or "how do we make each component importable independently". Also delegable from sdd-design when designing the distribution strategy.

Trigger: component child issues, cataloging child issues, extracted primitives, atoms, molecules, organisms. Create or reuse child issues after validated component cataloging decisions.

Guides an AI agent through implementing a Stack-and-Flow design-system component from an approved issue/spec. Trigger: component implementation, implement this component, build a component, component issue URL, delegated from sdd-apply.

Trigger: component spec cataloging validation, validate component proposal tier, reuse or extraction audit. Validate a proposed component spec against the catalog tier system before approval.

Trigger: capture-first component spec, reference-component-first spec, HeroUI/Radix/reference component, prepare component issue. Propose specs, run cataloging validation, and prepare the issue spec before implementation.

Guides an external project through adopting Stack-and-Flow as their design system base. Covers: installing the package, importing the CSS, configuring Tailwind v4 to consume the tokens, and customizing the token layer (colors, typography, spacing) to match their brand. Scope: token customization only — component architecture and structure are not modified. Trigger: When an external project wants to use Stack-and-Flow as a base and customize its tokens.

Reviews existing Stack-and-Flow components against the shared component contract, Storybook conventions, tests, visual states, tokens, and accessibility. Trigger: component audit, review existing component, check component quality, delegated from sdd-verify.

Creates and audits GitHub Issues + Project board items for Stack-and-Flow following the canonical board fields and issue template. Trigger: create task, start work, assign issue, move to In progress, end work, close task, move to Done, add component to board, audit GitHub Project issues, delegated from sdd-tasks.

Runs the final Stack-and-Flow PR readiness gate: CI evidence, linked issue, title/template hygiene, component audit evidence, visual/MCP cleanup, and clean review scope. Trigger: ready for review, review my PR, check PR before submit, delegated from sdd-verify.

Manages the @changesets/cli release workflow for Stack-and-Flow Design System. Covers initial setup, detecting commits without changeset coverage, generating changeset files, and proposing the correct semver bump based on Conventional Commits. Trigger: When someone asks to "create a changeset", "prepare a release", "what needs a changeset", or "add changeset for my changes". Also delegable from sdd-archive as the final step of a change cycle.

Audits Stack-and-Flow as a full design-system package, not individual components. Covers: token architecture, theme structure, folder organization, package.json configuration, build output, peer dependencies, and design system best practices. Proposes concrete improvements — not just flags issues. Trigger: system-level audit, design-system audit, token architecture review, folder structure review, npm distributable standards, release readiness. Also delegable from sdd-verify or sdd-explore for system-level validation.

Trigger: visual review, component visual quality, hover/focus/active states, glow, transition, contrast, accessibility visuals. Audit Stack-and-Flow visual rules.

Trigger: creating git worktrees, parallel writer isolation, subagent worktree isolation, stacked/chained PR worktrees. Enforce sibling worktree placement next to the original repository instead of /tmp.