@tank/flutter-widget-architecture

Analyze Flutter widget trees to diagnose state, layout, and performance issues.

1|1|Updated Feb 20, 2026
One-click install
npx skills add https://github.com/tankpkg/packages --skill tank-flutter-widget-architecture
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: @tank/flutter-widget-architecture
Source: https://github.com/tankpkg/packages/tree/main/skills/flutter-widget-architecture
Command: npx skills add https://github.com/tankpkg/packages --skill tank-flutter-widget-architecture

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps Flutter developers diagnose and improve widget tree architecture, state management choices, layout behavior, and rebuild performance in real applications.

Core Features & Use Cases

It explains when to use StatelessWidget, StatefulWidget, InheritedWidget, keys, BuildContext, and lifecycle hooks so teams can make correct architectural decisions. It also covers Flutter layout constraints, responsive design patterns, composition over inheritance, and performance tuning techniques such as const widgets and RepaintBoundary. Use it when a screen rebuilds too often, list item state gets mixed up during reordering, a layout breaks on different screen sizes, or an app needs a cleaner production-ready widget structure.

Quick Start

Ask the skill to review your Flutter widget tree, identify architecture and performance problems, and recommend a clean production refactor.

Frequently Asked Questions about @tank/flutter-widget-architecture

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

FAQPage Schema
Why does my Flutter screen rebuild too often and how do I diagnose widget tree performance?

Diagnose Flutter widget rebuilds by analyzing widget tree architecture to identify unnecessary state updates and performance issues. Apply const widgets and RepaintBoundary to isolate and tune expensive rendering operations in production apps.

How do I fix Flutter list item state getting mixed up during reordering?

Fix Flutter list item state issues by selecting the correct widget keys to maintain Element identity. Analyzing widget architecture ensures StatefulWidget instances properly match list data during reordering operations.

When should I use StatefulWidget versus StatelessWidget for Flutter architecture?

Choose StatefulWidget when local mutable state is needed and StatelessWidget for static composition. Analyzing widget architecture determines correct state management choices and lifecycle hook usage for clean production structures.

How do I fix Flutter layout constraints breaking on different screen sizes?

Fix Flutter layout constraints breaking on different screen sizes by applying responsive design patterns. Analyze constraint behavior and slivers to ensure widgets scale cleanly across various production device dimensions.

What is the best way to refactor a Flutter widget tree for production?

Refactor a Flutter widget tree for production by favoring composition over inheritance. Review the architecture to identify state, layout, and performance issues, then restructure components using clean responsive patterns.

Does Flutter InheritedWidget work well for sharing state across a widget tree?

Flutter InheritedWidget works for sharing state across a widget tree via BuildContext. Analyze widget architecture to determine if InheritedWidget fits your state management needs or if cleaner alternatives are required.