# ui-package

> Claude/Codex skill by [@verygoodopensource](https://omgskills.com/library/verygoodopensource/index.md) · 173 stars · Updated 2026-10-20

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".

Tags: a11y, ai, best-practices, bloc, claude-code, dart, flutter, i18n, l10n, plugin, skills, state-management, testing, very-good-analysis, very-good-cli

## Install

```sh
git clone https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin /tmp/vgv-ai-flutter-plugin && ln -s /tmp/vgv-ai-flutter-plugin/skills/ui-package ~/.claude/skills/ui-package
```

## From README

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 appuipackage template — create the package with the Very Good CLI MCP tool, subcommand: 'appuipackage'.

## Links

- HTML page: https://omgskills.com/library/verygoodopensource/vgv-ai-flutter-plugin/skills/ui-package/
- GitHub: https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin
- Author: [@verygoodopensource](https://omgskills.com/library/verygoodopensource/index.md)

## More from this repo

- [accessibility](https://omgskills.com/library/verygoodopensource/vgv-ai-flutter-plugin/skills/accessibility/index.md) — Audits or remediates Flutter widgets against WCAG 2.2 conformance levels A, AA, or AAA across iOS, Android, Web, macOS,...
   - [@verygoodopensource](https://omgskills.com/library/verygoodopensource/index.md) · 173 stars
- [animations](https://omgskills.com/library/verygoodopensource/vgv-ai-flutter-plugin/skills/animations/index.md) — Best practices for Flutter animations using the built-in animation framework, covering implicit animations, explicit...
   - [@verygoodopensource](https://omgskills.com/library/verygoodopensource/index.md) · 173 stars
- [bloc](https://omgskills.com/library/verygoodopensource/vgv-ai-flutter-plugin/skills/bloc/index.md) — Best practices for Bloc state management in Flutter/Dart, covering Cubit versus Bloc, event and state naming, sealed...
   - [@verygoodopensource](https://omgskills.com/library/verygoodopensource/index.md) · 173 stars