shared/ — Reusable UI Building Blocks

Provide reusable Flutter UI widgets and mixins for presentation logic.

Updated Apr 13, 2026
One-click install
npx skills add https://github.com/Vantoan252003/Mozi --skill shared-reusable-ui-building-blocks
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shared/ — Reusable UI Building Blocks
Source: https://github.com/Vantoan252003/Mozi/tree/main/lib/shared
Command: npx skills add https://github.com/Vantoan252003/Mozi --skill shared-reusable-ui-building-blocks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enforces a clear separation between presentation and business logic by providing a consistent set of pure UI widgets, extension methods, and mixins that reduce duplication, prevent logic leakage, and ensure visual consistency across the app.

Core Features & Use Cases

  • Pure UI components: stateless widgets exposed via a widgets barrel that accept callbacks for all interactions.
  • Styling tokens: centralized styling through AppColors, AppTypography, and AppDimensions to eliminate hardcoded values.
  • Reusable mixins & extensions: loading, pagination, after-first-layout mixins and context/string/datetime/num/widget extensions for common behaviors and formatting.
  • Use cases: building form screens, paginated lists, overlays (dialogs/bottom sheets/snackbars), map UI elements, and consistent input controls across features.

Quick Start

Import shared/widgets/widgets.dart and use AppButton or AppTextField with callback props and AppColors/AppTypography tokens to build a consistent UI component.

Frequently Asked Questions about shared/ — Reusable UI Building Blocks

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

FAQPage Schema
How do I separate Flutter UI components from business logic?

To separate Flutter UI components from business logic, use pure stateless widgets and StatefulWidget mixins that accept callbacks for interactions, enforcing a clear boundary between presentation and feature logic.

How do I enforce consistent styling across Flutter widgets?

To enforce consistent styling across Flutter widgets, apply centralized styling tokens like AppColors, AppTypography, and AppDimensions, eliminating hardcoded values and ensuring visual consistency throughout the app.

What is the best way to build reusable Flutter form and paginated list screens?

The best way to build reusable Flutter form and paginated list screens is using shared UI building blocks with built-in loading and pagination mixins, applying callback-driven interactions to maintain consistent display patterns.

Can I use these Flutter UI mixins to handle loading states and after-first-layout tasks?

Yes, you can use these Flutter UI mixins to handle loading states and after-first-layout tasks. They provide reusable behaviors for common display patterns without duplicating logic across feature screens.

Do I need specific dependencies to use these Flutter UI building blocks?

No specific dependencies are required to use these Flutter UI building blocks. They provide stateless widgets, extension methods, and mixins that forbid feature imports, relying solely on your Flutter environment and styling tokens.

Why do my Flutter widgets have inconsistent styling and duplicated code?

Flutter widgets have inconsistent styling and duplicated code when hardcoded values and logic leak into presentation. Using a shared widgets barrel with centralized AppColors and AppTypography tokens eliminates this duplication.