CtrlK
BlogDocsLog inGet started
Tessl Logo

flutter-build-responsive-layout

Use `LayoutBuilder`, `MediaQuery`, or `Expanded/Flexible` to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors.

66

Quality

80%

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

SKILL.md
Quality
Evals
Security

Quality

Content

82%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-constructed, self-contained skill body: concrete do/don't guidance, two executable examples, and sequenced workflows with validation steps. The main improvements are naming an actual validator command in the workflow checkpoints and trimming the introductory framing sentences. Structure is clean but entirely inline with no progressive-disclosure layer.

DimensionReasoningScore

Conciseness

The body is guideline-dense and mostly lean (e.g., "Constraints go down. Sizes go up. Parent sets position.") with little padding, but each section opens with a short framing sentence ("Determine the available space accurately to ensure layouts adapt...") and the constraints rule is knowledge Claude largely already has — anchor 4's "minor instances of over-explanation that could be trimmed" rather than anchor 5's every-token-earns-its-place.

4 / 5

Actionability

Two complete, copy-paste-ready Dart examples (`AdaptiveLayout` with LayoutBuilder and a concrete 600.0 breakpoint; `ConstrainedContent` with ConstrainedBox/Center/ListView.builder) plus specific widget-level directives ("`SliverGridDelegateWithMaxCrossAxisExtent` to automatically adjust column counts") cover the common cases, matching anchor 5's fully executable standard; not anchor 4 because no key details are missing.

5 / 5

Workflow Clarity

Both workflows are sequenced checklists with explicit branch conditions ("If `maxWidth > largeScreenMinWidth`..." else small-screen layout) and closing validation loops ("Run validator -> resize the application window -> review layout transitions -> fix overflow errors"). It stops short of anchor 5 because "Run validator" names no actual validator command and the feedback loop is a one-line arrow chain rather than explicit error-recovery guidance.

4 / 5

Progressive Disclosure

There are no bundle files, and the ~130-line body is well organized with a Contents list, clearly titled sections, and worked examples inline — good structure with minor organization gaps (anchor 4). It misses anchor 5's well-signaled one-level-deep references, and the >50-line simple-skill exception does not apply at this length.

4 / 5

Total

17

/

20

Passed

Description

78%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 that names concrete Flutter widgets and pairs a clear what with an explicit when clause. Its main gaps are missing common trigger synonyms (especially "responsive") and a slightly narrow when-scenario. It does not read as vague or padded.

DimensionReasoningScore

Specificity

The description lists several concrete tools — "Use `LayoutBuilder`, `MediaQuery`, or `Expanded/Flexible`" — and a specific outcome ("create a layout that adapts to different screen sizes"), giving minor gaps rather than anchor 5's comprehensive multi-action coverage; it names tools more than distinct actions, so it is above anchor 3's single-pair coverage.

4 / 5

Completeness

Both parts are explicit: the what ("Use `LayoutBuilder`, `MediaQuery`, or `Expanded/Flexible` to create a layout that adapts...") and the when ("Use when you need the UI to look good on both mobile and tablet/desktop form factors"). The when clause is single-scenario and could be more specific with additional trigger phrases, so it fits anchor 4 rather than anchor 5's multiple concrete triggers.

4 / 5

Trigger Term Quality

Natural phrases like "layout that adapts to different screen sizes" and "mobile and tablet/desktop form factors" are present alongside the widget names, but common variations users actually say — "responsive", "breakpoints", "foldables" — are missing, matching anchor 4 (good coverage, a few natural terms missing) rather than anchor 5's synonym/extension-complete set.

4 / 5

Distinctiveness Conflict Risk

It carves out a clear niche — Flutter adaptive/responsive layout — with highly distinct triggers (the specific widget names `LayoutBuilder`, `MediaQuery`, `Expanded/Flexible` plus "adaptive to screen sizes"), making wrong-skill firing unlikely, which matches anchor 5; anchor 4's "minor overlap risk" would apply only if the widget names were absent.

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.