flutter-widget

Guides Flutter widget creation with theme-aware, composable UI and repository pattern compliance.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/oElberte/dotfiles --skill flutter-widget
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-widget
Source: https://github.com/oElberte/dotfiles/tree/main/private_dot_factory/skills/flutter-widget
Command: npx skills add https://github.com/oElberte/dotfiles --skill flutter-widget

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you build and refine Flutter widgets without drifting from your established design-system patterns or accidentally mixing UI concerns with business logic.

Core Features & Use Cases

  • Design-system alignment: Reuse existing theme tokens, spacing, typography, localization, and responsive helpers to keep UI consistent across the app.
  • Composable, theme-aware UI: Prefer small widgets and composition; keep widgets theme-aware and readable as the UI grows.
  • Practical refactoring & review: Use the checklist to guide adding new components, restructuring layout behavior, or reviewing an existing widget for correctness and maintainability.
  • Safety guardrails for UI: Avoid embedding networking, persistence, heavy transformations, or business logic inside UI widgets; limit StatefulWidget to local mutable UI state.

Quick Start

Create a new Flutter widget for a settings page row that follows the repository’s existing design-system tokens and composition style, and includes correct loading, empty, and error UI states.

Frequently Asked Questions about flutter-widget

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

FAQPage Schema
How do I prevent design system drift when building Flutter widgets?▼

To prevent design system drift in Flutter widgets, reuse existing repository theme tokens, spacing, typography, and localization helpers. This ensures UI consistency and keeps components theme-aware as the application scales.

How do I keep business logic out of Flutter UI widgets?▼

Keep business logic out of Flutter UI widgets by avoiding networking, persistence, and heavy transformations inside them. Limit StatefulWidget usage strictly to local mutable UI state to maintain a clean separation of concerns.

What is the best way to refactor Flutter widgets for better composition?▼

The best way to refactor Flutter widgets for composition is to prefer small, composable widgets that remain theme-aware. Use a refactoring checklist to restructure layout behavior and validate correctness, accessibility, and text-scaling.

How do I validate accessibility and text-scaling behavior in Flutter components?▼

Validate accessibility and text-scaling behavior in Flutter components by applying repository patterns for tokens and localization. Review widgets to ensure they handle loading, empty, and error UI states while remaining fully accessible.

Does this Flutter widget guidance work for reviewing existing UI code?▼

Yes, this guidance works for reviewing existing Flutter UI code. It provides a practical checklist to evaluate layout behavior, design-system alignment, and maintainability when restructuring or reviewing an existing widget.

When should I avoid using StatefulWidget in Flutter UI development?▼

Avoid using StatefulWidget in Flutter UI development when dealing with networking, persistence, or business logic. Restrict its use strictly to managing local mutable UI state to prevent accidental UI-layer coupling.