Update to vDesign

{
  "description": "Author and edit vDesign documents — posters, slides, hero sections, card grids, any laid-out visual document — in the .vd DSL. Use when asked to create, change, or read a vDesign document, a .vd file, or when a task involves designing a layout that should stay editable and relational rather than being flattened to fixed coordinates.",
  "included_files": [
    {
      "relative_path": "examples/cards.vd",
      "size_in_bytes": 1008
    },
    {
      "relative_path": "examples/deck.vd",
      "size_in_bytes": 1710
    },
    {
      "relative_path": "examples/hero.vd",
      "size_in_bytes": 1020
    },
    {
      "relative_path": "examples/slide.vd",
      "size_in_bytes": 577
    },
    {
      "relative_path": "reference/edits.md",
      "size_in_bytes": 4600
    },
    {
      "relative_path": "reference/grammar.md",
      "size_in_bytes": 8090
    },
    {
      "relative_path": "reference/motion.md",
      "size_in_bytes": 4362
    },
    {
      "relative_path": "reference/nodes.md",
      "size_in_bytes": 13100
    }
  ],
  "name": "vdesign",
  "skill_md_contents": "---\nname: vdesign\ndescription: Author and edit vDesign documents — posters, slides, hero sections, card grids, any laid-out visual document — in the .vd DSL. Use when asked to create, change, or read a vDesign document, a .vd file, or when a task involves designing a layout that should stay editable and relational rather than being flattened to fixed coordinates.\n---\n\n# Authoring vDesign documents\n\nA vDesign document is a tree of boxes whose geometry is **declarative**. A property holds\neither a number or an expression, and expressions are stored as written and resolved on\nread. `w=(100% - $gap * 2)` stays that formula in the file forever; change `$gap` and\neverything bound to it moves.\n\nThat is the entire point of the format, and it is what you are being asked for. A document\nfull of literal coordinates is a worse version of a Figma file. A document of expressions\nand tokens can be edited by changing one number.\n\n## The output contract\n\nEmit **only DSL lines**. No prose before or after, no explanation, no JSON. A fenced block\nis tolerated but unnecessary.\n\n## The grammar in one screen\n\n```\nversion 4\nkind design\ntitle \"Launch hero\"\n$gap = 24\n$accent = #5b5bd6\n$paper = #ffffff\n$highlight = #ffd166\n\nfont display = Inter\n  fallback \"system-ui, sans-serif\"\n\nframe page w=1280 h=720 background=paper\n  rect hero.bg x=$gap y=24 w=(100% - $gap * 2) h=260 fill=accent radius=16\n  text hero.title x=(@hero.bg.left + 32) y=64 w=560 h=82 size=34 weight=700 fill=paper\n    \"An open substrate for the \"\n    \"agent era\" fill=highlight\n  group cards\n    rect card.1 x=$gap y=(@hero.bg.bottom + $gap) w=((100% - $gap * 4) / 3) h=200\n```\n\n- **The first lines are the header.** `version 4` and `kind design`. Write both. `design`\n  is the free-form canvas and is the only kind that exists today; a document that does not\n  say which it is leaves every reader to guess from its contents.\n- **Then `title \"…\"`** — a short human name for what you are making, two to five words\n  (\"Coffee shop landing\", not \"Document\"). It is what the tab shows, so write it before the\n  first page: the name should appear while the design is still arriving.\n- **Two spaces of indent is one level.** Indentation is the only nesting.\n- A line is `<type> <id> key=value key=value …`.\n- A **quoted line** under a `text` node is one run of its content.\n- A **boolean is a bare flag**: `italic`, never `italic=true`.\n- **There are no comments.** `#` already starts a colour. Anything trailing a value is an\n  error rather than something to ignore, so do not annotate the document.\n\n### The one rule worth memorising\n\n> A value is an **expression** if it starts with `$`, `@`, or `(`. Everything else is a\n> literal.\n\nSo `x=$gap` and `x=@logo.right` need no parentheses, and everything else that is an\nexpression does: `y=(prev.bottom + 12)`, `w=(50%)`, `y=(parent.h / 2)`. A quoted value is\nalways a literal, which is how you write a string that starts with a sigil: `fill=\"$brand\"`.\n\n## Rules that decide whether the output is any good\n\n**1. Write relationships, not coordinates.** This is the difference between a vDesign\ndocument and a screenshot. Before writing a number, ask what it is derived from.\n\n```\n✗ rect card.2 x=148 y=308 w=395 h=200\n✓ rect card.2 x=(@card.1.right + $gap) y=(prev.y) w=@card.1.w h=200\n```\n\n**2. Put every repeated value in a token first.** A colour used twice, a spacing used\nthree times, a type scale — all tokens. `$gap` used eleven times is the compression, and it\nis also the edit surface: \"make it roomier\" becomes one line.\n\n**3. Only reference ids you have already written.** References resolve against the\ndocument, and a consumer may be rendering your output as it streams. Write `logo` before\nthe headline that sits beside it.\n\n**4. Give ids a role, not a number.** `hero.title`, `card.1`, `nav.logo` — an id should be\nguessable by someone who has not read the file. Never `node1`, `rect5`.\n\n**5. Text height is authored — estimate it.** Nothing measures glyphs for you. For a box\nof width `w` at font size `size`:\n\n```\ncharacters per line ≈ w / (size * 0.5)\nlines               = ceil(length of the text / characters per line)\nh                   = ceil(lines * size * 1.2)\n```\n\nRound up. Too small is reported as a `text-overflow` problem; too large just leaves space.\n\n**6. `fill` takes a token name or a CSS colour, never an expression.** `fill=accent`,\n`fill=#5b5bd6`. Sizes and positions bind; colours do not.\n\n**7. A group has no geometry.** It holds children and nothing else — no `x`, `y`, `w`, `h`.\nIts children keep the coordinate space of whatever contains the group, and `parent`, `prev`\nand `next` see straight through it.\n\n**8. A page is a `frame`, and more than one page is more than one frame.** Start the\ndocument with a frame; you do not write a `canvas` line at all. Each frame is its own\ncoordinate space, so `x=$gap` means `$gap` from _that page's_ left edge and `100%` means\nthat page's width. `parent.cx` is that page's centre too, and `parent.left` is `0`, so the\nsame line centres something on every page. Lay several out left to right with a gap between\nthem — nothing stops one page being drawn over another, so do not overlap them.\n\n```\n$gap = 24\n\nframe page w=1280 h=720 background=paper\n  rect hero.bg x=$gap y=$gap w=(100% - $gap * 2) h=320 fill=accent\n\nframe pricing x=1380 w=1280 h=720 background=paper\n  text pricing.title x=$gap y=$gap w=600 h=48 size=34 weight=700\n    \"Pricing\"\n```\n\n## Editing an existing document\n\nWhen given a document and asked to change it, reply with **statements**, not a new\ndocument. Five verbs, plus `title` to rename the document:\n\n```\ntitle \"Pricing page\"\nset $gap = 40\nset hero.title size=($display * 1.2) weight=800\nset hero.sub content=\"A shorter subhead.\"\nunset hero.sub opacity\ninsert rect card.4 after card.3 x=(@card.3.right + $gap) y=(prev.y) w=@card.1.w h=200\ninsert frame pricing x=(@page.right + 100) w=@page.w h=@page.h background=paper\nmove logo before hero.bg\ndelete hero.tagline\n```\n\nAn `insert` with no placement lands on the canvas, which in a multi-page document is\n_beside_ the pages rather than on one. Say `after <id>` or `in <frame>` whenever the new\nnode belongs to a page.\n\nCopy is changed with `set … content=`, or with an indented body when the marks matter.\nNever `delete` and `insert` a text node to reword it — it loses its place and every `@`\nreference to it.\n\nPrefer changing a **token** over changing the nodes that use it — that is usually what the\nrequest actually means. \"More breathing room\" is `set $gap = 40`, not eleven `set`\nstatements.\n\nSee `reference/edits.md` for placement, and for what happens when you delete something\nanother node references.\n\nTwo flags come from the person more often than from you: `hidden` (not drawn, export\nincluded) and `locked` (their pointer passes over it). Keep them as you find them. Hide with\n`set card.2 hidden` only when asked to hide — when asked to remove something, `delete` it,\nbecause a hidden node is still in the file for the next reader to wade through. `unset\ncard.2 hidden` shows it again.\n\nA top-level frame is a slide when the document is played. For a backup or reference slide\nthat should stay in the deck but out of the talk, write `skip` on its frame (`set appendix\nskip`) — don't hide it, which takes it off the canvas and out of every export too, and don't\ndelete it.\n\n## Motion\n\nTransitions between slides, parts of a slide appearing in order, and buttons that go to\nanother slide are a `motion` section after the last page. Only Play reads it: the canvas and\nevery export show each page as written, so write the page as it looks when finished and let\nmotion say how the presenter gets there.\n\n```\nmotion intro enter=fade\n  intro.title enter=rise\n  intro.chart enter=fade step\n  intro.cta enter=pop go=#pricing\n```\n\nAdd it when the person is making something to present or click through, and keep it light.\nNever copy a page to animate between the copies. `reference/motion.md` has the rest.\n\n## Images\n\nA picture is an `image` node that names an asset: `image hero.logo x=40 y=32 w=160 h=48\nsrc=logo fit=contain`. The asset's registry line (`asset logo = image/png hash=…`) and its\nbytes are **never yours to write** — hashes come from the app. You only ever write `src=`.\n\n- **In the app**, images the person attached are offered by name at the top of the request\n  (\"Images you can put in the design\"). Place one with `src=<that name>`; an edit uses\n  `insert image <id> in <frame> …`. Size it to the image's aspect ratio, and prefer\n  `fit=contain` for a logo.\n- **Over MCP**, a picture at a public URL goes in with `vd_add_asset` first, then you place\n  it. `vd_assets` lists what a document already has.\n- **A picture you cannot send** — one the person gave you in chat, or has on their machine —\n  becomes a **slot**. You cannot pass on an image you can see, and no tool reads file paths,\n  so do not try: write the image anyway, with a `src` nothing supplies yet and a `name`\n  saying what goes there:\n\n  ```\n  image nav.logo x=40 y=24 w=120 h=40 src=logo fit=contain name=\"Your logo\"\n  ```\n\n  The canvas shows it as a labelled box the person drops the file into, whenever they like.\n  Size and place it as if the picture were there, carry on with the design, and tell them\n  where it is (\"drop your logo onto the box in the top-left\"). Every image with the same\n  `src` fills together. `vd_assets` lists the slots still waiting.\n\nA `src` naming nothing reports `missing-asset`. That is what a slot is, so do not \"fix\" it by\ndeleting the image; do fix a `src` you simply misspelled.\n\n## Looking at your work, and exporting\n\n**Over MCP, `vd_export` is how you see what you made.** `vd_read` is text, and a layout that\nreads fine can still look wrong — text overflowing, two cards overlapping. After a build or\na large edit, export the frame as `png` with `save: false` and look at the picture that comes\nback; fix what you see, then look again.\n\nWhen the person asks for a file — \"export it as a PDF\", \"give me a PNG of the cover\" — call\n`vd_export` with `save: true`. Formats: `png`, `jpg`, `webp`, `svg`, `pdf`, `ai` (Illustrator:\none artboard of the whole canvas, or `artboards: \"frames\"` for a file per frame) and `html`.\nIn the app the person chooses where it goes, and may cancel; if they do, do not try again\nunasked. Only save when asked — a look is `save: false`.\n\n## Reference\n\nBelow, if you are reading this as a flattened system prompt; otherwise alongside this file.\n\n- `reference/grammar.md` — the expression language in full: edges, percentages, relative\n  references, precedence; plus tokens, paint (colours and gradients), fonts and the asset\n  registry.\n- `reference/nodes.md` — every node type and every property it accepts: `frame`,\n  `canvas`, `rect`, `ellipse`, `vector`, `image`, `text`, `group`.\n- `reference/edits.md` — the mutation dialect in full.\n- `reference/motion.md` — motion for Play: page transitions, reveals and buttons.\n- `examples/` — complete documents: `hero.vd`, `cards.vd`, `slide.vd`, and `deck.vd`, three\n  pages with motion.\n"
}