flutter-adaptive-ui
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.
- Installs
- 2K
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/madteacher/mad-agents-skills --skill flutter-adaptive-ui- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads flutter-adaptive-ui automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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.
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.
FAQ
What does the flutter-adaptive-ui skill do?
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.
How do I install flutter-adaptive-ui?
Run npx skills add https://github.com/madteacher/mad-agents-skills --skill flutter-adaptive-ui in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/flutter-adaptive-ui/ (personal) or .claude/skills/flutter-adaptive-ui/ (project).
Which AI agents can use flutter-adaptive-ui?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is flutter-adaptive-ui safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains flutter-adaptive-ui?
It is published by madteacher in madteacher/mad-agents-skills. It has 1,995 recorded installs.
More from madteacher/mad-agents-skills
flutter-animations
madteacher/mad-agents-skills
Add, fix, refactor, debug, test, or explain Flutter animations and motion effects. Use when working with implicit animations such as AnimatedContainer, AnimatedOpacity, AnimatedSwitcher, and TweenAnimationBuilder; explicit animations using AnimationController, Tween, CurvedAnimation, AnimatedWidget, AnimatedBuilder, and built-in transitions; Hero/shared-element route transitions; staggered or sequenced animations; physics-based motion, gestures, springs, flings, scroll physics, curves, performance, accessibility, reduced motion, and animation lifecycle bugs.
flutter-architecture
madteacher/mad-agents-skills
Design, refactor, review, or implement Flutter app architecture using MVVM, layered UI/Data/optional Domain boundaries, feature-first or layer-first project structure, repositories, services, dependency injection, Result and Command patterns, offline-first or optimistic UI flows. Use when asked to add a Flutter feature, audit layer dependencies, fix cross-feature imports, migrate to feature-first, choose architecture for a Flutter project, or create scalable maintainable Flutter code organization.
flutter-testing
madteacher/mad-agents-skills
Write, fix, review, debug, and validate Flutter tests for apps, packages, and plugins. Use when adding unit tests, widget tests, integration tests, MethodChannel or plugin mocks, Mockito or mocktail test doubles, golden or accessibility checks, CI test commands, test failures, MissingPluginException, pump or pumpAndSettle problems, finder errors, buildrunner mock generation, device integration testing, web integration testing, or flaky Flutter tests.
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, caching, background isolates, repositories, services, and adaptation to existing http, Dio, Retrofit, Chopper, or custom API clients. Use when asked to add network requests, investigate network errors, harden API clients, handle auth, or validate Flutter network behavior.
flutter-drift
madteacher/mad-agents-skills
Implement, fix, review, migrate, test, or debug Drift persistence in Flutter apps using SQLite, driftflutter, type-safe Dart queries, generated tables, StreamBuilder or Riverpod StreamProvider UI, write operations, transactions, schema migrations, web assets, isolate sharing, and local database testing. Use when a Flutter task mentions drift, local database storage, SQLite, reactive database streams, CRUD, schemaVersion, buildrunner, driftdev make-migrations, migration tests, or Flutter-specific database setup across mobile, web, or desktop.
flutter-navigation
madteacher/mad-agents-skills
Implement, fix, refactor, review, migrate, or validate Flutter navigation and routing. Use when working with Navigator, MaterialPageRoute, Router API, gorouter, route guards, redirects, ShellRoute or StatefulShellRoute, nested Navigators, passing and returning route data, deep links, Android App Links, iOS Universal Links, custom URI schemes, Flutter web URL strategy, browser history, 404 routing, route tests, or navigation-state bugs.
Popular mobile skills
design-mobile-apps
designed-by-ai/skills
Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.
ios-design
uizze.sh
Design and review iOS UI/UX for iPhone apps in SwiftUI, UIKit, or React Native. Use for mobile app design, screen redesigns, navigation flows, typography, forms, keyboard and safe-area layout, and accessibility checks. Apply Apple Human Interface Guidelines and consult real product references through the optional Uizze connection.
vercel-react-native-skills
vercel-labs/agent-skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
animate-expo
emilkowalski/skills
Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.
xcode-project-setup
firebase/agent-skills
Safely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).
firebase-remote-config-basics
firebase/agent-skills
Manages Firebase Remote Config templates, feature flags, loading strategies, and SDKs (Android, iOS). Use when downloading/deploying remoteconfig JSON templates, managing version history/feature flags, setting in-app defaults, fetchAndActivate(), real-time listeners, or SDK setup. Don't use for Firebase Hosting, Auth, Firestore, Data Connect, Crashlytics, or App Hosting.