From Mix
Provides patterns, reference tables, and workflow guidance for the Mix Flutter styling framework — type-safe style specs, fluent Stylers, variant resolution, code generation, and melos commands.
How this skill is triggered — by the user, by Claude, or both
Slash command
/mix:mixThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Type-safe styling system for Flutter that separates style semantics from widgets.
agents/openai.yamlreferences/animations.mdreferences/architecture.mdreferences/code-generation.mdreferences/design-tokens.mdreferences/development-workflow.mdreferences/examples.mdreferences/fluent-api.mdreferences/styler-api-policy.mdreferences/testing.mdreferences/variants.mdreferences/widget-modifiers-directives.mdType-safe styling system for Flutter that separates style semantics from widgets.
Target version: mix: 2.0.3 (Dart >=3.11.0, Flutter >=3.41.0)
Confirm the project's actual version before applying patterns — check pubspec.yaml.
When working on Mix code, resolve ambiguity in this order:
hover, signature_help, resolve_workspace_symbol) — if connected and dependencies resolvedSpec (immutable resolved data) ← Styler (fluent builder with Prop<V>) → Widget (renders Spec)
Resolution pipeline: StyleWidget → StyleBuilder → merge active variants → resolve Prop<V> fields (tokens, Mix types, directives) → produce StyleSpec<S> → animate → widget.build(context, spec) → provide StyleSpec → apply widget modifiers.
| Styler | Spec | Widget | Flutter Equivalent |
|---|---|---|---|
BoxStyler | BoxSpec | Box | Container |
TextStyler | TextSpec | StyledText | Text |
FlexStyler | FlexSpec | — (layout) | Flex/Row/Column |
FlexBoxStyler | FlexBoxSpec | FlexBox/RowBox/ColumnBox | Column/Row + Container |
StackStyler | StackSpec | — (layout) | Stack |
StackBoxStyler | StackBoxSpec | StackBox | Stack + Container |
IconStyler | IconSpec | StyledIcon | Icon |
ImageStyler | ImageSpec | StyledImage | Image |
Interactive: Pressable (gesture + focus + mouse), PressableBox (Pressable + Box).
When styling a Mix surface, keep visual semantics in Stylers instead of nesting raw Flutter widgets for styling concerns.
| Instead of | Write |
|---|---|
Container(color: ..., padding: ..., child: ...) | Box(style: BoxStyler().color(...).paddingAll(...), child: ...) |
Text('Label', style: TextStyle(...)) | StyledText('Label', style: TextStyler().fontSize(...).color(...)) |
Icon(Icons.star, color: ..., size: ...) | StyledIcon(icon: Icons.star, style: IconStyler().color(...).size(...)) |
Theme.of(context).colorScheme.primary in styles | ColorToken values from MixScope, then BoxStyler().color($primary()) |
Theme.of(context).textTheme.bodyMedium in styles | TextStyleToken values from MixScope, then TextStyler().style($body.mix()) |
Nested Padding / Align for a styled widget | Styler methods such as .paddingAll(16) and .alignment(Alignment.center) |
Start top-level declarations with the relevant concrete Styler constructor (BoxStyler(), TextStyler(), IconStyler(), etc.), then chain. Static factories are valid API but discouraged for top-level declarations; bare dot-shorthand is only for typed nested contexts. In nested typed contexts (variants, state callbacks), use bare shorthand .method() instead. See references/styler-api-policy.md for the complete policy.
final style = BoxStyler()
.color(Colors.blue)
.size(100, 100)
.padding(.all(16))
.borderRadius(.circular(8));
Box(style: style, child: child)
// Bare shorthand in nested typed contexts
final style = BoxStyler()
.color(Colors.white)
.onDark(.color(Colors.black))
.onHovered(.color(Colors.blue));
final style = BoxStyler()
.color(Colors.black)
.onHovered(.color(Colors.blue).scale(1.2))
.animate(.easeInOut(300.ms));
final base = BoxStyler().padding(.all(16)).borderRadius(.circular(8));
final elevated = BoxStyler().elevation(ElevationShadow(4));
final combined = base.merge(elevated);
@immutable final class, use copyWith() for changes$ prefix — $padding, $alignment, etc. with Prop<V>?; exceptions include directives, variants, modifier, and animation metadata.create() and default constructors — many also expose generated factory constructors@MixableSpec(target: Widget.new) — @MixableStyler is legacy/deprecated@MixWidget for generated widgets from style factories — it wraps top-level Style<S> variables or functions@MixableModifier for generated modifiers — it emits the modifier contract mixin and ModifierMix classmix.dart is generated — never edit directly; run melos run exportsmelos run gen:buildmelos bootstrap # Install dependencies
melos run gen:build # Clean + regenerate all *.g.dart files
melos run ci # Run all tests (flutter + dart)
melos run analyze # Dart + DCM analysis
melos run fix # Auto-fix lint issues
melos run exports # Regenerate mix.dart barrel file
Pre-commit verification:
melos run gen:build && melos run ci && melos run analyze
| Package | Purpose |
|---|---|
mix | Core framework |
mix_annotations | @MixableSpec, @MixWidget, @MixableModifier, @MixableStyler, @Mixable, @MixableField |
mix_generator | build_runner generator producing *.g.dart mixins |
mix_lint | Analysis server plugin with Mix-specific lint rules |
mix_tailwinds | Tailwind-style utility layer (experimental) |
Consult these for detailed guidance:
references/architecture.md — Spec, Styler, Prop, resolution pipeline, StyleWidgetreferences/styler-api-policy.md — Top-level rule, dot-shorthand policy, factory constructor table, chain-only methodsreferences/fluent-api.md — Chaining, style mixins, sizing decision tree, compositionreferences/code-generation.md — Annotations, generated output, BoxSpec reference implreferences/examples.md — Worked end-to-end examplesreferences/variants.md — NamedVariant, ContextVariant, WidgetStateVariant, built-in methodsreferences/animations.md — Implicit, Phase, Keyframe animationsreferences/design-tokens.md — MixScope, token types, themingreferences/widget-modifiers-directives.md — .wrap(), modifiers, directivesreferences/development-workflow.md — Creating specs, codegen workflow, monoreporeferences/testing.md — resolvesTo matcher, MockBuildContext, merge testingnpx claudepluginhub btwld/mixGuides Flutter theming with Material 3: centralized ThemeData, ColorScheme, component themes, spacing systems, and light/dark mode.
Provides Flutter patterns for widget architecture, state management, Impeller renderer, and platform-adaptive design, avoiding common mistakes.
Provides Flutter/Dart guidance on architecture (BLoC, Riverpod), state management, widgets, navigation (GoRouter), data (Dio, Hive), performance, and testing for cross-platform mobile apps.