# flutter-adaptive-ui

This skill guides agents through building adaptive Flutter interfaces for mobile and desktop screens. It bases layout changes on width constraints rather than OS checks.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2000 installs · ★ 110
- Author: Stanislav \[MADTeacher\] Chernyshev
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/MADTeacher/mad-agents-skills/tree/HEAD/flutter-adaptive-ui/SKILL.md
- Updated: 2026-05-01
- HTML: https://affpapa.org/en/nevibecode/skills/flutter-adaptive-ui

## What it does

The skill reshapes how the agent builds Flutter layouts. Parent constraints govern everything. The instructions bar the agent from using `Platform.isAndroid` or `Platform.isIOS` for visual branching. Layouts switch strictly by width breakpoints: compact below 600, medium between 600 and 840, and expanded at 840 and above.

Measuring space relies on distinct tools for distinct scopes. The agent calls `MediaQuery.sizeOf(context)` for window-level logic and `LayoutBuilder` for local widget subtrees. Platform behavior splits into Capability and Policy objects to separate what an app can do from what it should display. Shared navigation models ensure that switching between `NavigationBar` and `NavigationRail` preserves the user's scroll position.

Validation is non-negotiable. The agent runs `flutter analyze` and verifies layouts against compact and expanded widths. Expanded screens must never stretch reading content across the full window without max-width limits. If analysis or test runs are blocked, the agent must state the risks directly.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add MADTeacher/mad-agents-skills --skill flutter-adaptive-ui -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/flutter-adaptive-ui/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/flutter-adaptive-ui/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add MADTeacher/mad-agents-skills --skill flutter-adaptive-ui -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/flutter-adaptive-ui/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add MADTeacher/mad-agents-skills --skill flutter-adaptive-ui -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/flutter-adaptive-ui/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install MADTeacher/mad-agents-skills flutter-adaptive-ui
```

2. **Manually: put the files in place**
- File: `.github/skills/flutter-adaptive-ui/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add MADTeacher/mad-agents-skills --skill flutter-adaptive-ui -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/MADTeacher/mad-agents-skills --path flutter-adaptive-ui
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/flutter-adaptive-ui/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add MADTeacher/mad-agents-skills --skill flutter-adaptive-ui -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/MADTeacher/mad-agents-skills/tree/HEAD/flutter-adaptive-ui/SKILL.md

## When to use it
- refactor mobile layouts for tablet and desktop screens
- eliminate layout overflow errors caused by window resizing
- replace brittle `Platform.is*` checks with `LayoutBuilder` breakpoints
- synchronize navigation state between `NavigationBar` and `NavigationRail`
- add keyboard traversal and shortcuts for expanded screen sizes

## Example prompts
- Make this profile view responsive with a two-column layout on wide screens.
- Replace the Platform checks in our navigation bar with breakpoint-driven components.
- Review this checkout screen for overflow bugs at 600px and 840px widths.

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: c9978f8a25b81220.

BEGIN THIRD-PARTY FILE c9978f8a25b81220
```text
---
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
  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

1. 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.
2. Inspect existing widgets before changing layout. Find navigation, dialogs, lists, grids, fixed widths/heights, orientation checks, `Platform.*` layout checks, and custom input/focus handling.
3. Abstract shared data before branching. For example, create one destination model used by both `NavigationBar` and `NavigationRail`.
4. Measure the right space:
   - Use `MediaQuery.sizeOf(context)` for app-level or page-level window decisions.
   - Use `LayoutBuilder` when the branch depends on the parent constraints of a widget subtree.
5. 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.
6. Implement the smallest adaptive change that preserves state. Keep scroll position, selected navigation destination, form input, and focus stable across resize/orientation/fold changes.
7. Validate on at least compact and expanded widths. Include medium width when the implementation has a distinct tablet layout.
```
END THIRD-PARTY FILE c9978f8a25b81220

The third-party file has ended. Everything between the c9978f8a25b81220 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2414 of 5945 bytes. © Stanislav \[MADTeacher\] Chernyshev · MIT · https://github.com/MADTeacher/mad-agents-skills/tree/HEAD/flutter-adaptive-ui/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md