skills.rest
VeryGoodOpenSource
VeryGoodOpenSourceOFFICIAL
Explore all skills by this author →
Website𝕏@vgventuresGitHub

ui-package

Scaffolds and maintains Flutter UI packages with ThemeExtension tokens, barrel exports, and widget tests.

162|23|Updated Feb 27, 2026
Search Tags:#material design#design tokens#flutter#widget testing#widget library#themeextension#ui package
One-click install
npx skills add https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin --skill ui-package-verygoodopensource
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-package
Source: https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin/tree/main/skills/ui-package
Command: npx skills add https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin --skill ui-package-verygoodopensource

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building a reusable Flutter widget library involves many decisions — package scaffolding, theming architecture, public API design, and test setup — and getting any of them wrong leads to inconsistent widgets, broken imports, and duplicated theme systems. This Skill encodes VGV best practices so a UI package is structured correctly from the start. ## Core Features & Use Cases - Template-based scaffolding: Creates the package with the Very Good CLI app_ui_package template, which ships the theme extensions, barrel file, pumpApp test helper, and Widgetbook catalog. - Theming with ThemeExtension: Extends Material's ThemeData with custom tokens (AppColors, AppSpacing) registered on ThemeData.extensions and read through BuildContext shortcuts like context.appColors. - Barrel-only public API: Enforces a single barrel file that re-exports material.dart plus all public widgets, keeping lib/src/ private. - Widget testing: Every widget gets behavioral widget tests pumped through the package's pumpApp helper rather than an inline MaterialApp. - Use Case: Ask to add a new AppCard widget to your UI package — the Skill creates the widget composing Material components, exports it from the barrel, writes its widget tests, and adds Widgetbook use cases. ## Quick Start Ask the assistant to create a Flutter UI package named storefront_ui in the packages directory using the app_ui_package template.

Frequently Asked Questions about ui-package

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Flutter UI package with shared widgets?▼

Scaffold it with the Very Good CLI using the app_ui_package subcommand, which generates the theme extensions, barrel file, pumpApp test helper, and Widgetbook catalog. Avoid flutter_package or flutter create --template=package, which produce a bare package without this scaffolding.

How do I add custom design tokens to a Flutter theme?▼

Create ThemeExtension classes such as AppColors and AppSpacing implementing copyWith and lerp, register them on ThemeData.extensions, and expose them through a BuildContext extension like context.appColors. Only add tokens Material's ColorScheme does not already cover.

Should consumers import from package src files in Flutter?▼

No, consumers should import only the barrel file, which re-exports material.dart plus all public widgets. Importing package:name/src/... reaches into private implementation and breaks on internal renames, while tree shaking already removes unused widgets.

How do I write widget tests for a Flutter UI package?▼

Write behavioral widget tests that verify interactions, callbacks, and state changes, pumping the widget through the package's pumpApp helper instead of an inline MaterialApp. The helper wraps the widget in a MaterialApp configured with the package's AppTheme.

When should I not build a custom Flutter widget from scratch?▼

Do not rebuild primitives Material already provides, such as composing a button from GestureDetector and DecoratedBox. Compose Material widgets like FilledButton or Card and style them through the theme instead.

Related Skills

Explore More Software Engineering Skills→
vertivolatamvertivolatam
1

🎨 Skill: Theming Avanzado

Implement Material 3 theming with light, dark, and system modes in Flutter.

Official
Intermediate
gsmlg-appgsmlg-app
2

project-widget

Generate Flutter widget packages with Mason templates and barrel exports.

Official
Intermediate
DJ2695DJ2695

ui-shadcn-flutter

Build Flutter UIs with shadcn_flutter components and theming.

Community
Advanced
iusztinpauliusztinpaul
487

using-streamlit-custom-components

Install and integrate third-party custom components into Streamlit apps.

Community
Intermediate