skills.rest
VGonPa
VGonPaCOMMUNITY
Explore all skills by this author →
Website𝕏@vgonpaGitHub

flutter-ui-craft

Implement Material 3 theming and ThemeExtension tokens for Flutter UI.

2|Updated Mar 14, 2026
Search Tags:#theming#ui#accessibility#animations#flutter#responsive-design#design-tokens
One-click install
npx skills add https://github.com/VGonPa/mobile-dev-agency --skill flutter-ui-craft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-ui-craft
Source: https://github.com/VGonPa/mobile-dev-agency/tree/main/plugins/mobile-design-squad/.claude/skills/flutter-ui-craft
Command: npx skills add https://github.com/VGonPa/mobile-dev-agency --skill flutter-ui-craft

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bridges design requirements and Flutter implementation by providing a cohesive theming system, design tokens, and scalable UI patterns that stay accessible and responsive.

Core Features & Use Cases

  • Implements Material 3 theming with ColorScheme.fromSeed, tokens via ThemeExtension, and responsive/adaptive layouts.
  • Supports animations, haptics, and accessible semantics through structured widget design.
  • Organizes UI components using atomic design, Widgetbook catalogs, and design-to-code alignment to speed up product delivery.

Quick Start

Define a brand color with ColorScheme.fromSeed, create ThemeExtension tokens for spacing, radius, and elevations, and compose a responsive, accessible UI scaffold.

Frequently Asked Questions about flutter-ui-craft

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

FAQPage Schema
How do I implement Material 3 theming with design tokens in Flutter?▼

Implement Material 3 theming in Flutter using ColorScheme.fromSeed and define design tokens via ThemeExtension classes for spacing, radius, and elevations to build a cohesive UI system.

What is the best way to build responsive Flutter layouts for mobile and desktop?▼

Build responsive Flutter layouts by applying dynamic layout patterns and adaptive scaffolds that adjust UI components automatically across mobile and desktop devices for optimal viewing.

How do you bridge design specs to pixel-perfect Flutter UI code?▼

Bridge design specs to Flutter code by aligning atomic design components with Widgetbook catalogs, ensuring structured widget design translates accurately into pixel-perfect interfaces.

Can I add haptic feedback and accessible semantics to Flutter widgets?▼

Yes, you can add haptic feedback and accessible semantics to Flutter widgets by applying structured widget design patterns that support animations and accessibility natively.

Does Flutter support ThemeExtension for custom spacing and elevation tokens?▼

Flutter supports ThemeExtension to create custom token classes for spacing, radius, and elevations, allowing you to systematically apply consistent design tokens across your application.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

flutter-theme-colors

Enforces Theme.of(context).colorScheme and textTheme usage across Flutter widgets.

Official
Intermediate
titabashtitabash

widgetbook

Generates and serves a Widgetbook catalog for Flutter UI components with interactive previews.

Community
Intermediate
lapc506lapc506
4

stitch_to_flutter

Converts Google Stitch HTML/Tailwind designs into Flutter/Dart UI code with Material 3 theming and Atomic Design structure.

Community
Intermediate
VGonPaVGonPa
2

building-flutter-widgets

Guide Flutter widget composition with Material Design 3 and responsive layouts.

Community
Intermediate