Claude MarketplacesSubmit
madteacher avatar

Flutter Adaptive Ui

madteacher/mad-agents-skills

Teaches Claude to build Flutter UIs that adapt to screen size using constraints, not platform checks. You get breakpoint-driven layouts (compact under 600dp, medium to 840, expanded beyond), responsive navigation that switches between bars and rails, and a Capability/Policy pattern for platform behavior. The workflow is measure-then-branch: use MediaQuery for window decisions, LayoutBuilder for widget-level constraints, and never let content stretch unreadably wide on desktop. Includes starter code for adaptive navigation and concrete rules like "constraints down, sizes up, parent sets position." Solid if you're tired of hardcoding Platform.isIOS or breaking layouts when users resize windows.

skills.sh installs
2K
GitHub stars
112
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add madteacher/mad-agents-skills --skill flutter-adaptive-ui --agent claude-code

Installs into .claude/skills of the current project.

Files

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

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/madteacher/mad-agents-skills
Categories
Frontend Development, DevOps & CI/CD, Git & Pull Requests, Code Review & Quality, Debugging, Mobile Development

More from madteacher/mad-agents-skills

All 11

Recommended

More Frontend Development
1getsentry avatarsentry-tanstack-start-sdkgetsentry/sentry-for-aiFull Sentry SDK setup for TanStack Start React. Use when asked to "add Sentry to TanStack Start", "install @sentry/tanstackstart-react", or configure error moni2Kskills.sh installs
2nexu-io avatargpt-tastenexu-io/open-designElite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typograph2Kskills.sh installs
3enzed avatarr3f-loadersenzed/r3f-skillsReact Three Fiber asset loading - useGLTF, useLoader, Suspense patterns, preloading. Use when loading 3D models, textures, HDR environments, or managing loading2Kskills.sh installs
4kostja94 avatarbrandingkostja94/marketing-skillsWhen the user wants to define, audit, or apply brand strategy—purpose, values, positioning, storytelling, voice, narrative (not only visuals). Also use when the1.9Kskills.sh installs
5cognitedata avatardesigncognitedata/builder-skillsSimplified Aura guidance for selecting primitives, keeping token usage consistent, and applying reliable layout/copy/state patterns in Flows and Fusion apps.1.9Kskills.sh installs
6cognitedata avatarintegrate-atlas-chatcognitedata/builder-skillsMUST be used whenever building a chat UI with Atlas agents in a Flows app. Do NOT manually write useAtlasChat integration code — this skill handles installation1.9Kskills.sh installs