flutter-smell-layout-hotspots

Detect Flutter layout performance smells and prescribe ListView, const, and RepaintBoundary fixes.

Updated Nov 7, 2025
One-click install
npx skills add https://github.com/belluga/delphi-ai --skill flutter-smell-layout-hotspots
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: flutter-smell-layout-hotspots
Source: https://github.com/belluga/delphi-ai/tree/main/.cline/skills/flutter-smell-layout-hotspots
Command: npx skills add https://github.com/belluga/delphi-ai --skill flutter-smell-layout-hotspots

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identifies Flutter UI layout performance smells that cause jank and expensive rebuilds, guiding targeted refactors for smoother rendering.

Core Features & Use Cases

  • Detects layout anti-patterns such as IntrinsicHeight/IntrinsicWidth usage in hot paths, deep Column nesting, and frequent LayoutBuilder usage.
  • Recommends scalable fixes like replacing with ListView/SliverList, extracting heavy subtrees, and adding RepaintBoundary in high-cost regions.
  • Use Case: When a screen feels laggy during scroll, apply this Skill to locate hotspots and implement performance-friendly patterns.

Quick Start

Refactor heavy layouts by replacing deep Columns with scrollable lists and extracting reusable subtrees.

Frequently Asked Questions about flutter-smell-layout-hotspots

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

FAQPage Schema
Why does my Flutter app feel laggy during scrolling and how do I find the cause?

Flutter jank often stems from expensive layout hotspots. This Skill detects anti-patterns like IntrinsicHeight or LayoutBuilder in hot paths, guiding targeted refactors to eliminate expensive rebuilds and smooth scrolling.

How do I fix expensive layout rebuilds caused by deep Column nesting?

To fix deep Column nesting, replace heavy layouts with scrollable lists like ListView or SliverList. This Skill identifies deep widget trees and prescribes extracting reusable subtrees to reduce layout cost spikes.

When should I use RepaintBoundary to optimize Flutter UI performance?

Use RepaintBoundary in high-cost regions where frequent repaints cause jank. This Skill flags high-cost layout areas and recommends adding RepaintBoundary boundaries to isolate and optimize expensive rendering.

Does IntrinsicHeight cause performance issues in Flutter hot paths?

IntrinsicHeight and IntrinsicWidth cause severe performance issues in Flutter hot paths by forcing expensive layout calculations. This Skill detects these layout smells and recommends scalable replacements to eliminate jank.

What is the best way to refactor non-scrolling Columns in Flutter?

The best way to refactor non-scrolling Columns is replacing them with ListView or SliverList. This Skill detects heavy layout patterns and prescribes const widgets and scrollable list replacements to keep Flutter UIs smooth.