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 Use Column Row First

by evanca in evanca/flutter-ai-rules

A skill your agent uses when building any Flutter screen or component to choose responsive Row, Column, Expanded, Flexible, and Spacer layouts before fixed-size or coordinate-based alternatives.

MITAuto-check passedMobile

Install Flutter Use Column Row First

skills CLI
$ npx skills add evanca/flutter-ai-rules --skill flutter-use-column-row-first -a claude-code

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

GitHub CLI
$ gh skill install evanca/flutter-ai-rules flutter-use-column-row-first --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/evanca/flutter-ai-rules.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/flutter-use-column-row-first .claude/skills/flutter-use-column-row-first && 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-use-column-row-first
GitHub stars
649
Token cost
~1.3k tokens
SKILL.md length
566 words
Files
4 (incl. assets)
Skills in repo
37
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when building any Flutter screen or component to choose responsive Row, Column, Expanded, Flexible, and Spacer layouts before fixed-size or coordinate-based alternatives.

  • Works in 6 steps: Identify each group as primarily… → Start vertical groups with Column and… → Nest small, named widgets instead of… → …
  • Building any Flutter screen
  • SKILL.md covers Layout workflow, Rules, Avoid rigid layouts and Constraint safety, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Flutter Use Column Row First is an agent skill from evanca/flutter-ai-rules. Use when building any Flutter screen or component to choose responsive Row, Column, Expanded, Flexible, and Spacer layouts before fixed-size or coordinate-based alternatives.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including assets (for example `agents/openai.yaml`).

It sits in Mobile, covering Cross-platform mobile apps. It works with Flutter. The repository describes itself as: Flutter AI Skills and Rules for Claude, Codex, Cursor, and Other AI-Powered IDEs. The licence is MIT.

When your agent uses it

  • Building any Flutter screen
  • Component to choose responsive Row
  • Spacer layouts before fixed-size
  • Coordinate-based alternatives

Example prompts

  • “/flutter-use-column-row-first”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Identify each group as primarily vertical, horizontal, overlapping, scrolling, or wrapping.
  2. Start vertical groups with Column and horizontal groups with Row.
  3. Nest small, named widgets instead of building one deeply nested build method.
  4. Use Expanded, Flexible, and Spacer to distribute bounded free space.
  5. Add padding, alignment, aspect ratio, and constraints intentionally.
  6. Test narrow and wide constraints, text scaling, keyboard appearance, and long or localized content.

What it can do on your machine

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

    Links to these hosts (documentation or services it may open):

    • api.flutter.dev
    • docs.flutter.dev

    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 Use Column Row First loads about 1.3k tokens when it runs. Until then it costs about 51 tokens; SKILL.md has 566 words of instructions outside code blocks.

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

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 evanca/flutter-ai-rules at commit 7b9cce2, republished under its MIT licence (© evanca). 566 words, ~1,332 tokens.

Download SKILL.mdSave it as .claude/skills/flutter-use-column-row-first/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
flutter-use-column-row-first
description
Use when building any Flutter screen or component to choose responsive Row, Column, Expanded, Flexible, and Spacer layouts before fixed-size or coordinate-based alternatives.
license
MIT

Flutter Use Column Row First

Build responsive Flutter layouts from the constraint system outward. Prefer simple flex composition and introduce fixed dimensions or overlays only when the design requires them for a concrete purpose.

Layout workflow

  1. Identify each group as primarily vertical, horizontal, overlapping, scrolling, or wrapping.
  2. Start vertical groups with Column and horizontal groups with Row.
  3. Nest small, named widgets instead of building one deeply nested build method.
  4. Use Expanded, Flexible, and Spacer to distribute bounded free space.
  5. Add padding, alignment, aspect ratio, and constraints intentionally.
  6. Test narrow and wide constraints, text scaling, keyboard appearance, and long or localized content.

Rules

  • Prefer Column for vertical flow and Row for horizontal flow.
  • Control alignment with mainAxisAlignment, crossAxisAlignment, and mainAxisSize.
  • Use Expanded when a child must fill its allocated share of remaining main-axis space.
  • Use Flexible when a child may use less than its allocated share.
  • Use flex only to express proportional allocation. A child with flex: 2 receives twice the free-space share of a sibling with flex: 1.
  • Use Spacer for flexible separation between siblings. Use SizedBox for deliberate, fixed gaps.
  • Wrap text or other variable-width content in Expanded or Flexible inside a Row when it must yield space to siblings.
  • Use ListView or another scrollable when vertical content can exceed the viewport; Column does not scroll.
  • Use Wrap when horizontal children should move onto another run instead of shrinking or overflowing.
  • Use LayoutBuilder, breakpoints, or adaptive widgets when the composition itself must change with available space.
  • Use SafeArea when content must avoid system intrusions.

Avoid rigid layouts

Avoid these as default layout mechanisms:

  • Stack with hardcoded Positioned coordinates
  • Container, SizedBox, or ConstrainedBox with hardcoded screen-like width or height
  • offsets, transforms, or margins used to simulate normal document flow
  • screen dimensions copied from a mockup

Use them when they serve a concrete purpose, such as:

  • true visual overlap, badges, floating controls, or anchored decoration
  • touch-target minimums, icon sizes, thumbnails, or bounded media
  • intentional maximum reading width
  • aspect-ratio requirements
  • platform or design-system constants

State the purpose in the code structure or a brief comment when it is not obvious.

Show full SKILL.md (212 more words)Show less

Constraint safety

  • Put Expanded and Flexible only under Row, Column, or Flex.
  • Do not use non-zero flex along an unbounded main axis. In a vertical scrollable, remove vertical Expanded or Flexible, or establish a meaningful finite constraint.
  • Fix a nested Column that needs the outer column's remaining height by wrapping the inner column in Expanded.
  • Diagnose overflow by inspecting constraints and variable content before adding clipping or smaller hardcoded sizes.
  • Prefer scrolling for content that legitimately exceeds available space.

Preferred pattern

dart
Padding(
  padding: const EdgeInsets.all(16),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      const Header(),
      const SizedBox(height: 16),
      Expanded(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Flexible(flex: 2, child: PrimaryContent()),
            const SizedBox(width: 16),
            const Flexible(child: SecondaryContent()),
          ],
        ),
      ),
      const SizedBox(height: 16),
      const Actions(),
    ],
  ),
)

Change this composition at a breakpoint if the horizontal content cannot remain usable on a narrow screen; do not merely squeeze it.

Visual references

Inspect these diagrams when decomposing a mockup into nested flex layouts:

Use the diagrams as structural references, not as fixed pixel templates.

Verification

  • Confirm no RenderFlex overflow at supported viewport sizes.
  • Confirm text wraps or truncates intentionally.
  • Confirm flexible children receive bounded constraints.
  • Confirm scrollable content remains reachable.
  • Confirm fixed sizes and Stack or Positioned usages have a concrete design reason.

Sources

© evanca, 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 3 other files (assets) in skills/flutter-use-column-row-first of evanca/flutter-ai-rules.

  • SKILL.md
  • agents/openai.yaml
  • assets/flutter-nested-row-column-diagram_by_docs.flutter.dev.png
  • assets/flutter-row-column-pavlova-layout_by_docs.flutter.dev.png

Open the folder on GitHubat commit 7b9cce2

Compare with similar skills

Flutter Use Column Row First 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 Use Column Row First compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Flutter Use Column Row First this skillevanca/flutter-ai-rules649—~1.3kAutomated safety check: PassMIT
Add Flutter Docusaurus Localematthiasn/lotti1.2k—~1.2kAutomated safety check: PassGPL-3.0
Tm Launcher DesignFar-Se/tabame372—~3.1kAutomated safety check: PassMIT
Mobile App UI Designceorkm/mobile-app-ui-design400—~2kAutomated safety check: PassNone
Marionette Flutter Drive Appleancodepl/marionette_mcp473—~11kAutomated safety check: PassApache-2.0
Flutter ScreenshotJustLookAtNow/pt_mate503—~511Automated safety check: PassMIT

Similar skills

  • Add Flutter Docusaurus Locale

    matthiasn/lotti

    Add, complete, or audit a locale across a Flutter application's ARB catalogs and a localized Docusaurus manual, including generated localization code, locale selectors, native platform declarations…

    1.2k GitHub stars~1.2k tokensUpdated yesterday
    MobileAuto-check passed

  • Tm Launcher Design

    Far-Se/tabame

    Create or revise Tabame's Flutter launcher designs: frames, search bars, result rows, palettes, typography, and action dialogs.

    372 GitHub stars~3.1k tokensUpdated yesterday
    MobileAuto-check passed

  • Mobile App UI Design

    ceorkm/mobile-app-ui-design

    Design high-quality mobile app UI/UX screens, flows, and components.

    400 GitHub stars~2k tokensUpdated 3 mo ago
    MobileAuto-check passed

  • Marionette Flutter Drive App

    leancodepl/marionette_mcp

    Set up and drive a running Flutter app (debug or profile) with Marionette — an AI agent's hands and eyes for the app.

    473 GitHub stars~11k tokensUpdated 3 days ago
    MobileAuto-check passed

  • Flutter Screenshot

    JustLookAtNow/pt_mate

    Capture and show two Flutter UI screenshots for this project: one landscape/large-screen preview and one portrait/mobile preview, without using Flutter Web.

    503 GitHub stars~511 tokensUpdated 3 days ago
    MobileAuto-check passed

  • Flutter Init

    bear2u/my-skills

    A skill your agent uses when user wants to create a new Flutter project (Todo/Habit/Note/Expense/Custom domain) with Clean Architecture, Riverpod 3.0, Drift, and modern Flutter stack

    933 GitHub stars~2.5k tokensUpdated 3 mo ago
    MobileAuto-check passed

More from evanca/flutter-ai-rules

All 37 skills in this repo

  • Code Review

    evanca/flutter-ai-rules

    A skill your agent uses when asked to review a PR, MR, branch, or diff, audit changed files, or check code quality.

    649 GitHub stars~2.4k tokensUpdated 24 days ago
    Auto-check passed

  • Developing Genkit Dart

    evanca/flutter-ai-rules

    A skill your agent uses when building AI agents in Dart, implementing Genkit flows or tools, integrating LLMs into Dart or Flutter applications, or using Genkit Dart plugins.

    649 GitHub stars~961 tokensUpdated 24 days ago
    Auto-check passed

  • Generate Images With Firebase AI

    evanca/flutter-ai-rules

    A skill your agent uses when generating or editing images from Flutter/Dart with Firebase AI Logic and a Gemini image model (Nano Banana), making the first call work, choosing Gemini Developer API…

    649 GitHub stars~2.3k tokensUpdated 24 days ago
    Auto-check passed

  • Architecture Feature First

    evanca/flutter-ai-rules

    A skill your agent uses when creating a feature, designing folder structure, adding repositories/services/view models, wiring dependency injection, or deciding which layer owns logic.

    649 GitHub stars~1.9k tokensUpdated 24 days ago
    Auto-check passed

  • Bloc

    evanca/flutter-ai-rules

    A skill your agent uses when creating a Cubit or Bloc, modeling state with sealed classes or status enums, wiring BlocBuilder/BlocListener/BlocProvider, writing bloc tests, or choosing between Cubit…

    649 GitHub stars~2.8k tokensUpdated 24 days ago
    Auto-check passed

  • Dart 3 Updates

    evanca/flutter-ai-rules

    A skill your agent uses when writing switch statements, refactoring if-else chains, creating data classes, choosing records vs classes, destructuring values, or modernizing pre-Dart-3 code.

    649 GitHub stars~2k tokensUpdated 24 days ago
    Auto-check passed

Works with

Categories

Questions about Flutter Use Column Row First

What does Flutter Use Column Row First do?

A skill your agent uses when building any Flutter screen or component to choose responsive Row, Column, Expanded, Flexible, and Spacer layouts before fixed-size or coordinate-based alternatives. Flutter Use Column Row First is an agent skill from evanca/flutter-ai-rules. Use when building any Flutter screen or component to choose responsive Row, Column, Expanded, Flexible, and Spacer layouts before fixed-size or coordinate-based alternatives.

When should I use Flutter Use Column Row First?

Flutter Use Column Row First fits situations like: building any Flutter screen; component to choose responsive Row; spacer layouts before fixed-size; coordinate-based alternatives.

How do I install Flutter Use Column Row First in Claude Code?

Run `npx skills add evanca/flutter-ai-rules --skill flutter-use-column-row-first -a claude-code`. Or copy the skill folder (skills/flutter-use-column-row-first in evanca/flutter-ai-rules) into .claude/skills/flutter-use-column-row-first in your project. Claude Code loads it when a task matches its description.

How do I install Flutter Use Column Row First in Codex?

Run `npx skills add evanca/flutter-ai-rules --skill flutter-use-column-row-first -a codex`. Or copy the skill folder (skills/flutter-use-column-row-first in evanca/flutter-ai-rules) into .agents/skills/flutter-use-column-row-first in your project. Codex loads it when a task matches its description.

Can I use Flutter Use Column Row First 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 evanca/flutter-ai-rules --skill flutter-use-column-row-first -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-use-column-row-first, .gemini/skills/flutter-use-column-row-first, .github/skills/flutter-use-column-row-first and .opencode/skills/flutter-use-column-row-first in your project.

What does Flutter Use Column Row First need to run?

SKILL.md names no scripts, command-line tools or credentials: Flutter Use Column Row First is instructions for the agent only.

Does Flutter Use Column Row First access the network?

SKILL.md names 2 domains. As links in the text: api.flutter.dev and docs.flutter.dev. This is read from the text; nothing was executed.

Is Flutter Use Column Row First 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 Use Column Row First use?

Flutter Use Column Row First is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Flutter Use Column Row First use?

About 1.3k tokens (SKILL.md is roughly 5.3k 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 Use Column Row First?

Skills that share tags, products or a category with Flutter Use Column Row First: Add Flutter Docusaurus Locale (matthiasn/lotti, 1.2k stars), Tm Launcher Design (Far-Se/tabame, 372 stars), Mobile App UI Design (ceorkm/mobile-app-ui-design, 400 stars) and Marionette Flutter Drive App (leancodepl/marionette_mcp, 473 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Flutter Use Column Row First?

evanca (a GitHub user) maintains it in evanca/flutter-ai-rules, which has 649 GitHub stars. The repository holds 37 skills in this directory. The repository was last updated on September 14, 2026.

Source: evanca/flutter-ai-rules on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.