Flutter Building Layouts
btwld/superdeck
Builds Flutter layouts using the constraint system and layout widgets.
Build, fix, review, and validate adaptive or responsive Flutter UIs for mobile, tablet, desktop, web, large screens, foldables, and mixed input devices.
Install Flutter Adaptive UI
$ npx skills add MADTeacher/mad-agents-skills --skill flutter-adaptive-ui -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install MADTeacher/mad-agents-skills flutter-adaptive-ui --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/MADTeacher/mad-agents-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/flutter-adaptive-ui .claude/skills/flutter-adaptive-ui && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "flutter-adaptive-ui" agent skill from https://github.com/MADTeacher/mad-agents-skills/tree/main/flutter-adaptive-ui into .claude/skills/flutter-adaptive-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "flutter-adaptive-ui", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/MADTeacher/mad-agents-skills/tree/main/flutter-adaptive-uiType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add MADTeacher/mad-agents-skills --skill flutter-adaptive-ui -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install MADTeacher/mad-agents-skills flutter-adaptive-ui --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/MADTeacher/mad-agents-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/flutter-adaptive-ui .agents/skills/flutter-adaptive-ui && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "flutter-adaptive-ui" agent skill from https://github.com/MADTeacher/mad-agents-skills/tree/main/flutter-adaptive-ui into .agents/skills/flutter-adaptive-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "flutter-adaptive-ui", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add MADTeacher/mad-agents-skills --skill flutter-adaptive-ui -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install MADTeacher/mad-agents-skills flutter-adaptive-ui --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/MADTeacher/mad-agents-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/flutter-adaptive-ui .cursor/skills/flutter-adaptive-ui && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "flutter-adaptive-ui" agent skill from https://github.com/MADTeacher/mad-agents-skills/tree/main/flutter-adaptive-ui into .cursor/skills/flutter-adaptive-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "flutter-adaptive-ui", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/MADTeacher/mad-agents-skills.git --path flutter-adaptive-ui--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add MADTeacher/mad-agents-skills --skill flutter-adaptive-ui -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install MADTeacher/mad-agents-skills flutter-adaptive-ui --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/MADTeacher/mad-agents-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/flutter-adaptive-ui .gemini/skills/flutter-adaptive-ui && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "flutter-adaptive-ui" agent skill from https://github.com/MADTeacher/mad-agents-skills/tree/main/flutter-adaptive-ui into .gemini/skills/flutter-adaptive-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "flutter-adaptive-ui", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install MADTeacher/mad-agents-skills flutter-adaptive-uiInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add MADTeacher/mad-agents-skills --skill flutter-adaptive-ui -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/MADTeacher/mad-agents-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/flutter-adaptive-ui .github/skills/flutter-adaptive-ui && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "flutter-adaptive-ui" agent skill from https://github.com/MADTeacher/mad-agents-skills/tree/main/flutter-adaptive-ui into .github/skills/flutter-adaptive-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "flutter-adaptive-ui", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add MADTeacher/mad-agents-skills --skill flutter-adaptive-ui -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install MADTeacher/mad-agents-skills flutter-adaptive-ui --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/MADTeacher/mad-agents-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/flutter-adaptive-ui .opencode/skills/flutter-adaptive-ui && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "flutter-adaptive-ui" agent skill from https://github.com/MADTeacher/mad-agents-skills/tree/main/flutter-adaptive-ui into .opencode/skills/flutter-adaptive-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "flutter-adaptive-ui", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
flutter-adaptive-ui- GitHub stars
- 110
- Token cost
- ~1.5k tokens
- SKILL.md length
- 687 words
- Files
- 9 (incl. references, assets)
- Skills in repo
- 11
- Repo updated
- First seen
- Licence
- MIT
At a glance
Build, fix, review, and validate adaptive or responsive Flutter UIs for mobile, tablet, desktop, web, large screens, foldables, and mixed input devices.
- Works in 7 steps: Identify the user flow, target form… → Inspect existing widgets before changing… → Abstract shared data before branching.… → …
- Creating breakpoint-driven layouts
- SKILL.md covers Principle 0, Workflow, Resource Routing and Implementation Rules, plus 2 more sections
- Runs Dart scripts from its folder; calls flutter
What it does
Flutter Adaptive UI is an agent skill from MADTeacher/mad-agents-skills. Build, fix, review, and validate adaptive or responsive Flutter UIs for mobile, tablet, desktop, web, large screens, foldables, and mixed input devices. Use when creating breakpoint-driven layouts, responsive navigation, adaptive dialogs/lists/grids, keyboard/mouse/touch behavior, window-size decisions with MediaQuery or LayoutBuilder, or Capability and Policy patterns for platform-specific behavior.
Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 10 other files, including reference files and assets (for example `references/adaptive-best-practices.md`, `references/adaptive-capabilities.md` and `references/adaptive-workflow.md`).
It sits in Mobile, covering Cross-platform mobile apps and Responsive design. It works with Flutter. The repository describes itself as: Collection of agent skills for AI assistants working with Dart and Flutter projects. The licence is MIT.
When your agent uses it
- Creating breakpoint-driven layouts
- Responsive navigation
- Adaptive dialogs/lists/grids
- Keyboard/mouse/touch behavior
Example prompts
- “/flutter-adaptive-ui”
Workflow steps
7 steps, taken from the first numbered list in SKILL.md.
- Identify the user flow, target form factors, supported platforms, and the expensive failure mode: overflow, unreadable wide content, lost…
- Inspect existing widgets before changing layout. Find navigation, dialogs, lists, grids, fixed widths/heights, orientation checks…
- Abstract shared data before branching. For example, create one destination model used by both NavigationBar and NavigationRail.
- Measure the right space
- Branch by breakpoints or capabilities, not by device type. Use compact/medium/expanded layouts for space changes; use Capability and…
- Implement the smallest adaptive change that preserves state. Keep scroll position, selected navigation destination, form input, and focus…
- Validate on at least compact and expanded widths. Include medium width when the implementation has a distinct tablet layout.
What it can do on your machine
Read from SKILL.md and the folder at commit 2fb67e3. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships script files (Dart), which the agent can run.
Shell commands in SKILL.md call:
flutter
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Flutter Adaptive UI loads about 1.5k tokens when it runs, and up to ~12k if it reads all its reference files. Until then it costs about 106 tokens; SKILL.md has 687 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from MADTeacher/mad-agents-skills at commit 2fb67e3, republished under its MIT licence (© MADTeacher). 687 words, ~1,487 tokens.
Download SKILL.mdSave it as
.claude/skills/flutter-adaptive-ui/SKILL.md (or your agent's skills folder). This skill also uses 8 other files; get the full folder from GitHub.- name
- flutter-adaptive-ui
- description
- Build, fix, review, and validate adaptive or responsive Flutter UIs for mobile, tablet, desktop, web, large screens, foldables, and mixed input devices. Use when creating breakpoint-driven layouts, responsive navigation, adaptive dialogs/lists/grids, keyboard/mouse/touch behavior, window-size decisions with MediaQuery or LayoutBuilder, or Capability and Policy patterns for platform-specific behavior.
- metadata.author
- Stanislav [MADTeacher] Chernyshev
- metadata.version
- 2.0
Flutter Adaptive UI
You are a Flutter adaptive UI implementation agent. Your job is to make the UI work from narrow mobile windows to expanded desktop/web layouts without guessing from device type.
Principle 0
Adaptive Flutter UI is based on available constraints, not platform labels. Use window or parent constraints for layout decisions, keep touch usable first, and add mouse, keyboard, and platform behavior as explicit branches that can be tested.
Core rule: constraints go down, sizes go up, parent sets position.
Default breakpoints:
- Compact: width < 600
- Medium: 600 <= width < 840
- Expanded: width >= 840
Workflow
- Identify the user flow, target form factors, supported platforms, and the expensive failure mode: overflow, unreadable wide content, lost state, inaccessible keyboard flow, or wrong platform behavior.
- Inspect existing widgets before changing layout. Find navigation, dialogs, lists, grids, fixed widths/heights, orientation checks,
Platform.*layout checks, and custom input/focus handling. - Abstract shared data before branching. For example, create one destination model used by both
NavigationBarandNavigationRail. - Measure the right space:
- Use
MediaQuery.sizeOf(context)for app-level or page-level window decisions. - Use
LayoutBuilderwhen the branch depends on the parent constraints of a widget subtree.
- Use
- Branch by breakpoints or capabilities, not by device type. Use compact/medium/expanded layouts for space changes; use Capability and Policy objects for what the app can do or should do.
- Implement the smallest adaptive change that preserves state. Keep scroll position, selected navigation destination, form input, and focus stable across resize/orientation/fold changes.
- Validate on at least compact and expanded widths. Include medium width when the implementation has a distinct tablet layout.
Resource Routing
| Task | Read/use | Purpose |
|---|---|---|
| Need the full adaptive design process | adaptive-workflow.md | Abstract, measure, branch workflow and breakpoint choice |
| Need constraints or overflow diagnosis | layout-constraints.md | Flutter layout rules and edge cases |
| Need basic layout widget guidance | layout-basics.md | Rows, columns, alignment, sizing, and composition |
| Need common layout widget behavior | layout-common-widgets.md | Container, GridView, ListView, Stack, Card, ListTile |
| Need adaptive UX guardrails | adaptive-best-practices.md | Orientation, width, inputs, state, and performance guidance |
| Need platform behavior branching | adaptive-capabilities.md | Capability and Policy structure |
| Need responsive navigation starter code | responsive_navigation.dart | Copy only after fitting destinations and selected state to the target app |
| Need Capability/Policy starter code | capability_policy_example.dart | Copy only after replacing placeholder behavior with real app services |
Do not read every reference by default. Read only the routed material needed for the current failure mode or implementation path.
Show full SKILL.md (293 more words)Show less
Implementation Rules
- Treat Dart snippets in
references/as explanatory fragments unless the reference explicitly says otherwise. Useassets/for starter code. - Do not use
Platform.isIOS,Platform.isAndroid, device names, orOrientationBuilderfor layout decisions. Use available width/constraints instead. - Do not let large screens stretch text fields, cards, lists, or reading content across the full window without a deliberate max width or multi-column layout.
- Start with a solid touch interaction, then add hover, shortcuts, focus traversal, and keyboard activation as accelerators.
- Use
GridView.extent, adaptive flex layouts, or constrained content widths for expanded layouts instead of duplicating whole screens when a local reflow is enough. - Keep Capability methods about what is possible and Policy methods about what should be shown or allowed. Name methods by the decision, not by the platform.
- Treat bundled assets as starter examples. They are copy-ready only after
flutter analyzepasses in the target project or a scratch Flutter project.
Validation
After changing a Flutter project:
- Run
flutter analyze. - Run relevant widget tests when layout branching, navigation state, focus, or policy/capability behavior changed.
- Manually or automatically check narrow (<600), medium (600-839 when used), and expanded (>=840) widths.
- Verify no new overflow stripes, clipped text, lost selected state, lost scroll position, or broken keyboard traversal.
- If validation cannot run, report the blocker and the risk. Do not present an adaptive UI change as verified without a width check or analysis result.
Fallback
If the target project lacks enough context to choose a final layout, implement the smallest reversible abstraction first: shared destination/data models, local LayoutBuilder branches, and isolated Capability/Policy interfaces. Ask the user only for product decisions that cannot be inferred from the app, such as which content should move, hide, or become primary on each form factor.
© MADTeacher, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 8 other files (references, assets) in flutter-adaptive-ui of MADTeacher/mad-agents-skills.
- SKILL.md
- assets/capability_policy_example.dart
- assets/responsive_navigation.dart
- references/adaptive-best-practices.md
- references/adaptive-capabilities.md
- references/adaptive-workflow.md
- references/layout-basics.md
- references/layout-common-widgets.md
- references/layout-constraints.md
Open the folder on GitHubat commit 2fb67e3
Compare with similar skills
Flutter Adaptive UI next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Flutter Adaptive UI this skillMADTeacher/mad-agents-skills | 110 | — | ~1.5k | Automated safety check: Pass | MIT | |
| Flutter Building Layoutsbtwld/superdeck | 130 | — | ~1.5k | Automated safety check: Pass | BSD-3-Clause | |
| Mobile Developmentrohitg00/awesome-claude-code-toolkit | 2.7k | — | ~1.5k | Automated safety check: Pass | Apache-2.0 | |
| Flutter Devaiskillstore/marketplace | 430 | 1 repos | ~1.3k | Automated safety check: Pass | MIT | |
| Flutter Build Responsive Layoutabdulmominsakib/localmind | 265 | 1 repos | ~1.7k | Automated safety check: Pass | MIT | |
| Iphone Duo Fluttermirzaaghazadeh/iphone-duo-skills | 144 | — | ~1.6k | Automated safety check: Pass | Custom licence |
Similar skills
Mobile Development
rohitg00/awesome-claude-code-toolkit
Mobile development patterns for React Native and Flutter including navigation, state management, and responsive design
Flutter Dev
aiskillstore/marketplace
Flutter cross-platform development guide covering widget patterns, Riverpod/Bloc state management, GoRouter navigation, performance optimization, and platform-specific implementations.
Flutter Build Responsive Layout
abdulmominsakib/localmind
Use LayoutBuilder, MediaQuery, or Expanded/Flexible to create a layout that adapts to different screen sizes.
Iphone Duo Flutter
mirzaaghazadeh/iphone-duo-skills
Adapt a Flutter app to iPhone Duo, Apple's first foldable iPhone — what MediaQuery gives you today, why displayFeatures does not work here, and how to bridge the iOS 27.1 reserved-region, hinge and…
AI Native UI
sickn33/agentic-awesome-skills
Web and App implementation guide for AI Native UI. An agent skill from sickn33/agentic-awesome-skills.
More from MADTeacher/mad-agents-skills
All 11 skills in this repoFlutter Internationalization
MADTeacher/mad-agents-skills
Add, fix, audit, and maintain Flutter internationalization with gen-l10n, ARB files, AppLocalizations, flutterlocalizations, intl formatting, plural/select messages, RTL support, locale-specific…
Flutter Networking
MADTeacher/mad-agents-skills
Implement, fix, debug, review, or refactor Flutter networking code for HTTP/REST APIs, WebSocket realtime flows, authentication and token refresh, request headers, timeouts, retries, JSON parsing…
Agents Md Generator
MADTeacher/mad-agents-skills
Create, generate, update, repair, trim, or split minimal AGENTS.md files for repository roots and confirmed nested modules using progressive disclosure.
Dart Drift
MADTeacher/mad-agents-skills
Build, fix, audit, and migrate Drift persistence in Dart CLI, server-side, and non-Flutter desktop apps.
Flutter Duit Bdui
MADTeacher/mad-agents-skills
Integrate, fix, review, migrate, test, or debug Duit / flutterduit backend-driven UI in Flutter applications.
Flutter Testing
MADTeacher/mad-agents-skills
Write, fix, review, debug, and validate Flutter tests for apps, packages, and plugins.
Related
Works with
Categories
Questions about Flutter Adaptive UI
What does Flutter Adaptive UI do?
Build, fix, review, and validate adaptive or responsive Flutter UIs for mobile, tablet, desktop, web, large screens, foldables, and mixed input devices. Flutter Adaptive UI is an agent skill from MADTeacher/mad-agents-skills. Build, fix, review, and validate adaptive or responsive Flutter UIs for mobile, tablet, desktop, web, large screens, foldables, and mixed input devices.
When should I use Flutter Adaptive UI?
Flutter Adaptive UI fits situations like: creating breakpoint-driven layouts; responsive navigation; adaptive dialogs/lists/grids; keyboard/mouse/touch behavior.
How do I install Flutter Adaptive UI in Claude Code?
Run `npx skills add MADTeacher/mad-agents-skills --skill flutter-adaptive-ui -a claude-code`. Or copy the skill folder (flutter-adaptive-ui in MADTeacher/mad-agents-skills) into .claude/skills/flutter-adaptive-ui in your project. Claude Code loads it when a task matches its description.
How do I install Flutter Adaptive UI in Codex?
Run `npx skills add MADTeacher/mad-agents-skills --skill flutter-adaptive-ui -a codex`. Or copy the skill folder (flutter-adaptive-ui in MADTeacher/mad-agents-skills) into .agents/skills/flutter-adaptive-ui in your project. Codex loads it when a task matches its description.
Can I use Flutter Adaptive UI in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add MADTeacher/mad-agents-skills --skill flutter-adaptive-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/flutter-adaptive-ui, .gemini/skills/flutter-adaptive-ui, .github/skills/flutter-adaptive-ui and .opencode/skills/flutter-adaptive-ui in your project.
What does Flutter Adaptive UI need to run?
Going by SKILL.md and its folder, Flutter Adaptive UI needs Dart for the scripts in its folder and the command-line tools its instructions call (flutter).
Does Flutter Adaptive UI access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Flutter Adaptive UI safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Flutter Adaptive UI use?
Flutter Adaptive UI is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Flutter Adaptive UI use?
About 1.5k tokens (SKILL.md is roughly 5.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 11k tokens, read only when the agent opens those files.
What are the alternatives to Flutter Adaptive UI?
Skills that share tags, products or a category with Flutter Adaptive UI: Flutter Building Layouts (btwld/superdeck, 130 stars), Mobile Development (rohitg00/awesome-claude-code-toolkit, 2.7k stars), Flutter Dev (aiskillstore/marketplace, 430 stars) and Flutter Build Responsive Layout (abdulmominsakib/localmind, 265 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Flutter Adaptive UI?
MADTeacher (a GitHub user) maintains it in MADTeacher/mad-agents-skills, which has 110 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on May 1, 2026.
Source: MADTeacher/mad-agents-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.