CtrlK
BlogDocsLog inGet started
Tessl Logo

flutter-fix-layout-issues

Fixes Flutter layout errors (overflows, unbounded constraints) using Dart and Flutter MCP tools. Use when addressing "RenderFlex overflowed", "Vertical viewport was given unbounded height", or similar layout issues.

63

Quality

75%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/flutter-fix-layout-issues/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

67%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured, actionable skill whose error-signature diagnostics and conditional fixes are its strongest asset — the checklist even includes visual verification and a retry loop. Weaker spots are padded explanation of causes Claude can infer, missing command for debug runs, and examples that occupy most of the body and could be offloaded to a reference file.

Suggestions

Trim inferable follow-up sentences (e.g. 'The parent provides infinite height, and the child attempts to expand infinitely') and show only the changed subtree in Output examples rather than repeating the full widget tree.

Make run/verify steps concrete: give the command (e.g. `flutter run` on the target device) and fix the garbled 'Run validator -> review errors -> fix' label to describe the actual visual verification.

Add short code examples for the two diagnosed errors that currently have prose-only fixes (InputDecorator unbounded width, Incorrect use of ParentData widget), or move the three full examples into a references/examples file to slim SKILL.md.

DimensionReasoningScore

Conciseness

The core value (error-signature → cause → conditional fix) is efficiently delivered, but several sentences re-explain what Claude already knows, e.g. "The parent provides infinite height, and the child attempts to expand infinitely" after the cause is already named, and "The text field attempts to determine its width based on infinite available space". Each example also duplicates the entire widget tree between the Input and Output blocks, which could be tightened to the changed subtree.

3 / 5

Actionability

Three complete, copy-paste-ready Dart before/after examples cover the common cases, and the fixes are keyed conditionally to exact error messages. It falls short of level 5 only in small gaps: 'Run the application in debug mode' gives no command (e.g. `flutter run`), and two of the five diagnosed errors (InputDecorator width, ParentData misuse) have checklist prose but no code example.

4 / 5

Workflow Clarity

The Task Progress checklist is a clear sequence (capture error → identify primary error → conditional fix → hot reload → verify UI → repeat if needed) with an explicit visual verification step and a retry loop, matching the level-4/5 territory. It stays at 4 because the phrasing 'Run validator -> review errors -> fix' is garbled relative to the actual step (visual inspection of the red/grey screen or overflow stripes), leaving a minor checkpoint gap versus the fully explicit level-5 anchor.

4 / 5

Progressive Disclosure

No bundle files exist and none are referenced, so this scores on body organization: a Contents TOC with anchor links, three well-delimited sections, and a consistently structured diagnostics table and example set make navigation easy. It is not a 5 because at ~124 lines with three full before/after examples (the majority of the body), the Examples section is a natural candidate for a one-level-deep references file, and there are no external references at all to signal.

4 / 5

Total

15

/

20

Passed

Description

82%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description with an explicit what and an unusually concrete when-clause built from exact error strings a developer would paste. Its main gap is breadth: it commits to one verb and two error categories rather than the fuller set of error signatures the body actually handles.

Suggestions

Broaden the action list to mirror the body's coverage, e.g. 'Diagnoses Flutter layout errors by error signature and applies the matching constraint fix (Expanded/Flexible/SizedBox wraps, ParentDataWidget re-parenting)'.

Add the remaining common trigger strings from the body — 'An InputDecorator...cannot have an unbounded width', 'Incorrect use of ParentData widget' — so more real-world error pastes match the when-clause.

DimensionReasoningScore

Specificity

The description names the domain ("Flutter layout errors") and two concrete problem categories ("overflows, unbounded constraints"), but the only action verb is "Fixes" — it does not list several distinct actions the way the level-4/5 anchors require. It is a clear single-purpose what, not comprehensive coverage of what the skill does (diagnose by error signature, apply conditional fixes, hot-reload verification).

3 / 5

Completeness

Both halves are explicit and concrete: what — "Fixes Flutter layout errors (overflows, unbounded constraints) using Dart and Flutter MCP tools"; when — "Use when addressing 'RenderFlex overflowed', 'Vertical viewport was given unbounded height', or similar layout issues". The when-clause includes concrete trigger phrases, matching the level-5 anchor; it is clearly above level 4, whose when-clause is only generically explicit.

5 / 5

Trigger Term Quality

Strong natural triggers: users would literally paste "RenderFlex overflowed" and "Vertical viewport was given unbounded height" verbatim, plus "overflows", "unbounded constraints", and "layout issues". Coverage falls short of level 5 because other common phrasings of the same need ("InputDecorator", "RenderBox was not laid out", "yellow/black stripes", "Pixel overflowed") are absent.

4 / 5

Distinctiveness Conflict Risk

A clear niche (Flutter layout/constraint errors) with distinct, near-verbatim error-message triggers. It would not fire for general Flutter dev, non-layout bugs, or other frameworks' layout problems, so conflict risk is minimal.

5 / 5

Total

17

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
flutter/agent-plugins
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.