New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Flutter Building Layouts

by btwld in btwld/superdeck

Builds Flutter layouts using the constraint system and layout widgets.

BSD-3-ClauseAuto-check passedMobile

Install Flutter Building Layouts

skills CLI
$ npx skills add btwld/superdeck --skill flutter-building-layouts -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install btwld/superdeck flutter-building-layouts --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/btwld/superdeck.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/flutter-building-layouts .claude/skills/flutter-building-layouts && rm -rf skills-src

Use ~/.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/

Facts

Skill name
flutter-building-layouts
GitHub stars
130
Token cost
~1.5k tokens
SKILL.md length
578 words
Files
1
Skills in repo
23
Repo updated
First seen
Licence
BSD-3-Clause

At a glance

Builds Flutter layouts using the constraint system and layout widgets.

  • Refining the UI structure of a Flutter application
  • SKILL.md covers Contents, Core Layout Principles, Structural Widgets and Adaptive and Responsive Design, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Tasks that involve Cross-platform mobile apps

What it does

Flutter Building Layouts is an agent skill from btwld/superdeck. Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Mobile, covering Cross-platform mobile apps and Responsive design. It works with Flutter. The repository describes itself as: Presentation slides for Flutter with Flutter. The licence is BSD-3-Clause.

When your agent uses it

  • Refining the UI structure of a Flutter application
  • Tasks that involve Cross-platform mobile apps
  • Tasks that involve Responsive design

Example prompts

  • “Use the flutter-building-layouts skill to build Flutter layouts using the constraint system and layout widgets”
  • “/flutter-building-layouts”

What it can do on your machine

Read from SKILL.md and the folder at commit 815a746. 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

    No scripts in the folder and no shell commands in SKILL.md (its code samples are dart).

    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 Building Layouts loads about 1.5k tokens when it runs. Until then it costs about 42 tokens; SKILL.md has 578 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~42
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k

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 btwld/superdeck at commit 815a746, republished under its BSD-3-Clause licence (© btwld). 578 words, ~1,466 tokens.

Download SKILL.mdSave it as .claude/skills/flutter-building-layouts/SKILL.md (or your agent's skills folder).
name
flutter-building-layouts
description
Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.
metadata.model
models/gemini-3.1-pro-preview
metadata.last_modified
Thu, 12 Mar 2026 22:14:15 GMT

Architecting Flutter Layouts

Contents

Core Layout Principles

Master the fundamental Flutter layout rule: Constraints go down. Sizes go up. Parent sets position.

  • Pass Constraints Down: Always pass constraints (minimum/maximum width and height) from the parent Widget to its children. A Widget cannot choose its own size independently of its parent's constraints.
  • Pass Sizes Up: Calculate the child Widget's desired size within the given constraints and pass this size back up to the parent.
  • Set Position via Parent: Define the x and y coordinates of a child Widget exclusively within the parent Widget. Children do not know their own position on the screen.
  • Avoid Unbounded Constraints: Never pass unbounded constraints (e.g., double.infinity) in the cross-axis of a flex box (Row or Column) or within scrollable regions (ListView). This causes render exceptions.

Structural Widgets

Select the appropriate structural Widget based on the required spatial arrangement.

  • Use Row and Column: Implement Row for horizontal linear layouts and Column for vertical linear layouts. Control child alignment using mainAxisAlignment and crossAxisAlignment.
  • Use Expanded and Flexible: Wrap children of Row or Column in Expanded to force them to fill available space, or Flexible to allow them to size themselves up to the available space.
  • Use Container: Wrap Widgets in a Container when you need to apply padding, margins, borders, or background colors.
  • Use Stack: Implement Stack when Widgets must overlap on the Z-axis. Use Positioned to anchor children to specific edges of the Stack.
  • Use SizedBox: Enforce strict, tight constraints on a child Widget by wrapping it in a SizedBox with explicit width and height values.

Adaptive and Responsive Design

Apply conditional logic to handle varying screen sizes and form factors.

  • If fitting UI into available space (Responsive): Use LayoutBuilder, Expanded, and Flexible to dynamically adjust the size and placement of elements based on the parent's constraints.
  • If adjusting UI usability for a specific form factor (Adaptive): Use conditional rendering to swap entire layout structures. For example, render a bottom navigation bar on mobile, but a side navigation rail on tablets/desktop.
Show full SKILL.md (228 more words)Show less

Workflow: Implementing a Complex Layout

Follow this sequential workflow to architect and implement robust Flutter layouts.

Task Progress
  • Phase 1: Visual Deconstruction
    • Break down the target UI into a hierarchy of rows, columns, and grids.
    • Identify overlapping elements (requiring Stack).
    • Identify scrolling regions (requiring ListView or SingleChildScrollView).
  • Phase 2: Constraint Planning
    • Determine which Widgets require tight constraints (fixed size) vs. loose constraints (flexible size).
    • Identify potential unbounded constraint risks (e.g., a ListView inside a Column).
  • Phase 3: Implementation
    • Build the layout from the outside in, starting with the Scaffold and primary structural Widgets.
    • Extract deeply nested layout sections into separate, stateless Widgets to maintain readability.
  • Phase 4: Validation and Feedback Loop
    • Run the application on target devices/simulators.
    • Run validator -> review errors -> fix: Open the Flutter Inspector. Enable "Debug Paint" to visualize render boxes.
    • Check for yellow/black striped overflow warnings.
    • If overflow occurs: Wrap the overflowing Widget in Expanded (if inside a flex box) or wrap the parent in a scrollable Widget.

Examples

Example: Resolving Unbounded Constraints in Flex Boxes

Anti-pattern: Placing a ListView directly inside a Column causes an unbounded height exception because the Column provides infinite vertical space to the ListView.

dart
// BAD: Throws unbounded height exception
Column(
  children: [
    Text('Header'),
    ListView(
      children: [/* items */],
    ),
  ],
)

Implementation: Wrap the ListView in an Expanded Widget to bound its height to the remaining space in the Column.

dart
// GOOD: ListView is constrained to remaining space
Column(
  children: [
    Text('Header'),
    Expanded(
      child: ListView(
        children: [/* items */],
      ),
    ),
  ],
)
Example: Responsive Layout with LayoutBuilder

Implement LayoutBuilder to conditionally render different structural Widgets based on available width.

dart
Widget buildAdaptiveLayout(BuildContext context) {
  return LayoutBuilder(
    builder: (context, constraints) {
      // Conditional logic based on screen width
      if (constraints.maxWidth > 600) {
        // Tablet/Desktop: Side-by-side layout
        return Row(
          children: [
            SizedBox(width: 250, child: SidebarWidget()),
            Expanded(child: MainContentWidget()),
          ],
        );
      } else {
        // Mobile: Stacked layout with navigation
        return Column(
          children: [
            Expanded(child: MainContentWidget()),
            BottomNavigationBarWidget(),
          ],
        );
      }
    },
  );
}

© btwld, BSD-3-Clause. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/flutter-building-layouts of btwld/superdeck.

Open the folder on GitHubat commit 815a746

Compare with similar skills

Flutter Building Layouts 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.

Flutter Building Layouts compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Flutter Building Layouts this skillbtwld/superdeck130—~1.5kAutomated safety check: PassBSD-3-Clause
Flutter Adaptive UIMADTeacher/mad-agents-skills110—~1.5kAutomated safety check: PassMIT
Mobile Developmentrohitg00/awesome-claude-code-toolkit2.7k—~1.5kAutomated safety check: PassApache-2.0
Flutter Devaiskillstore/marketplace4301 repos~1.3kAutomated safety check: PassMIT
Flutter Build Responsive Layoutabdulmominsakib/localmind2611 repos~1.7kAutomated safety check: PassMIT
AI Native UIsickn33/agentic-awesome-skills47k1 repos~2.7kAutomated safety check: PassMIT

Similar skills

  • Flutter Adaptive UI

    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.

    110 GitHub stars~1.5k tokensUpdated 5 mo ago
    MobileAuto-check passed

  • Mobile Development

    rohitg00/awesome-claude-code-toolkit

    Mobile development patterns for React Native and Flutter including navigation, state management, and responsive design

    2.7k GitHub stars~1.5k tokensUpdated 4 mo ago
    MobileAuto-check passed

  • Flutter Dev

    aiskillstore/marketplace

    Flutter cross-platform development guide covering widget patterns, Riverpod/Bloc state management, GoRouter navigation, performance optimization, and platform-specific implementations.

    430 GitHub starsUsed in 1 repo~1.3k tokens
    MobileAuto-check passed

  • Flutter Build Responsive Layout

    abdulmominsakib/localmind

    Use LayoutBuilder, MediaQuery, or Expanded/Flexible to create a layout that adapts to different screen sizes.

    261 GitHub starsUsed in 1 repo~1.7k tokens
    MobileAuto-check passed

  • AI Native UI

    sickn33/agentic-awesome-skills

    Web and App implementation guide for AI Native UI. An agent skill from sickn33/agentic-awesome-skills.

    47k GitHub starsUsed in 1 repo~2.7k tokens
    MobileAuto-check passed

  • 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…

    142 GitHub stars~1.6k tokensUpdated yesterday
    MobileAuto-check passed

More from btwld/superdeck

All 23 skills in this repo

  • Superdeck Presentations

    btwld/superdeck

    Create, review, or edit SuperDeck Markdown presentations and Flutter presentation apps.

    130 GitHub stars~649 tokensUpdated 10 days ago
    Auto-check passed

  • Flutter Adding Home Screen Widgets

    btwld/superdeck

    Adds home screen widgets to a Flutter app for Android and iOS.

    130 GitHub stars~2.2k tokensUpdated 10 days ago
    Auto-check passed

  • Flutter Animating Apps

    btwld/superdeck

    Implements animated effects, transitions, and motion in a Flutter app.

    130 GitHub stars~1.9k tokensUpdated 10 days ago
    Auto-check passed

  • Flutter Architecting Apps

    btwld/superdeck

    Architects a Flutter application using the recommended layered approach (UI, Logic, Data).

    130 GitHub stars~1.8k tokensUpdated 10 days ago
    Auto-check passed

  • Flutter Building Forms

    btwld/superdeck

    Builds Flutter forms with validation and user input handling.

    130 GitHub stars~1.4k tokensUpdated 10 days ago
    Auto-check passed

  • Flutter Building Plugins

    btwld/superdeck

    Builds Flutter plugins that provide native interop for other apps to use.

    130 GitHub stars~2.2k tokensUpdated 10 days ago
    Auto-check passed

Works with

Categories

Questions about Flutter Building Layouts

What does Flutter Building Layouts do?

Builds Flutter layouts using the constraint system and layout widgets. Flutter Building Layouts is an agent skill from btwld/superdeck. Builds Flutter layouts using the constraint system and layout widgets.

When should I use Flutter Building Layouts?

Flutter Building Layouts fits situations like: refining the UI structure of a Flutter application; tasks that involve Cross-platform mobile apps; tasks that involve Responsive design.

How do I install Flutter Building Layouts in Claude Code?

Run `npx skills add btwld/superdeck --skill flutter-building-layouts -a claude-code`. Or copy the skill folder (.agents/skills/flutter-building-layouts in btwld/superdeck) into .claude/skills/flutter-building-layouts in your project. Claude Code loads it when a task matches its description.

How do I install Flutter Building Layouts in Codex?

Run `npx skills add btwld/superdeck --skill flutter-building-layouts -a codex`. Or copy the skill folder (.agents/skills/flutter-building-layouts in btwld/superdeck) into .agents/skills/flutter-building-layouts in your project. Codex loads it when a task matches its description.

Can I use Flutter Building Layouts 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 btwld/superdeck --skill flutter-building-layouts -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-building-layouts, .gemini/skills/flutter-building-layouts, .github/skills/flutter-building-layouts and .opencode/skills/flutter-building-layouts in your project.

What does Flutter Building Layouts need to run?

SKILL.md names no scripts, command-line tools or credentials: Flutter Building Layouts is instructions for the agent only.

Does Flutter Building Layouts 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 Building Layouts 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 Building Layouts use?

Flutter Building Layouts is published under the BSD-3-Clause licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Flutter Building Layouts 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.

What are the alternatives to Flutter Building Layouts?

Skills that share tags, products or a category with Flutter Building Layouts: Flutter Adaptive UI (MADTeacher/mad-agents-skills, 110 stars), Mobile Development (rohitg00/awesome-claude-code-toolkit, 2.7k stars), Flutter Dev (aiskillstore/marketplace, 430 stars) and Flutter Build Responsive Layout (abdulmominsakib/localmind, 261 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Flutter Building Layouts?

btwld (a GitHub organization) maintains it in btwld/superdeck, which has 130 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on September 28, 2026.

Source: btwld/superdeck on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.