openink 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -4,6 +4,22 @@ All notable changes are documented here. The format follows [Keep a Changelog](h
 
 ## [Unreleased]
 
+## [0.2.0] - 2026-10-02
+
+### Added
+
+- A `wireframe` skill for AI coding agents that turns a description into a validated, screenshot-checked prototype in
+  any folder. Claude Code: `claude plugin marketplace add mediuswareltd/openink`, then
+  `claude plugin install openink@openink`. Cursor, Codex, Gemini CLI, GitHub Copilot and others:
+  `npx skills add mediuswareltd/openink`.
+
+### Fixed
+
+- An image, video, map, dropzone or chart placed directly in a `row` is drawn as a 4:3 thumbnail of its height. It
+  used to collapse to the width of its label and showed no box (#17).
+- The PDF button (and Ctrl+P) no longer prints image, video and map placeholders and charts as empty boxes with only
+  their label. Screens that had not been opened were printed before their sketches were drawn.
+
 ## [0.1.1] - 2026-10-02
 
 ### Added

package/README.md

@@ -82,6 +82,27 @@ openink dev
 
 Requires Node 20+. PDF and PNG export need Chrome, Chromium or Edge installed (set `CHROME_PATH` if it isn't found).
 
+### With an AI coding agent
+
+Give your agent the Open Ink skill once, then just describe what you want ("wireframe a booking app for a hair salon").
+
+**Claude Code**: install the plugin:
+
+```bash
+claude plugin marketplace add mediuswareltd/openink
+claude plugin install openink@openink
+```
+
+To get updates automatically, turn on auto-update for the **openink** marketplace in `/plugin` → **Marketplaces**.
+
+**Cursor, Codex, Gemini CLI, GitHub Copilot, Windsurf and other agents**: add the skill with the [skills](https://skills.sh) CLI, which asks which of your agents to install it for:
+
+```bash
+npx skills add mediuswareltd/openink
+```
+
+The agent writes and validates the spec, checks screenshots of every screen and tells you where the prototype is. See [docs/ai-assistants.md](docs/ai-assistants.md).
+
 ## What you can draw
 
 48 blocks in 10 groups; see the [block reference](docs/blocks.md) and the [gallery example](examples/gallery), which shows every one.

package/docs/ai-assistants.md

@@ -6,6 +6,35 @@ Open Ink is designed so that an assistant (Claude Code, Cursor, Copilot, ChatGPT
 
 The assistant writes `spec.yaml`, the tool checks it, and you get a consistent hand-drawn result. Because the spec is small and validated, it is cheap to iterate: "add a second tab to the listing page" is a five-line diff.
 
+## Install the Open Ink skill
+
+Open Ink comes with a `wireframe` skill that teaches your agent the whole loop. Once it is installed, the agent uses it whenever you ask for a wireframe, mockup or clickable prototype, in any folder, so you do not need to mention Open Ink or run `init` first.
+
+The skill follows the same steps as the `AGENTS.md` below: it reads the block reference, edits only `spec.yaml`, validates until the spec is clean, checks a PNG of every screen and tells you where the result is. In a folder without a spec, it creates the project in a new subfolder so it does not overwrite your files.
+
+### Claude Code
+
+Install the plugin once:
+
+```bash
+claude plugin marketplace add mediuswareltd/openink
+claude plugin install openink@openink
+```
+
+Inside a session the same is `/plugin marketplace add mediuswareltd/openink` and `/plugin install openink@openink`. You can also call the skill directly with `/openink:wireframe`.
+
+For updates, turn on auto-update for the **openink** marketplace in `/plugin` → **Marketplaces**, or run `/plugin marketplace update openink`.
+
+### Cursor, Codex, Gemini CLI, GitHub Copilot and other agents
+
+Add the skill with the [skills](https://skills.sh) CLI:
+
+```bash
+npx skills add mediuswareltd/openink
+```
+
+It asks which of your agents to install it for, and whether to install it for this project or for your user. To skip the questions, name the agents and add `-y`, for example `npx skills add mediuswareltd/openink -a cursor -a codex -y`, and add `-g` to install it for every project. Run `npx skills update` to get the latest version.
+
 ## How it works
 
 `openink init` puts an `AGENTS.md` in your project. Most assistants read it automatically; it tells them to:

package/docs/blocks.md

@@ -43,7 +43,7 @@ Vertical stack of blocks.
 
 ### `row` · children
 
-Horizontal row that wraps on small screens.
+Horizontal row that wraps on small screens. Images, videos, maps and charts in a row are 4:3 thumbnails of their height.
 
 | Prop | Type | Description |
 |---|---|---|

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openink",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Describe screens in YAML, get a clickable hand-drawn wireframe prototype (static HTML, PDF, PNG). Built on wired-elements and RoughJS.",
   "keywords": [
     "wireframe",

package/schema/spec.schema.json

@@ -364,7 +364,7 @@
         },
         {
           "type": "object",
-          "description": "Horizontal row that wraps on small screens.",
+          "description": "Horizontal row that wraps on small screens. Images, videos, maps and charts in a row are 4:3 thumbnails of their height.",
           "required": [
             "type"
           ],

package/src/render/blocks/layout.js

@@ -13,7 +13,7 @@ export default [
   {
     name: "row",
     group: "Layout",
-    summary: "Horizontal row that wraps on small screens.",
+    summary: "Horizontal row that wraps on small screens. Images, videos, maps and charts in a row are 4:3 thumbnails of their height.",
     children: true,
     props: {
       between: { type: "boolean", doc: "Push the first and last child to opposite ends." },

package/src/runtime/chart.js

@@ -12,7 +12,7 @@ class Chart extends HTMLElement {
     const kind = this.getAttribute("kind") || "line";
     const values = (this.getAttribute("values") || "").split(",").map((s) => s.trim()).filter(Boolean).map(Number).filter(Number.isFinite);
     const data = values.length ? values : SAMPLE[kind] || SAMPLE.line;
-    this.style.cssText += `display:block;position:relative;height:${h}px`;
+    this.style.cssText += `display:block;position:relative;height:${h}px;--oi-w:${Math.round((h * 4) / 3)}px`;
 
     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
     svg.style.cssText = "position:absolute;inset:0;width:100%;height:100%";
@@ -70,6 +70,7 @@ class Chart extends HTMLElement {
       }
     };
 
+    this.draw = draw; // print draws every screen at once, before a ResizeObserver would fire
     draw();
     new ResizeObserver(draw).observe(this);
     const label = this.getAttribute("label");

package/src/runtime/placeholder.js

@@ -11,7 +11,7 @@ class Placeholder extends HTMLElement {
     const h = +this.getAttribute("h") || 120;
     // A round placeholder (avatar) is square and must have a width of its own to sit in a flex row.
     const width = this.hasAttribute("round") ? `width:${h}px;flex:none;` : "";
-    this.style.cssText += `display:block;position:relative;height:${h}px;${width}`;
+    this.style.cssText += `display:block;position:relative;height:${h}px;--oi-w:${Math.round((h * 4) / 3)}px;${width}`;
 
     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
     svg.style.cssText = "position:absolute;inset:0;width:100%;height:100%";
@@ -72,6 +72,7 @@ class Placeholder extends HTMLElement {
       }
     };
 
+    this.draw = draw; // print draws every screen at once, before a ResizeObserver would fire
     draw();
     new ResizeObserver(draw).observe(this);
 

package/src/runtime/print.js

@@ -24,11 +24,13 @@ export function preparePrint() {
     return { zoom: r.height > room ? Math.max(room / r.height, 0.3) : 1, width: r.width };
   });
 
+  // Draw everything now: the browser prints straight after this returns, before a ResizeObserver
+  // would draw the placeholders and charts on screens that were hidden.
   // Draw before zooming: wired-elements size their sketch from the zoomed box, and the zoom then
   // shrinks the sketch a second time. Keep the screen's unzoomed width so its layout (and so the
   // sketches) only scales, and record the zoomed box as the size last drawn, so a resize
   // (wired-card watches its own) does not redraw at that size.
-  $$("*").forEach((el) => el.wiredRender?.(true));
+  $$("*").forEach((el) => (el.wiredRender ? el.wiredRender(true) : el.draw?.()));
   screens.forEach((s, i) => {
     const { zoom, width } = zooms[i];
     if (zoom === 1) return;

package/src/styles/openink.css

@@ -101,6 +101,8 @@ p { margin: 0; }
 .row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
 .row.between { justify-content: space-between; }
 .row.center { justify-content: center; }
+/* placeholders and charts have no content width, so in a row they are a 4:3 thumbnail (--oi-w is set from their height) */
+.row > oi-placeholder:not([round]), .row > oi-chart { flex: none; width: var(--oi-w); max-width: 100%; }
 .grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gap); align-items: start; }
 @media (max-width: 720px) { html:not(.oi-print) .grid { grid-template-columns: 1fr; } }
 .card { display: block; padding: 1rem; background: var(--card-bg); }