uno-toolkit-autolayout
Use AutoLayout control to arrange children with Figma-like spacing, alignment, and padding.
Datos de origen
- Repositorio
- unoplatform/studio
- Última actividad en el origen
- 9 de junio de 2026 a las 19:39
- Idioma detectado de SKILL.md
- inglés
- Estrellas
- 10
- Forks
- 1
Opciones de instalación
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Revisa los archivos de origen
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Mostrando SKILL.md
SKILL.md
Instrucciones de origen · Vista previa de solo lectura- name
- uno-toolkit-autolayout
- description
- Use AutoLayout control to arrange children with Figma-like spacing, alignment, and padding.
- when_to_use
- Use when building layouts that mirror Figma Auto-Layout, arranging children in rows or columns with uniform spacing, using space-between distribution, per-child alignment overrides (CounterAlignment), or converting Figma designs to XAML.
- metadata
- {"author":"uno-platform","version":"2.3","category":"toolkit"}
# Uno Toolkit AutoLayout — Agent Skill
## Workflow
> **Docs lookup:** call `uno_platform_docs_search(...)` first, then `uno_platform_docs_fetch(sourcePath="…")` using the `sourcePath` field from a result (a relative `.md` path; add the result's `anchor` for a section). Never pass a URL, a `.html` link, or a hand-built path.
### Step 1: Fetch the AutoLayout Documentation
```
uno_platform_docs_search("Uno Toolkit AutoLayout panel Figma spacing alignment")
```
Primary documentation page:
- **AutoLayout Control**: `external/uno.toolkit.ui/doc/controls/AutoLayoutControl.md`
Fetch the page:
```
uno_platform_docs_fetch(sourcePath="external/uno.toolkit.ui/doc/controls/AutoLayoutControl.md")
```
### Step 2: For How-To Walkthroughs
```
uno_platform_docs_search("AutoLayout howto walkthrough example Figma")
```
## Key Principles (Stable)
**Container properties** (set on the `<utu:AutoLayout>` element itself):
- `Orientation` — Horizontal or Vertical (primary axis)
- `Spacing` — gap between children (like Figma auto-layout spacing)
- `Justify` — SpaceBetween distribution
- `PrimaryAxisAlignment` — alignment on the primary axis (`Start`, `Center`, `End`, `Stretch`)
- `CounterAxisAlignment` — alignment on the cross axis (`Start`, `Center`, `End`, `Stretch`)
- `Padding` — Figma-anchor-style padding (`Thickness`)
**Per-child attached properties** (set on children of an `AutoLayout`, **note: NOT the same names as the container properties**):
- `utu:AutoLayout.PrimaryAlignment` — override on primary axis (`Auto` or `Stretch`)
- `utu:AutoLayout.CounterAlignment` — override on counter axis (`Start`, `Center`, `End`, `Stretch`) — **`CounterAlignment`, NOT `CounterAxisAlignment`**
- `utu:AutoLayout.PrimaryLength` — fixed size along orientation axis (`double`)
- `utu:AutoLayout.CounterLength` — fixed size perpendicular to orientation (`double`)
- `utu:AutoLayout.IsIndependentLayout` — absolute positioning (`bool`)
There is **no** `AutoLayout.Counterpart`, no `AutoLayout.SetCounterAxisAlignment(...)`, no `AutoLayout.Align`, no `AutoLayout.MainAxis`, no `AutoLayout.CrossAxis`. If unsure, the canonical surface is the table above — do not invent member names.
**XAML namespace:** `xmlns:utu="using:Uno.Toolkit.UI"`
## Related Skills
- [[uno-toolkit-responsive]] — Responsive layout based on screen size
Ver en GitHub