Bevy UI Layout Agent Skill

Bevy UI layout

When to use

Load this when laying out HUD or menu nodes. Text content stays on bevy-ui-text. Colors and widget styling stay on bevy-ui-theming.

ECS shape

• Nodes: spawn Node entities. Children are child entities. Flexbox and CSS Grid are fields on Node.
• Widgets: ui_widgets::Button plus the Pressed marker for the held state. ImageNode for a texture. Text content stays on bevy-ui-text.
• Systems: layout is engine-owned. Game systems read Pressed and ComputedNode. They do not run a second layout pass.

A column fills the window. The button is a child with a fixed size. BackgroundColor is the fill. BorderRadius rounds the control.

use bevy::ui_widgets::Button;

fn spawn_menu(mut commands: Commands) {
    let root = commands
        .spawn(Node {
            width: Val::Percent(100.0),
            height: Val::Percent(100.0),
            flex_direction: FlexDirection::Column,
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Center,
            row_gap: Val::Px(12.0),
            ..default()
        })
        .id();
    commands.spawn((
        Button,
        Node {
            width: Val::Px(180.0),
            height: Val::Px(48.0),
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Center,
            border_radius: BorderRadius::all(CornerRadius::circular(Val::Px(6.0))),
            ..default()
        },
        BackgroundColor(Color::srgb(0.15, 0.15, 0.15)),
        ChildOf(root),
    ));
}

pub struct MenuPlugin;

impl Plugin for MenuPlugin {
    fn build(&self, app: &mut App) {
        app.add_systems(Startup, spawn_menu);
    }
}

One system writes BackgroundColor from the Pressed marker. That marker is the only signal this system reads, so it is the only writer of the button fill.

use bevy::ui::Pressed;
use bevy::ui_widgets::Button;

fn paint_buttons(mut buttons: Query<(&mut BackgroundColor, Has<Pressed>), With<Button>>) {
    for (mut color, pressed) in &mut buttons {
        *color = if pressed {
            BackgroundColor(Color::srgb(0.35, 0.75, 0.35))
        } else {
            BackgroundColor(Color::srgb(0.15, 0.15, 0.15))
        };
    }
}

A grid names its tracks on the parent. Each child sets grid_row and grid_column.

fn spawn_grid(mut commands: Commands) {
    let root = commands
        .spawn(Node {
            display: Display::Grid,
            width: Val::Percent(100.0),
            height: Val::Px(200.0),
            grid_template_columns: vec![GridTrack::flex(1.0), GridTrack::px(120.0)],
            grid_template_rows: vec![GridTrack::auto()],
            column_gap: Val::Px(8.0),
            ..default()
        })
        .id();
    commands.spawn((
        Node {
            grid_column: GridPlacement::start(1),
            grid_row: GridPlacement::start(1),
            ..default()
        },
        BackgroundColor(Color::srgb(0.2, 0.2, 0.4)),
        ChildOf(root),
    ));
}

An image is ImageNode plus a sized Node. The handle comes from AssetServer.

fn spawn_icon(mut commands: Commands, assets: Res<AssetServer>) {
    let image = assets.load("icons/sword.png");
    commands.spawn((
        ImageNode::new(image),
        Node {
            width: Val::Px(64.0),
            height: Val::Px(64.0),
            ..default()
        },
    ));
}

Widget map

| Need | Bevy idiom |

| --- | --- |

| Column or row | A Node entity. Children are child entities via ChildOf |

| Button | ui_widgets::Button plus the Pressed marker |

| Image | ImageNode sized by Node |

| Grid | Display::Grid, GridTrack, GridPlacement |

Scope

• Flex fields used above: flex_direction, justify_content, align_items, row_gap. Grid fields: display, grid_template_columns, grid_template_rows, grid_column, grid_row.
• bevy_feathers is a styled widget collection for editors. Game HUDs use Node, Button, and ImageNode.

Expert Knowledge Delta

Target: Bevy 0.20+.

Core ECS types: Component, Resource, Query, Commands, Startup, Update, Fixed / FixedMain (bevy::time), .chain(), Plugin, DefaultPlugins, MinimalPlugins. Messages and observers are an ownership slot. See bevy-events-messaging for their APIs. Systems run in parallel unless .chain() orders the ones that conflict.

Who owns state

| Piece | Owner | Who may mutate | Schedule |

| --- | --- | --- | --- |

| Data on one entity | Component | One system via Query | Update or FixedMain |

| One value for the whole app | Resource | One system | Startup to insert, then the schedule that reads it |

| Spawn | Commands | The spawning system | Startup for the initial world; later schedules for runtime spawn |

| Order that must not race | .chain() | The chained systems only | Same schedule |

| Plugin boundary | Plugin | build registers systems and resources | Before the app runs |

Borrow rule: two systems that both mutably query the same component must be ordered (.chain()) or split so only one writes. Unrelated systems stay parallel. That is the ECS page rule, not a guess at a system-set API.

Decision

| If you need | Do this | Do not |

| --- | --- | --- |

| Per-entity data | Component + Query | A free-floating struct outside the World |

| App-wide config or clock | Resource | Copy the value onto every entity |

| Stable simulation step | FixedMain and the Fixed clock | Tie simulation to raw frame Update |

| Startup spawn | Commands in Startup | Spawn from a render system |

| Cross-system notice that is not shared state | Message or observer slot in bevy-events-messaging | A new event type invented in this file |

| An API outside the documented set | Check the official docs first | A made-up crate or API |

Load references/ecs-ownership.md for the ownership table.

NEVER

• Do not pin /0.20.0/ in docs URLs. WHY: links stay on latest; the 0.20 target is stated once in prose.
• Do not mutably query the same component from two unordered systems. WHY: the schedule runs systems in parallel unless .chain() orders them.
• Do not invent a physics, navigation, networking, or XR crate here. WHY: this skill only names documented Bevy crates and modules.

• No control-tree anchors or container nodes. WHY: layout is Node fields, ChildOf, and ComputedNode.
• No invented APIs or unnamed third-party crates as the chosen solver. WHY: Bevy code stays idiomatic ECS and uses only documented Bevy APIs.

Reference

The library pin on bevy-master stays 0.20.

Official Documentation

• Assets - Official asset catalog.
• Examples - Example tree on the latest branch.
• ECS - Component, systems, Query, Startup, Update, and .chain().
• Plugins - Plugin, DefaultPlugins, MinimalPlugins, and add_plugins.
• UI examples - Node, Flexbox, grid, buttons, and images.

Related Skills

Prerequisites

• bevy-master - Hub and schedules.
• bevy-ecs-composition - Components and systems.

Complements

• bevy-ui-text - Text on a node.
• bevy-ui-theming - Colors and backgrounds.

Downstream / consumers

• bevy-ui-text - Consumes layout nodes.

Master

• bevy-master - Bevy router.