UI UX Pro Max
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
Best practices for building a Flutter UI package on Material: custom components, ThemeExtension theming, consistent APIs, widget tests, appuipackage scaffolding.
The automated check flagged lines worth reading first. See the safety section below.
$ npx skills add VeryGoodOpenSource/vgv-ai-flutter-plugin --skill ui-package -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install VeryGoodOpenSource/vgv-ai-flutter-plugin ui-package --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "ui-package" agent skill from https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin/tree/main/skills/ui-package into .claude/skills/ui-package/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-package", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin/tree/main/skills/ui-packageType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add VeryGoodOpenSource/vgv-ai-flutter-plugin --skill ui-package -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install VeryGoodOpenSource/vgv-ai-flutter-plugin ui-package --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/ui-package .agents/skills/ui-package && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ui-package" agent skill from https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin/tree/main/skills/ui-package into .agents/skills/ui-package/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-package", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add VeryGoodOpenSource/vgv-ai-flutter-plugin --skill ui-package -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install VeryGoodOpenSource/vgv-ai-flutter-plugin ui-package --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/ui-package .cursor/skills/ui-package && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "ui-package" agent skill from https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin/tree/main/skills/ui-package into .cursor/skills/ui-package/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-package", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin.git --path skills/ui-package--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add VeryGoodOpenSource/vgv-ai-flutter-plugin --skill ui-package -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install VeryGoodOpenSource/vgv-ai-flutter-plugin ui-package --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/ui-package .gemini/skills/ui-package && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "ui-package" agent skill from https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin/tree/main/skills/ui-package into .gemini/skills/ui-package/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-package", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install VeryGoodOpenSource/vgv-ai-flutter-plugin ui-packageInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add VeryGoodOpenSource/vgv-ai-flutter-plugin --skill ui-package -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/ui-package .github/skills/ui-package && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "ui-package" agent skill from https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin/tree/main/skills/ui-package into .github/skills/ui-package/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-package", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add VeryGoodOpenSource/vgv-ai-flutter-plugin --skill ui-package -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install VeryGoodOpenSource/vgv-ai-flutter-plugin ui-package --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/ui-package .opencode/skills/ui-package && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "ui-package" agent skill from https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin/tree/main/skills/ui-package into .opencode/skills/ui-package/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-package", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
ui-packageBest 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. 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.
Read from SKILL.md and the folder at commit 496a3c6. It shows what the files ask for, not the result of running them.
Pre-approves these tools, so the agent can use them without asking each time:
ReadGlobGrepEditWritemcp__very-good-cli__createFrom allowed-tools in the SKILL.md frontmatter.
Shell commands in SKILL.md call:
flutterFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
The automated check found patterns that need a careful read before installing.
onse. Do not stop at the objection, and do not ask permission to do it the documented wayAutomated 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.
The full file from VeryGoodOpenSource/vgv-ai-flutter-plugin at commit 496a3c6, republished under its MIT licence (© VeryGoodOpenSource). 742 words, ~2,242 tokens.
.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.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:
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 belowflutter/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.dart, so one import gives a consumer both Material's widgets and the package's own and no second Material import is neededlib/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 nothingThemeExtension — 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)pumpApp helper rather than an inline MaterialAppApp, 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.yamlFilledButton, 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 |
Scaffold with the Very Good CLI MCP create tool:
| Parameter | Value |
|---|---|
subcommand | app_ui_package — always, for every UI package |
name | the package name in snake_case (e.g., storefront_ui) |
output_directory | the 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
SKILL.md and 2 other files in skills/ui-package of VeryGoodOpenSource/vgv-ai-flutter-plugin.
Open the folder on GitHubat commit 496a3c6
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| UI Package this skillVeryGoodOpenSource/vgv-ai-flutter-plugin | 169 | — | ~2.2k | Automated safety check: Warn | MIT | |
| UI UX Pro Maxsaoudi-h/solar-icons | 182 | 18 repos | ~11k | Automated safety check: Notes | Custom licence | |
| Material 3hamen/material-3-skill | 1.5k | 2 repos | ~7.8k | Automated safety check: Pass | MIT | |
| UI UX Pro MaxOhh-889/skyroc | 795 | 26 repos | ~3.6k | Automated safety check: Notes | MIT | |
| Frontend UI StandardsMaxHan7/frontend-ui-standards-skill | 106 | — | ~2.4k | Automated safety check: Pass | MIT | |
| UI UX Pro Maxshobcoder/shob | 577 | — | ~3.7k | Automated safety check: Pass | MIT |
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
hamen/material-3-skill
Implement Google's Material Design 3 (Material You) UI system.
Ohh-889/skyroc
UI/UX design intelligence. An agent skill from Ohh-889/skyroc.
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.
shobcoder/shob
UI/UX design intelligence expert for web and mobile applications.
Ohh-889/skyroc
Uniwind — Tailwind CSS v4 styling for React Native. An agent skill from Ohh-889/skyroc.
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…
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.
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…
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.
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.
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.
Works with
Categories
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.
UI Package fits situations like: creating a UI package; working inside one; in an app that consumes one: adding; reviewing a widget.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.