From relay
Reference pattern for enterprise Canvas Apps with vertical pill navigation. Three-zone layout: pill nav left, search bar top, tiles + table in body. Component-based with HtmlText containers. Use as a reference ONLY when the project or user-provided screenshot matches this pattern — not as a default. Stylist decides whether to use this pattern after reading the project context or analyzing the user's reference screenshot.
How this skill is triggered — by the user, by Claude, or both
Slash command
/relay:canvas-app-enterprise-layoutThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**This is a named reference pattern, not a default template.**
This is a named reference pattern, not a default template.
Stylist uses this when:
If a screenshot is provided, always use canvas-app-design-reading skill to read it
first — this reference fills in structural detail for the pill nav pattern.
┌────────────────────────────────────────────────────┐
│ [●] [────────── Search / Filter Bar ──────────] [👤] │
│ [●] │
│ [●] [ Tile ] [ Tile ] [ Tile ] [ Tile ] │
│ [●] │
│ [●] ┌─────────────────────────────────────┐ │
│ [●] │ Col 1 │ Col 2 │ Col 3 │ Col 4 │ │
│ │─────────────────────────────────── │ │
│ │ row │ row │ row │ row │ │
│ └─────────────────────────────────────┘ │
└────────────────────────────────────────────────────┘
Zone 1 — Pill nav (left, fixed, ~70px wide) Zone 2 — Search bar (top right of nav, ~80px tall, pill shape) Zone 3 — Content (tiles row + data table)
All visual containers use HtmlText with inline CSS. CSS dimensions must match Canvas control dimensions minus margin×2.
Pill nav container: border-radius:25px; width:30px; height:310px (for 50px×350px control)
Card/tile: border-radius:15px; height:260px (for 280px tall control)
Search bar: border-radius:30px (wide pill)
Standard shadow: box-shadow:0 3px 10px 5px rgba(0,0,0,0.12)
Card shadow: box-shadow:0 5px 8px 5px rgba(0,0,0,0.12)
Colours are NOT defined here — taken from design-system.md.
Screen
├── MENU (pill nav — full 5 icons, or compact 2 icons)
├── SEARCH_BAR (wide pill — dropdown + search input + reset)
├── TILE_ROW (N metric cards side by side)
├── DATA_TABLE (gallery with column header labels above)
└── POPUP (modal overlay — hidden by default)
If(gblScreen="Home", FullOpacity, HalfOpacity) on each iconReset(drpView); Reset(txtSearch); Set(varSearchText, "")(ContentArea.Width - gaps) / tileCount — not hardcoded pixelsFilter(Switch(drpView.Selected.Value, ...), search condition)Always add these — they were absent in the reference but should be standard:
Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub genb2nu/relay --plugin relay