skills.rest
adona9
adona9COMMUNITY
Explore all skills by this author →
GitHub

ui-builder

Generate Flutter UI components using AppColors, AppTypography, and AppSpacing tokens.

Updated Mar 27, 2026
Search Tags:#ui#component#theme#widget#flutter#dark-mode#design-tokens
One-click install
npx skills add https://github.com/adona9/flutter-dev-team-skills --skill ui-builder-adona9
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-builder
Source: https://github.com/adona9/flutter-dev-team-skills/tree/main/ui-builder
Command: npx skills add https://github.com/adona9/flutter-dev-team-skills --skill ui-builder-adona9

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building Flutter UIs from scratch can be time-consuming and error-prone without a shared design system. This skill provides a token-driven approach to implementing widgets, screens, and design primitives that stay consistent with the project's tokens.

Core Features & Use Cases

  • Token-driven UI: Leverages a centralized design system (colors, typography, spacing) to drive widget and layout implementation.
  • Dark-first & accessible: Optimized for dark theme and accessible contrasts across components.
  • Component Library: Generates a reusable set of widgets (avatar, buttons, inputs) aligned to tokens and patterns.
  • Use Case: Rapidly assemble feature screens by composing token-backed components, ensuring consistent visuals.

Quick Start

Create a new UI component by naming it and implementing it with the provided design tokens.

Frequently Asked Questions about ui-builder

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

FAQPage Schema
How do I generate Flutter UI components using a design token system?▼

The Skill generates production-ready Flutter UI components by applying centralized design tokens like AppColors, AppTypography, and AppSpacing, enforcing zero hard-coded values for visual consistency.

What is the best way to build dark-mode compatible Flutter widgets?▼

Building dark-mode compatible Flutter widgets requires a token-driven design system that enforces dark theme optimization and accessible color contrasts across generated components, avoiding hard-coded values.

Does this approach support generating reusable Flutter component libraries like buttons and inputs?▼

Yes, this approach generates a reusable Flutter component library including avatars, buttons, and inputs, strictly aligned to your project's design tokens and visual patterns for rapid screen assembly.

How do I assemble Flutter feature screens without hard-coded color or spacing values?▼

You assemble Flutter feature screens without hard-coded values by composing token-backed components that reference centralized AppColors and AppSpacing primitives, ensuring consistent visuals across the project.

Can I use this token-driven UI approach for existing Flutter projects?▼

Yes, you can apply this token-driven UI approach to existing Flutter projects, particularly those adopting centralized design tokens for colors, typography, and spacing to enforce consistent visual layouts.

What are the limitations of building Flutter UIs without a shared design system?▼

Building Flutter UIs without a shared design system is time-consuming and error-prone, lacking centralized token-driven styling, dark theme compatibility, and accessibility enforcement for consistent visual layouts.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

tailwind-design-system

Define Tailwind CSS design tokens as CSS variables with shadcn/ui wrappers.

Community
Advanced
thrutheskythruthesky

flutter-design-skill

Provide reusable Flutter widgets and design guidelines for a Comic UI.

Community
Intermediate
QunnnnQunnnn

flutter-refactor

Refactor Flutter widgets into reusable components and separate business logic.

Community
Intermediate
flutterflutter
2.8k

flutter-add-widget-preview

Configure Flutter Widget Previewer with @Preview annotations for isolated UI rendering.

Official
Intermediate