skills.rest
dimitriRemoiville
dimitriRemoivilleCOMMUNITY
Explore all skills by this author →
GitHub

widgets-and-screens

Generate Flutter screens and widgets with routing and bloc wiring.

1|Updated Apr 24, 2026
Search Tags:#testing#ui#flutter#dart#widgets#go_router#bloc
One-click install
npx skills add https://github.com/dimitriRemoiville/cc-mobile --skill widgets-and-screens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: widgets-and-screens
Source: https://github.com/dimitriRemoiville/cc-mobile/tree/main/plugins/cc-mobile-flutter/skills/widgets-and-screens
Command: npx skills add https://github.com/dimitriRemoiville/cc-mobile --skill widgets-and-screens

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Flutter UI development often suffers from inconsistent screen and widget wiring across routes, bodies, and blocs; this skill provides a repeatable playbook to standardize architecture and navigation.

Core Features & Use Cases

  • Structured page/view split: Page and View separation with blocs wired via DI.
  • Theming, routing, and accessibility: Material 3 ready, typed routing, and accessible widgets.
  • Reusable patterns: Encourages const widgets, stable keys, and testable views for rapid iteration.

Quick Start

Create a new screen by adding a Page and a View wired to a Bloc, with routes and theming configured per the playbook.

Frequently Asked Questions about widgets-and-screens

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

FAQPage Schema
How do I standardize Flutter screen and widget architecture across my app?▼

Standardize Flutter screen and widget architecture by applying a reusable blueprint with structured Page and View separation, routing, and bloc wiring. This enforces consistent architecture, accessible widgets, and testable views across ongoing UI development.

What is the best way to wire Flutter blocs into UI screens with routing?▼

Wire Flutter blocs into UI screens by using a structured page and view split with dependency injection. Typed routing via go_router connects the screens, while blocs manage state and ensure components remain testable.

How do I set up typed routing for Flutter widgets using go_router?▼

Set up typed routing for Flutter widgets by configuring go_router conventions alongside Material 3 theming. This provides a repeatable navigation structure that standardizes route wiring across the application.

Does this Flutter UI scaffolding approach require Material 3 theming?▼

Yes, this Flutter UI scaffolding approach requires Material 3 theming conventions. It also requires the Dart and Flutter SDK to generate the structured page and view splits with accessible widgets.

Can I use this pattern to create testable views with stable keys in Dart?▼

Yes, you can create testable views with stable keys in Dart using this pattern. The reusable blueprint encourages const widgets and stable keys, enabling rapid iteration and consistent UI testing across screens.

Why does Flutter UI development need a standardized screen and widget playbook?▼

Flutter UI development needs a standardized screen and widget playbook to solve inconsistent architecture and navigation. Without it, wiring across routes, bodies, and blocs becomes fragmented, making iterations and testing difficult.

Related Skills

Explore More Software Engineering Skills→
truongnattruongnat
1

flutter-pro

Review Flutter UIs for Material 3 theming, responsive layout, and accessibility.

Community
Advanced
MADTeacherMADTeacher
104

flutter-testing

Validate Flutter applications with unit, widget, and integration tests.

Community
Advanced
nksethnkseth

flutter-expert

Scaffold Flutter projects with Riverpod or Bloc and GoRouter navigation.

Community
Advanced
vertivolatamvertivolatam
1

MVVM Pattern

Implement MVVM architecture in Flutter using the provider package.

Official
Intermediate