Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add zakariaf/Flutter-Skills --skill adaptive-layoutgit clone --depth 1 https://github.com/zakariaf/Flutter-SkillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/zakariaf/flutter-skills/adaptive-layout)<a href="https://agentmods.dev/skills/zakariaf/flutter-skills/adaptive-layout"><img src="https://agentmods.dev/badge/skills/zakariaf/flutter-skills/adaptive-layout.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00214 | $0.02587 |
| Opus 5 | $0.00107 | $0.01293 |
| Sonnet 5 | $0.00043 | $0.00517 |
| Haiku 4.5 | $0.00021 | $0.00259 |
Grade A, and why
adaptive-layout scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 169 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Adaptive Layout
Adapt to the space you are given, never to the device you think you are on. A phone in a foldable's front display, a resized desktop window, and a tablet in split-screen all defeat Platform.isX checks — but they all report their real constraints. Branch on width, not hardware.
Read the reference for the task at hand:
references/window-size-classes.md— the Material 3 window size-class breakpoints as a shared vocabulary, theWindowSizeClassenum pattern,MediaQuery.sizeOf/paddingOf/viewInsetsOfvs.of, readable max-width, SafeArea and display cutouts, keyboard insets, orientation, foldable hinge awareness.references/list-detail-and-navigation.md— single-pane-navigate vs side-by-side two-pane, choosing the navigation affordance by width and coordinating with the go_router shell, keeping selection state in a Notifier so both panes agree.
Run scripts/check_adaptive.sh before a PR.
Non-negotiable rules
-
Adapt by constraints/size, never by device or platform. No
Platform.isAndroid/Platform.isIOS/kIsWebto pick a layout. UseLayoutBuilder(local box constraints) orMediaQuery.sizeOf(context)(window size). WHY: a resized window, split-screen, and foldable all break device checks; constraints are always true. -
Use the Material 3 window size classes as the breakpoint vocabulary. Compact
<600, medium600–840, expanded840–1200, large1200–1600, extra-large≥1600(logical px width). WHY: these are STANDARD structural breakpoints (not design tokens); one shared enum keeps every screen's breakpoints identical. -
Read the narrowest MediaQuery aspect:
sizeOf/paddingOf/viewInsetsOf/viewPaddingOf, notMediaQuery.of(context). WHY:.ofsubscribes the widget to EVERY MediaQuery change (keyboard, rotation, text scale); the aspect getters rebuild only when that one field changes — seeflutter-performance. -
Pick the navigation affordance by width, not by a per-screen guess.
NavigationBar(compact) →NavigationRail(medium/expanded) →NavigationDrawer(large). Decide once in the shell. WHY: mixing affordances across screens disorients; one width→affordance map is consistent by construction. Coordinate withnavigation-and-routing'sStatefulShellRoute.
What ships with it
5 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago First seen · 169 lines · 214 tokens per session scan A c2b33266ac12
adaptive-layout is a skill published in the GitHub repository zakariaf/Flutter-Skills (2 stars, last pushed 8d ago), licensed MIT. It adds 214 tokens to every session and 2,587 once invoked, about $0.0011 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
frontend-design
Produce intentional, responsive, accessible UI work and perform visual QA instead of generic component assembly.
landing-page-generator
Generate complete, deploy-ready landing pages from any repository. Use when creating a homepage for an open-source project, building a project website, converting a README into a marketing page, or standardizing landing pages across multiple repos.
frame-build-minimal
Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.
frontend-design
A design and coding guide for building distinctive web interfaces, including pages, dashboards, landing pages, and reusable components.
component-design
Apply a coherent visual system, responsive behavior, interaction states, and accessibility to Kun components.
design-system-starter
Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.