Update to Moda - Slides & Designs

{
  "description": "Static UI mockups and wireframes on Moda: app screens, website pages, dashboard layouts — pictures of interfaces at real viewport sizes, exported png or pdf. Use for: mockup, wireframe, \"design a screen/UI for X\", app concept, page redesign concept. A mockup is a picture of an interface. NOT: a live hosted page → moda-website; flowcharts and boxes-and-arrows → moda-diagram.",
  "included_files": [
    {
      "relative_path": "references/brand.md",
      "size_in_bytes": 15284
    },
    {
      "relative_path": "references/charts.md",
      "size_in_bytes": 5659
    },
    {
      "relative_path": "references/design-quality.md",
      "size_in_bytes": 22265
    },
    {
      "relative_path": "references/edit-code.md",
      "size_in_bytes": 16488
    },
    {
      "relative_path": "references/export.md",
      "size_in_bytes": 7949
    },
    {
      "relative_path": "references/gotchas.md",
      "size_in_bytes": 8693
    },
    {
      "relative_path": "references/landing-page.md",
      "size_in_bytes": 6440
    },
    {
      "relative_path": "references/markup.md",
      "size_in_bytes": 23958
    },
    {
      "relative_path": "references/mockup.md",
      "size_in_bytes": 5739
    },
    {
      "relative_path": "references/no-brand-design.md",
      "size_in_bytes": 14257
    },
    {
      "relative_path": "references/omni-and-media.md",
      "size_in_bytes": 7338
    },
    {
      "relative_path": "references/reading-and-verifying.md",
      "size_in_bytes": 21129
    }
  ],
  "name": "moda-mockup",
  "skill_md_contents": "---\nname: moda-mockup\ndescription: >-\n  Static UI mockups and wireframes on Moda: app screens, website pages,\n  dashboard layouts — pictures of interfaces at real viewport sizes, exported\n  png or pdf. Use for: mockup, wireframe, \"design a screen/UI for X\", app\n  concept, page redesign concept. A mockup is a picture of an interface. NOT:\n  a live hosted page → moda-website; flowcharts and boxes-and-arrows →\n  moda-diagram.\n---\n\n# moda-mockup\n\n**PREREQUISITE — `load_skill(\"moda-core\")` once per session** (step-0, write\ncontract, free/metered map). Already loaded? Skip ahead. If you cannot load\nit, the non-negotiables: call `moda_bootstrap` before anything; `brand_list`\nbefore creating; revision-guarded writes use `expected_revision` from your last read.\n`canvas_edit_image` captures its own target state and has no revision argument.\nOn `stale_revision`, re-read and retry once; send the canvas link\nthe moment it exists; stuck or failed? `ask_expert(\"<question>\")` — free and\nfast, never guess.\n\n## Settle viewport, fidelity, and screen count\n\nA mockup is a **picture of an interface**. If the page has to be visitable,\nit is not a mockup — load moda-website and build the real thing.\n\n1. **Viewport** decides grid, type sizes, and how much content fits: desktop\n   app 1440×900, dashboard 1920×1080, landing-page mock 1440×4000–6000 on ONE\n   page, tablet 1024×768, phone 390×844. Full table in references/mockup.md;\n   landing-page layout craft lives in references/landing-page.md.\n2. **Fidelity is a decision, not a drift**: a *wireframe* is grayscale boxes,\n   real hierarchy, honest labels, deliberately unfinished; a *mockup* is\n   brand palette, real type ladder, real imagery, realistic content. Default\n   to the mockup unless the user said wireframe or \"rough\". Never half-style.\n3. **Screen count**: one screen per page in ONE canvas, same viewport across\n   the flow, each page named for its step. Charts, tables, and diagrams\n   inside the screen are authored here in place — never handed off.\n\n## Workflow\n\n1. **Create + link**: `canvas_create(name='…', intent='the onboarding\n   screens', width=1440, height=900, category='ui')` — `intent` explains the\n   blank page to whoever opens the link first. Send it at once: \"follow along\n   live here.\" More screens later in `canvas_edit` code (`create('page', …)`).\n2. **Read references/mockup.md** (viewports, shell structure, type and touch\n   rules) and references/markup.md for the container grammar; compute the\n   type ladder per references/design-quality.md. Brand kit in play →\n   `brand_show` and LOOK at its assets before composing.\n3. **Build the shell with containers**: nest `<row>`/`<column>` for app\n   shell, sidebar, header, and card grids; reserve absolute x/y for\n   decorative accents and full-bleed blocks. One screen per markup apply\n   (`canvas_apply_markup(canvas_ref, page, markup)`); repair\n   `requires_repair` or skipped ops before the next screen.\n4. **Fill it with content that reads as real**: product names, plausible and\n   internally consistent numbers, dates that agree. Icons from\n   `<image icon=\"query\"/>` or `file_search(kind='icon')`; imagery from\n   uploads or `canvas_edit_image`.\n5. **Verify**: `canvas_screenshot` (≤3 pages per call) and LOOK as a\n   user would — is the primary action obvious, is anything clipped, do the\n   columns line up, does the type survive at this viewport?\n6. **Deliver**: the live link first. Export on format words or one accepted\n   offer: `export(canvas_ref, format='png', pixel_ratio=2)` (pdf when the\n   screens are going into a document or a deck).\n\n## The bar\n\n- **Real OS point sizes**, not display-scaled canvas type: body 14–16 on\n  desktop, 15–17 on phone. Cut copy before shrinking past the ladder floor.\n- **Respect the device**: phone status bar ~47pt and home indicator ~34pt\n  stay clear, touch targets ≥44pt, no hover-only affordances on touch.\n- **Show the interesting state.** An empty state, an error, or a table row\n  selected says more about the design than a third happy-path screen.\n- **Push past three equal cards**: a bento grid, a full-bleed block carrying\n  nav and hero, oversized low-opacity numerals, a sticky summary row.\n- **Charts in a dashboard mock**: author `<chart>` in place and set\n  `font-size` explicitly — it defaults to 12px at any canvas size, which is\n  unreadable at dashboard scale.\n- **Never lorem ipsum.** Fake-but-coherent content beats placeholder, always.\n\n\n\n## Errors\n\nOne screen per apply plus a screenshot is the guard — `invalid_markup` names\nthe element it skipped (a container with a bad `width=\"fill\"` chain is the\ncommon one); `stale_revision` heals on one re-read and retry.\nAnything else, or the same typed code twice: stop and run\n`ask_expert(\"<what failed>\", context=\"<the error>\")` (free). Deeper recipes per\ntyped error live in moda-core's recovery reference.\n\n## References\n\n| Doc | Load when |\n|---|---|\n| references/mockup.md | always — viewports, shell structure, fidelity |\n| references/landing-page.md | the screen is a landing page, homepage, or marketing hero |\n| references/markup.md | before writing any markup (containers, images) |\n| references/design-quality.md | type ladder, palette discipline, imagery |\n| references/no-brand-design.md | no kit is active — inventing the identity: palette law, type, imagery, layout system |\n| references/charts.md | a screen contains a chart |\n| references/brand.md | a brand kit exists |\n| references/edit-code.md, references/reading-and-verifying.md | targeted fixes; DSL reading and the screenshot loop |\n| references/export.md, references/omni-and-media.md, references/gotchas.md | delivering png/pdf; media; anything surprising |\n"
}