diff --git a/.claude/skills/pen-canvas-layout/SKILL.md b/.claude/skills/pen-canvas-layout/SKILL.md new file mode 100644 index 000000000..2ce1a73a1 --- /dev/null +++ b/.claude/skills/pen-canvas-layout/SKILL.md @@ -0,0 +1,137 @@ +--- +name: pen-canvas-layout +description: "How design.pen (and the other .pen files) is organised on the canvas: components on boards at the top, one row per page below in app navigation order, variants left to right. Use whenever you add, move or rename a screen, component or note in a .pen file, or when the canvas looks disorganised." +--- + +## Scope + +- Binding for `design.pen` (dashboard). `website/website.pen` and `telemetry-receiver/telemetry-dashboard.pen` + follow the same two-zone principle (components on top, one row per page, variants to the right), with + their own page order (site navigation / dashboard views). The canonical row list below is for `design.pen` only. +- All access through the Pencil MCP (`mcp__pencil__execute`). Never Read, grep or edit `.pen` files (CLAUDE.md core rule 2). +- Pencil does not autosave. Ask the user to save in the Pencil UI before committing. + +## Two zones + +1. **Component band** (top of the canvas, y starts at 0): + - `HeroUI: Design System Components` board (`LtgNm`) at x=0, y=0. It is the imported HeroUI library and is not reorganised. + - `Gameplane: App Components` board directly to its right (x = LtgNm width + 400, y = 0). + - A note `Shared Components Band` sits 400 px above the Gameplane board. +2. **Screen rows** below the band: the first row starts 1200 px below the bottom of the taller board. + +## Component boards + +- Every reusable node (`reusable: true`) lives on a board. Never leave a component loose at the document root. +- Boards hold only components and their label text nodes. A board's name must end in `Components` + (`check-layout.js` and the componentize audit find boards by that suffix). The imported HeroUI board also keeps the library's own example frames (`ex1`, `tableEx`, `Modal Example`, …); `check-layout.js` skips that rule for boards whose name starts with `HeroUI`. +- Gameplane board sections, in this order: Shell & navigation; Login & public pages; Buttons & form controls; + Cards, rows & stats; Status rows, badges & chips; Banners; Menus, popovers & panels; Modals & dialogs; + Page blocks (larger page sections reused across screens, such as dashboard cards, module cards and wizard panels). +- Section label: text node named `Section · `, Inter 11 / weight 500, fill `$muted`, at x=160. +- Components are packed left to right 20 px below the label, 48 px apart, wrapping at 4400 px of content + width. The next section label starts 100 px below the section's tallest line. Board padding 160. +- The Gameplane board's fill is transparent (`#00000000`) so components show against the canvas. +- Board title text `Gameplane App Components` (Inter 20/600, `$foreground/foreground`) at (160, 87), with a + subtitle at (160, 117). +- To add a component: build it, `Move(id, boardId)`, then `Update(id, {x, y})` into its section. If the + section grows, move the sections below it down and grow the board with `Update(boardId, {height})`. + +## Screen rows + +- One row per page or surface: a page, a server-detail tab, a server-settings section, an admin-settings + section, a wizard step, or a multi-step dialog flow. +- Row label: a `note` at x = -1400, same y as the row, 1000 x 240, fontSize 48, named `Row NN ·