create-ds-componentlisted

Build a reusable component inside packages/design_system — directory layout, barrel exports, named-constructor variants, shared base widgets, token-only styling, and the app-vs-design-system placement decision. Use when adding or changing a widget in the design system package, or deciding whether a widget belongs there at all.
NarekManukyan/flutter-mobx-kit · ★ 0 · Web & Frontend · score 70

Install: claude install-skill NarekManukyan/flutter-mobx-kit

# Create a design-system component Governed by [ADR-0014](../../../docs/adr/0014-melos-package-split.md) (package boundary) and [ADR-0013](../../../docs/adr/0013-design-system-tokens-only.md) (tokens only). Visual spec: [`DESIGN.md`](../../../DESIGN.md). ## Does it belong here? | Widget | Home | |---|---| | Generic, app-agnostic, no feature knowledge — button, input, avatar, modal chrome | `packages/design_system/lib/src/components/` | | Reused across features but app-specific — knows a store, a route, a `LocaleKey` | `lib/core/ui/` | | Used by one feature only | `lib/features/{feature}/components/` | The test: **could another app use this unchanged?** If it imports anything from `lib/`, the answer is no and it does not go in the package. ## Layout ``` packages/design_system/lib/ design_system.dart the only public entry — everything is exported here src/ components/ components.dart barrel src/ {component}/ one directory per non-trivial component {component}.dart barrel src/ implementation parts + shared base widgets core/src/constants/ kSpacingNpx, kBorderRadiusNpx … theme/src/ GeistTheme, GeistTextStyles, GeistRadius, GeistDuration gen/ GENERATED assets/colors/fonts — never edit ``` Naming: `*_widget.dart` or the descriptive name (`primary_button.dart`), `*_theme.dart`, `*_constants.dart`, `*_