Best practices for building a Flutter UI package on Material: custom components, ThemeExtension theming, consistent APIs, widget tests, appuipackage scaffolding.

MITAuto-check: warningsFrontend & Design

Install UI Package

The automated check flagged lines worth reading first. See the safety section below.

skills CLI
$ npx skills add VeryGoodOpenSource/vgv-ai-flutter-plugin --skill ui-package -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install VeryGoodOpenSource/vgv-ai-flutter-plugin ui-package --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/ui-package .claude/skills/ui-package && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
ui-package
GitHub stars
169
Token cost
~2.2k tokens
SKILL.md length
742 words
Files
3
Skills in repo
15
Repo updated
First seen
Licence
MIT

At a glance

Best practices for building a Flutter UI package on Material: custom components, ThemeExtension theming, consistent APIs, widget tests, appuipackage scaffolding.

  • Creating a UI package
  • SKILL.md covers Core Standards, Package Structure, Building Widgets and Anti-Patterns, plus 1 more section
  • Calls flutter
  • Working inside one

What it does

UI Package is an agent skill from VeryGoodOpenSource/vgv-ai-flutter-plugin. Best practices for building a Flutter UI package on Material: custom components, ThemeExtension theming, consistent APIs, widget tests, appuipackage scaffolding. Use when creating a UI package, working inside one, or in an app that consumes one: adding or reviewing a widget, wiring design tokens, exporting through the barrel file, or writing tests for a widget under lib/src/widgets, which pump through the package's pumpApp helper, so prefer this over general test guidance even when the ask is only "write its…

Its SKILL.md is about 2.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files (for example `agents/openai.yaml` and `reference.md`).

It sits in Frontend & Design, covering Design tokens, Cross-platform mobile apps and Theming and dark mode. It works with Flutter. The repository describes itself as: AI plugin to enhance and accelerate Flutter & Dart development, built by Very Good Ventures. The licence is MIT.

When your agent uses it

  • Creating a UI package
  • Working inside one
  • In an app that consumes one: adding
  • Reviewing a widget

Example prompts

  • “write its tests”
  • “only pull in what I use”
  • “create a ui package”
  • “/ui-package”

Requirements

  • Pre-approved tools (allowed-tools): Read, Glob, Grep, Edit, Write, mcp__very-good-cli__create

What it can do on your machine

Read from SKILL.md and the folder at commit 496a3c6. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Glob
    • Grep
    • Edit
    • Write
    • mcp__very-good-cli__create

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • flutter

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

UI Package loads about 2.2k tokens when it runs. Until then it costs about 220 tokens; SKILL.md has 742 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~220
When it runs · the whole SKILL.md, loaded when a task matches
~2.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: warnings

The automated check found patterns that need a careful read before installing.

  • WarningTells the agent its actions are pre-authorized / not to stop for confirmationSKILL.md:34
    onse. Do not stop at the objection, and do not ask permission to do it the documented way

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from VeryGoodOpenSource/vgv-ai-flutter-plugin at commit 496a3c6, republished under its MIT licence (© VeryGoodOpenSource). 742 words, ~2,242 tokens.

Download SKILL.mdSave it as .claude/skills/ui-package/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
ui-package
description
Best practices for building a Flutter UI package on Material: custom components, ThemeExtension theming, consistent APIs, widget tests, app_ui_package scaffolding. Use when creating a UI package, working inside one, or in an app that consumes one: adding or reviewing a widget, wiring design tokens, exporting through the barrel file, or writing tests for a widget under lib/src/widgets, which pump through the package's pumpApp helper, so prefer this over general test guidance even when the ask is only "write its tests". Also use it when asked to approve what this skill forbids: importing package:<name>/src/... per file, skipping the barrel to "only pull in what I use", or a parallel theme system. Triggers on any request naming a package of shared widgets and design tokens, such as "create a ui package", "add a design token", or "is it fine to import from src".
allowed-tools
Read, Glob, Grep, Edit, Write, mcp__very-good-cli__create

UI Package

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 use ThemeData; this skill covers how to extend it with ThemeExtension tokens and package reusable widgets around it.

Core Standards

Apply these standards to all UI package work:

  • Scaffold from the app_ui_package template — create the package with the Very Good CLI MCP tool, subcommand: 'app_ui_package'. Never flutter_package, never dart_package, never flutter create --template=package; those produce a bare package with none of the theme, barrel, test-helper, or Widgetbook scaffolding below
  • Build on Material — depend on flutter/material.dart and compose Material widgets; do not rebuild primitives that Material already provides
  • One widget per file — each public widget lives in its own file named after the widget in snake_case (e.g., app_button.dart)
  • Barrel file for public API — expose all public widgets and theme classes through a single barrel file (e.g., lib/my_ui.dart) that also re-exports material.dart, so one import gives a consumer both Material's widgets and the package's own and no second Material import is needed
  • lib/src/ is private — consumers import the barrel and nothing else; a per-file import such as package:my_ui/src/widgets/app_button.dart reaches into private implementation and breaks on any internal rename. Tree shaking already drops unused widgets, so the barrel costs nothing
  • Extend theming with ThemeExtension — use Material's ThemeData, ColorScheme, and TextTheme as the base (see Material Theming skill); add app-specific tokens (spacing, custom colors) via ThemeExtension<T>, register every one of them on ThemeData.extensions, and read them through a BuildContext extension (context.appColors, context.appSpacing)
  • Every widget has a corresponding widget test — behavioral tests verify interactions, callbacks, and state changes, pumped through the package's pumpApp helper rather than an inline MaterialApp
  • Decline anti-patterns with working code — when a request asks for something in the Anti-Patterns table, say why it is wrong and deliver the corrected implementation in the same response. Do not stop at the objection, and do not ask permission to do it the documented way
  • Prefix all public classes — use a consistent prefix (e.g., App, Vg) to avoid naming collisions with Material widgets
  • Use const constructors everywhere possible — all widget constructors must be const when feasible
  • Document every public member — every public class, constructor parameter, and method has a dartdoc comment

Package Structure

text
my_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

Building Widgets

Show full SKILL.md (312 more words)Show less
Widget API Guidelines
  • Compose Material widgets — use FilledButton, OutlinedButton, TextField, Card, etc. as building blocks
  • Accept only the minimum required parameters — avoid "kitchen sink" constructors
  • Use named parameters for everything except key and child/children
  • Provide sensible defaults derived from the theme when a parameter is not supplied
  • Expose callbacks with ValueChanged<T> or VoidCallback — do not use raw Function
  • Use Widget? for optional slot-based composition (leading, trailing icons, etc.)

Anti-Patterns

Anti-PatternCorrect 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 InheritedWidgetUse Material's ThemeData as the base and ThemeExtension for custom tokens
Hardcoding Color(0xFF...) in widget codeUse Theme.of(context).colorScheme for standard colors and context.appColors for custom tokens
Duplicating Material's ColorScheme roles in a custom classOnly create ThemeExtension tokens for values Material does not cover (e.g., success, warning, info)
Using dynamic or Object for callback typesUse VoidCallback, ValueChanged<T>, or specific function typedefs
Exposing internal implementation files directlyUse a barrel file; keep all files under src/ private

Creating the Package

Scaffold with the Very Good CLI MCP create tool:

ParameterValue
subcommandapp_ui_package — always, for every UI package
namethe package name in snake_case (e.g., storefront_ui)
output_directorythe monorepo directory holding shared packages (e.g., packages/)

app_ui_package is the template that ships the lib/src/theme extensions, the barrel file, the pumpApp helper, and the Widgetbook catalog. flutter_package gives you an empty package to rebuild by hand.

Cross-harness fallback. On a host without this plugin's Bash hooks and without the Very Good CLI MCP server connected, run the equivalent very_good create app_ui_package <package_name> --output-directory <dir> command directly.

See reference.md for the ThemeExtension class table (AppColors, AppSpacing, AppTheme, the BuildContext extension), the pumpApp test helper, a barrel file example, the Widgetbook catalog concepts and build_runner commands, and step-by-step workflows for adding a widget or a custom token.

© VeryGoodOpenSource, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files in skills/ui-package of VeryGoodOpenSource/vgv-ai-flutter-plugin.

  • SKILL.md
  • agents/openai.yaml
  • reference.md

Open the folder on GitHubat commit 496a3c6

Compare with similar skills

UI Package next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

UI Package compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
UI Package this skillVeryGoodOpenSource/vgv-ai-flutter-plugin169—~2.2kAutomated safety check: WarnMIT
UI UX Pro Maxsaoudi-h/solar-icons18218 repos~11kAutomated safety check: NotesCustom licence
Material 3hamen/material-3-skill1.5k2 repos~7.8kAutomated safety check: PassMIT
UI UX Pro MaxOhh-889/skyroc79526 repos~3.6kAutomated safety check: NotesMIT
Frontend UI StandardsMaxHan7/frontend-ui-standards-skill106—~2.4kAutomated safety check: PassMIT
UI UX Pro Maxshobcoder/shob577—~3.7kAutomated safety check: PassMIT

Similar skills

  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    182 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes
  • Material 3

    hamen/material-3-skill

    Implement Google's Material Design 3 (Material You) UI system.

    1.5k GitHub starsUsed in 2 repos~7.8k tokens
    Frontend & DesignAuto-check passed
  • UI UX Pro Max

    Ohh-889/skyroc

    UI/UX design intelligence. An agent skill from Ohh-889/skyroc.

    795 GitHub starsUsed in 26 repos~3.6k tokens
    Frontend & DesignAuto-check: notes
  • Frontend UI Standards

    MaxHan7/frontend-ui-standards-skill

    A skill your agent uses when implementing, refactoring, or reviewing frontend UI across SwiftUI, React, React Native, Flutter, web, or mobile apps.

    106 GitHub stars~2.4k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed
  • UI UX Pro Max

    shobcoder/shob

    UI/UX design intelligence expert for web and mobile applications.

    577 GitHub stars~3.7k tokensUpdated 19 days ago
    Frontend & DesignAuto-check passed
  • Uniwind

    Ohh-889/skyroc

    Uniwind — Tailwind CSS v4 styling for React Native. An agent skill from Ohh-889/skyroc.

    795 GitHub stars~1.4k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

More from VeryGoodOpenSource/vgv-ai-flutter-plugin

All 15 skills in this repo
  • Accessibility

    VeryGoodOpenSource/vgv-ai-flutter-plugin

    Audits or remediates Flutter widgets against WCAG 2.2 conformance levels A, AA, or AAA across iOS, Android, Web, macOS, Windows, and Linux, covering Semantics labels and screen reader output under…

    169 GitHub stars~4.2k tokensUpdated yesterday
    Auto-check passed
  • Animations

    VeryGoodOpenSource/vgv-ai-flutter-plugin

    Best practices for Flutter animations using the built-in animation framework, covering implicit animations, explicit AnimationController animations, page transitions, and Material 3 motion tokens.

    169 GitHub stars~3.5k tokensUpdated yesterday
    Auto-check passed
  • Bloc

    VeryGoodOpenSource/vgv-ai-flutter-plugin

    Best practices for Bloc state management in Flutter/Dart, covering Cubit versus Bloc, event and state naming, sealed classes with Equatable, the Page/View split with BlocProvider, BlocBuilder…

    169 GitHub stars~2k tokensUpdated yesterday
    Auto-check passed
  • Dart Flutter SDK Upgrade

    VeryGoodOpenSource/vgv-ai-flutter-plugin

    VGV-specific reference for bumping Dart and Flutter SDK constraints across packages, covering pubspec.yaml environment constraints, CI workflow Flutter versions, and SDK upgrade PR preparation.

    169 GitHub stars~2.6k tokensUpdated yesterday
    Auto-check: notes
  • Internationalization

    VeryGoodOpenSource/vgv-ai-flutter-plugin

    Best practices for internationalization (i18n) and localization (l10n) in Flutter, using the built-in flutterlocalizations and intl setup with ARB files as the single source of truth.

    169 GitHub stars~1.6k tokensUpdated yesterday
    Auto-check passed
  • Layered Architecture

    VeryGoodOpenSource/vgv-ai-flutter-plugin

    VGV layered monorepo architecture in Flutter: four layers Data, Repository, Business Logic, and Presentation, unidirectional dependency rules, and model transformation across layers.

    169 GitHub stars~4.6k tokensUpdated yesterday
    Auto-check passed

Works with

Questions about UI Package

What does UI Package do?

Best practices for building a Flutter UI package on Material: custom components, ThemeExtension theming, consistent APIs, widget tests, appuipackage scaffolding. UI Package is an agent skill from VeryGoodOpenSource/vgv-ai-flutter-plugin. Best practices for building a Flutter UI package on Material: custom components, ThemeExtension theming, consistent APIs, widget tests, appuipackage scaffolding.

When should I use UI Package?

UI Package fits situations like: creating a UI package; working inside one; in an app that consumes one: adding; reviewing a widget.

How do I install UI Package in Claude Code?

Run `npx skills add VeryGoodOpenSource/vgv-ai-flutter-plugin --skill ui-package -a claude-code`. Or copy the skill folder (skills/ui-package in VeryGoodOpenSource/vgv-ai-flutter-plugin) into .claude/skills/ui-package in your project. Claude Code loads it when a task matches its description.

How do I install UI Package in Codex?

Run `npx skills add VeryGoodOpenSource/vgv-ai-flutter-plugin --skill ui-package -a codex`. Or copy the skill folder (skills/ui-package in VeryGoodOpenSource/vgv-ai-flutter-plugin) into .agents/skills/ui-package in your project. Codex loads it when a task matches its description.

Can I use UI Package in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add VeryGoodOpenSource/vgv-ai-flutter-plugin --skill ui-package -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-package, .gemini/skills/ui-package, .github/skills/ui-package and .opencode/skills/ui-package in your project.

What does UI Package need to run?

Going by SKILL.md and its folder, UI Package needs the command-line tools its instructions call (flutter). Its frontmatter pre-approves these tools: Read, Glob, Grep, Edit, Write, mcp__very-good-cli__create.

Does UI Package access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is UI Package safe to install?

Our automated static check of SKILL.md flagged 1 warning(s): tells the agent its actions are pre-authorized / not to stop for confirmation. Read the flagged lines before installing; the check is not a guarantee either way.

What licence does UI Package use?

UI Package is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does UI Package use?

About 2.2k tokens (SKILL.md is roughly 9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to UI Package?

Skills that share tags, products or a category with UI Package: UI UX Pro Max (saoudi-h/solar-icons, 182 stars), Material 3 (hamen/material-3-skill, 1.5k stars), UI UX Pro Max (Ohh-889/skyroc, 795 stars) and Frontend UI Standards (MaxHan7/frontend-ui-standards-skill, 106 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains UI Package?

VeryGoodOpenSource (a GitHub organization) maintains it in VeryGoodOpenSource/vgv-ai-flutter-plugin, which has 169 GitHub stars. The repository holds 15 skills in this directory. The repository was last updated on October 6, 2026.

Source: VeryGoodOpenSource/vgv-ai-flutter-plugin on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.