Builds reusable Flutter widget libraries on top of Material Design with ThemeExtension theming, consistent APIs, and widget tests.
How this skill is triggered — by the user, by Claude, or both
Slash command
/vgv-ai-flutter-plugin:ui-packageWhen to use
Use when user says "create a ui package".
sonnetThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Best practices for creating a Flutter UI package — a reusable widget library that builds on top of `package:flutter/material.dart`, extending it with app-specific components, custom design tokens via `ThemeExtension`, and a consistent API surface.
Best practices for creating a Flutter UI package — a reusable widget library that builds on top of package:flutter/material.dart, extending it with app-specific components, custom design tokens via ThemeExtension, and a consistent API surface.
Theming foundation: This skill focuses on UI package structure, widget APIs, and testing. For foundational Material 3 theming (
ColorScheme,TextTheme, component themes, spacing constants, light/dark mode), see the Material Theming skill (/material-theming). The two skills are complementary — Material Theming covers how to set up and useThemeData; this skill covers how to extend it withThemeExtensiontokens and package reusable widgets around it.
Apply these standards to ALL UI package work:
flutter/material.dart and compose Material widgets; do not rebuild primitives that Material already providesapp_button.dart)lib/my_ui.dart) that also re-exports material.dartThemeExtension — use Material's ThemeData, ColorScheme, and TextTheme as the base (see Material Theming skill); add app-specific tokens (spacing, custom colors) via ThemeExtension<T>App, Vg) to avoid naming collisions with Material widgetsconst constructors everywhere possible — all widget constructors must be const when feasiblemy_ui/
├── lib/
│ ├── my_ui.dart # Barrel file — re-exports material.dart + all public API
│ └── src/
│ ├── theme/
│ │ ├── app_theme.dart # AppTheme class with light/dark ThemeData builders
│ │ ├── app_colors.dart # AppColors ThemeExtension for custom color tokens
│ │ ├── app_spacing.dart # AppSpacing ThemeExtension for spacing tokens
│ │ └── app_text_styles.dart # Optional: extra text styles beyond Material's TextTheme
│ ├── widgets/
│ │ ├── app_button.dart
│ │ ├── app_text_field.dart
│ │ ├── app_card.dart
│ │ └── ...
│ └── extensions/
│ └── build_context_extensions.dart # context.appColors, context.appSpacing shortcuts
├── test/
│ ├── src/
│ │ ├── theme/
│ │ │ └── app_theme_test.dart
│ │ └── widgets/
│ │ ├── app_button_test.dart
│ │ └── ...
│ └── helpers/
│ └── pump_app.dart # Test helper wrapping widgets in MaterialApp + theme
├── widgetbook/ # Widgetbook catalog submodule (sandbox + showcase)
│ └── ...
└── pubspec.yaml
FilledButton, OutlinedButton, TextField, Card, etc. as building blockskey and child/childrenValueChanged<T> or VoidCallback — do not use raw FunctionWidget? for optional slot-based composition (leading, trailing icons, etc.)| Anti-Pattern | Correct Approach |
|---|---|
Rebuilding widgets Material already provides (e.g., custom button from GestureDetector + DecoratedBox) | Compose Material widgets (FilledButton, OutlinedButton) and style them |
Creating a parallel theme system with custom InheritedWidget | Use Material's ThemeData as the base and ThemeExtension for custom tokens |
Hardcoding Color(0xFF...) in widget code | Use Theme.of(context).colorScheme for standard colors and context.appColors for custom tokens |
Duplicating Material's ColorScheme roles in a custom class | Only create ThemeExtension tokens for values Material does not cover (e.g., success, warning, info) |
Using dynamic or Object for callback types | Use VoidCallback, ValueChanged<T>, or specific function typedefs |
| Exposing internal implementation files directly | Use a barrel file; keep all files under src/ private |
Use the Very Good CLI MCP tool to scaffold the app_ui_package.
npx claudepluginhub verygoodopensource/very-good-claude-code-marketplace --plugin vgv-ai-flutter-pluginProvides Flutter patterns for widget architecture, state management, Impeller renderer, and platform-adaptive design, avoiding common mistakes.
Guides Flutter theming with Material 3: centralized ThemeData, ColorScheme, component themes, spacing systems, and light/dark mode.
Provides Flutter/Dart guidance on architecture (BLoC, Riverpod), state management, widgets, navigation (GoRouter), data (Dio, Hive), performance, and testing for cross-platform mobile apps.