Notation Guide

The stubui notation system lets you describe UI layout in plain ASCII text. Borrowed from Figma's auto layout mental model.

The Three Sizing Modes

Fill — stretches to fill available space

(~ fill ~)

Fixed — explicit/fixed width

[ fixed ]

Hug — shrinks to fit content

( hug )

Fill center with fixed width on sides

[logo] (~ nav ~) [btn]

Fixed sidebar with fill content

[ sidebar ] (~ content ~)

Centering a card

(~ ~) [ card ] (~ ~)

Width via dash count (compact to wide)

[btn]
[- - btn - -]
[- - - - btn - - - -]

Column layout

| col | col | col |

Rating

★ ★ ★ ☆ ☆

Progress bar

[████████░░░░░░░░] 50%

Stepper

(●)---(●)---(○)---( )
  1     2     3     4

Tree view

Root
+-- Folder
|   +-- File
+-- Folder

Timeline

  ●  Event
  |
  ○  Event
  |
  ○  Event

[ ]Fixed width container

( )Hug content container

(~ ~)Fill available space

- -Spacer / relative width (more = wider)

|Vertical divider / column separator

● / ○Active / inactive state

✓Complete / checked

★ / ☆Filled / empty (ratings)

≡Hamburger menu / collapsed

├── └── │Tree hierarchy connectors

█ ░Progress fill / empty

1. Start with the layout structure, then describe components within regions.

2. Use fill/fixed/hug notation to specify sizing intent clearly.

3. Include component names in brackets to be explicit: [DataTable], [Sidebar].

4. Reference pre-built layout templates from /layouts as starting points.

5. Copy ASCII blocks and paste directly into Claude Code prompts.