Description
Add a skill that identifies and fixes common Flutter performance issues. The skill should guide through diagnosing performance bottlenecks using Flutter DevTools and applying targeted optimizations.
Areas to cover:
- Widget rebuild minimization —
const constructors, splitting widgets, RepaintBoundary, selective rebuilds with ValueListenableBuilder/BlocSelector
- List & scroll performance —
ListView.builder/GridView.builder for lazy loading, itemExtent for fixed-height lists, AutomaticKeepAliveClientMixin trade-offs
- Image optimization — caching with
CachedNetworkImage, proper cacheWidth/cacheHeight for decode-time savings, precaching
- Build & render pipeline — identifying expensive layouts, avoiding
Opacity widget for hiding (use Visibility), minimizing saveLayer triggers
- Debug tooling — using Flutter DevTools (Performance overlay, Widget rebuild tracker, Timeline),
debugPrintRebuildDirtyWidgets, debugProfileBuildsEnabled, profile mode vs debug mode for accurate measurements
- Shader compilation jank — warm-up strategies with
ShaderWarmUp, --cache-sksl for SkSL shaders
- Async & isolate patterns — offloading heavy computation to isolates via
Isolate.run/compute, debouncing rapid state changes
- Common anti-patterns — building widgets inside
build() methods, unnecessary setState scope, using GlobalKey excessively, deep widget trees
Requirements
Additional Context
This skill complements the existing vgv-bloc (state management efficiency), vgv-testing (golden tests for visual regressions), and vgv-ui-package (reusable widget design) skills by focusing on runtime performance characteristics.
Description
Add a skill that identifies and fixes common Flutter performance issues. The skill should guide through diagnosing performance bottlenecks using Flutter DevTools and applying targeted optimizations.
Areas to cover:
constconstructors, splitting widgets,RepaintBoundary, selective rebuilds withValueListenableBuilder/BlocSelectorListView.builder/GridView.builderfor lazy loading,itemExtentfor fixed-height lists,AutomaticKeepAliveClientMixintrade-offsCachedNetworkImage, propercacheWidth/cacheHeightfor decode-time savings, precachingOpacitywidget for hiding (useVisibility), minimizingsaveLayertriggersdebugPrintRebuildDirtyWidgets,debugProfileBuildsEnabled, profile mode vs debug mode for accurate measurementsShaderWarmUp,--cache-skslfor SkSL shadersIsolate.run/compute, debouncing rapid state changesbuild()methods, unnecessarysetStatescope, usingGlobalKeyexcessively, deep widget treesRequirements
Additional Context
This skill complements the existing
vgv-bloc(state management efficiency),vgv-testing(golden tests for visual regressions), andvgv-ui-package(reusable widget design) skills by focusing on runtime performance characteristics.