konpeki 0.3.0 → 0.3.1

package/README.md

@@ -15,48 +15,26 @@ editable JSON, or use **Present** for a chrome-free presentation.
 Requires **Node.js 24+**, npm, a coding agent that can edit files and run commands,
 and a browser.
 
-Install the [Konpeki skill](skills/konpeki/) with your agent's
-skill installer. Install the whole directory, including `scripts/` and `assets/`, not just
-`SKILL.md`. For example, ask a Codex skill installer:
+Install once, choosing your agent when prompted:
 
-```text
-Install the konpeki skill from vcfgdev/konpeki, at skills/konpeki.
+```sh
+npx skills add vcfgdev/konpeki -g
 ```
 
-Then choose a mode, or just give it a brief:
-
-| Workflow | Codex CLI / IDE | Claude Code standalone skill |
-| --- | --- | --- |
-| Open a blank or existing editor; no generation | `$konpeki init` | `/konpeki init` |
-| Create, inspect and revise a visual | `$konpeki generate …` | `/konpeki generate …` |
-
-`init` accepts a composition JSON path and preserves existing work. `generate`
-uses the materials already in your conversation and prepares the runtime if
-needed; there is no required init step. Plugin installations may namespace the
-skill. Other hosts can select the skill or use natural language:
+Start a new conversation or reload your agent's skills. **Send this to your agent:**
 
-> Use Konpeki to turn these launch notes into a product announcement.
+> Use Konpeki to create a one-page explainer of how a browser, API and database work together.
 
-Or ask for an article cover, a social graphic, a chart, a diagram or a presentation.
-Natural-language creation requests select `generate` automatically.
-The skill reuses a compatible runtime or, with permission, installs the pinned
-npm release in a user cache. It creates editable JSON in your workspace, opens
-the preview and visually checks the result. You do not need to clone Konpeki,
-edit a package manifest, or repeat your prompt in a blank canvas.
+Replace the example with your own brief and materials. Your agent prepares the
+runtime, creates editable JSON in your workspace, opens the canvas and checks the
+result. No clone or separate `init` step. First use may require installation and
+browser permissions; remote workspaces need authenticated preview forwarding.
 
-First-run installation, browser permissions and remote preview forwarding depend
-on your agent host. If skills are unavailable, give the agent the public
-[SETUP.md](https://raw.githubusercontent.com/vcfgdev/konpeki/main/SETUP.md) URL and
-your brief together. The setup guide also covers the optional Codex plugin package.
-
-Ask for revisions in the same conversation. Add “Stop after the outline for
-approval” when you want a checkpoint. Supply a visual direction or leave it open;
-[authoring modes](AUTHORING.md#authoring-mode) provide defaults without requiring
-you to choose fonts, colors or layouts first.
-
-Canvas review notes use **Build it** and an active agent listener, or the
-button's copyable handoff to resume the agent. Opening the editor alone does not
-connect or wake an agent. The skill modes are not terminal CLI subcommands.
+Keep revisions in the same conversation. Canvas notes use **Build it** and its
+copyable handoff unless an agent listener is active; the button cannot wake an
+idle agent. See [setup details and optional commands](SETUP.md) for other install
+methods, or give that guide's [raw URL](https://raw.githubusercontent.com/vcfgdev/konpeki/main/SETUP.md)
+to your agent with your brief.
 
 ## Try the editor in your browser
 
@@ -71,6 +49,45 @@ The [GitHub Pages playground](docs/development.md#github-pages) does not connect
 to an agent or expose **Build it**. The agent-led workflow above is the route
 from a prompt to a finished visual.
 
+## Showcase
+
+Illustrative examples with editable text and vector artwork. Click a preview to
+view it full-size, or download its JSON and choose **Demo Mode → Import** in the
+[playground](https://vcfgdev.github.io/konpeki/).
+
+<table>
+  <tr>
+    <td width="50%" align="center" valign="top">
+      <a href="slides/gallery/architecture.png"><img src="slides/gallery/architecture.png" width="420" alt="Harbor Market order-platform architecture"></a><br>
+      <strong>Explain a system</strong><br>
+      Order handling, events and fulfillment<br>
+      <a href="slides/gallery/architecture.json">Editable JSON</a>
+    </td>
+    <td width="50%" align="center" valign="top">
+      <a href="slides/gallery/sankey.png"><img src="slides/gallery/sankey.png" width="420" alt="Proportional Sankey showing a fictional 1,000-user trial cohort"></a><br>
+      <strong>Communicate data</strong><br>
+      Trial users, activation and outcomes<br>
+      <a href="slides/gallery/sankey.json">Editable JSON</a>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" align="center" valign="top">
+      <a href="slides/gallery/release.png"><img src="slides/gallery/release.png" width="420" alt="Clearpath 0.4 portrait release announcement in orange"></a><br>
+      <strong>Announce a release</strong><br>
+      A portrait social graphic for Clearpath<br>
+      <a href="slides/gallery/release.json">Editable JSON</a>
+    </td>
+    <td width="50%" align="center" valign="top">
+      <a href="slides/gallery/explainer.png"><img src="slides/gallery/explainer.png" width="420" alt="Folio one-page explainer showing accepted and rejected document saves"></a><br>
+      <strong>Teach a concept</strong><br>
+      One-page guide to preventing stale saves<br>
+      <a href="slides/gallery/explainer.json">Editable JSON</a>
+    </td>
+  </tr>
+</table>
+
+[Browse the gallery](slides/README.md) for briefs, sources and more examples.
+
 ## Manual npm start
 
 For a manual start, install [Konpeki from npm](https://www.npmjs.com/package/konpeki)
@@ -88,9 +105,9 @@ authenticated preview mechanism rather than sharing a local address.
 
 ## Examples and guides
 
-- [Example gallery](slides/README.md): 18 fictional examples and an editable
-  Konpeki introduction. Retained React/SVG examples are drawing references;
-  new editable documents use composition JSON.
+- [Native example gallery](slides/README.md): editable diagrams, data graphics,
+  a social announcement and a one-page explainer, plus the product introduction
+  and repository cover. Older React/SVG drawing references remain separate.
 - [Agent-led setup](SETUP.md) and [authoring guidance](AUTHORING.md).
 - [Canvas workflow](docs/workflow.md): page sizes, export and agent handoff.
 - [Development](docs/development.md): architecture, demo hosting, packaging and checks.

package/SETUP.md

@@ -1,35 +1,47 @@
 # Set up Konpeki for your coding agent
 
-Install the `konpeki` skill once, then give your agent a creation brief:
+Requires **Node.js 24+**, npm, a coding agent with file and command access, and a browser.
 
-```text
-Use Konpeki to turn these launch notes into a product announcement.
+Install once, choosing your agent when prompted:
+
+```sh
+npx skills add vcfgdev/konpeki -g
 ```
 
-Opening and inspecting the editable preview is part of the skill, not an extra
-instruction the person has to remember. Covers, social graphics, charts,
-diagrams and presentations use the same workflow. Keep the brief and revisions
-in agent chat; the browser edits, reviews, presents and exports the document.
-Konpeki supplies no hosted AI service or additional model subscription.
+Start a new conversation or reload your agent's skills. **Send this to your agent:**
+
+> Use Konpeki to create a one-page explainer of how a browser, API and database work together.
+
+Or use your own brief and materials. The agent prepares the runtime, creates the
+document, opens the canvas and checks the result; no separate `init` step is
+needed. Allow any required installation/browser permissions. Remote workspaces
+need authenticated preview forwarding. Keep revisions in the same conversation.
+
+## Other installers
 
-## 1. Install the skill or plugin
+For an unattended install, select a single agent (Amp example):
 
-Use the host's skill installer to install the complete
-[`skills/konpeki`](skills/konpeki/) directory from
-`vcfgdev/konpeki`. Keep its `scripts/` and `assets/` directories. In Codex, ask the skill installer:
+```sh
+npx skills add vcfgdev/konpeki -g -a amp -y
+```
+
+This avoids auto-selecting unrelated agent targets when no terminal prompt is available.
+
+You can also use your agent's native skill installer:
 
 ```text
 Install the konpeki skill from vcfgdev/konpeki, at skills/konpeki.
 ```
 
-Other agents may use another installer or skill location. Follow their documented
-mechanism; there is no universal slash command. If a host does not discover skills,
-read the installed `SKILL.md` directly. Do not overwrite existing agent guidance.
+Install the complete [`skills/konpeki`](skills/konpeki/) directory, including
+`scripts/` and `assets/`. Follow the host's documented skill location; if it does
+not discover skills, read the installed `SKILL.md` directly. Do not overwrite
+existing agent guidance.
 
 If you previously installed `authoring-visuals`, replace that installed skill
 with `konpeki` rather than keeping both copies. The runtime package is unchanged.
 
-### Choose init or generate
+## Optional commands
 
 | Mode | Codex CLI / IDE | Claude Code standalone skill |
 | --- | --- | --- |
@@ -77,7 +89,11 @@ It becomes available from the remote repository after these files are published.
 Native Codex GUI installation needs a separate client smoke test; package checks
 alone do not establish host compatibility.
 
-## 2. Let the skill prepare the runtime
+## Agent setup reference
+
+The installed skill handles these steps; the person does not need to run them manually.
+
+### Prepare the runtime
 
 Check Node.js 24+, npm, command/file access and the host's browser capabilities.
 Follow host approval and toolchain rules if prerequisites are missing.
@@ -90,7 +106,7 @@ node "<installed-skill>/scripts/ensure-runtime.mjs"
 
 The script reuses a compatible workspace installation, surrounding Konpeki
 checkout, or cached runtime. If none exists, obtain any required host approval
-and rerun with `--install`. It installs the pinned `konpeki@0.3.0` release in a
+and rerun with `--install`. It installs the pinned `konpeki@0.3.1` release in a
 user cache, without adding project dependencies or changing project guidance.
 Missing/incompatible runtimes are never reported ready. The script prints JSON
 with `root`, `cli` and `version`; installation diagnostics go to stderr.
@@ -101,7 +117,7 @@ For manual project-local npm installation, see [Manual npm start](README.md#manu
 Repository contributors instead use the [mise setup](docs/development.md); users
 of the published package do not need mise.
 
-## 3. Generate, validate and open the visual
+### Generate, validate and open the visual
 
 Follow the installed skill and the runtime's `AUTHORING.md`, composition contract
 and design resources. Use the brief already supplied; ask only for information

package/docs/development.md

@@ -30,7 +30,7 @@ For a production preview, run `pnpm build` then `pnpm preview`. The build produc
 a static site in `dist` for a root or subdirectory. Use
 `?example=introducing-konpeki` or `?example=custom-visual` to open a bundled editable
 example. Each example has an isolated browser-local working copy that survives
-reload. The Browser menu supports JSON import/download, starting blank and
+reload. The Demo Mode menu supports JSON import/download, starting blank and
 resetting the example. These actions never replace another example or the normal
 local draft. Invalid stored data remains untouched until an explicit reset.
 
@@ -70,7 +70,7 @@ package releases remain separate. Inspect the public example after deployment,
 including reload, fonts, editing, JSON download and Present.
 
 Existing example working copies survive deployments. Download any edits before
-choosing **Browser → Reset example** to load a newly published example.
+choosing **Demo Mode → Reset example** to load a newly published example.
 
 ## Skill and plugin packaging
 
@@ -93,7 +93,7 @@ Its `scripts/ensure-runtime.mjs` pins the release runtime. It performs
 no installation without `--install`, and never updates project dependencies.
 When preparing a new release, deliberately update its pin and the plugin version
 together with the package version after testing the target runtime. The current
-pin is 0.3.0; local CLI/playground changes do not republish that npm version.
+pin is 0.3.1; local CLI/playground changes do not republish that npm version.
 
 ## Implementation reference
 
@@ -234,6 +234,14 @@ directory and `--record` to also record the animation.
 reload persistence, CLI claim/finish, clarification and cancellation in a disposable
 file-backed browser session. It accepts a screenshot directory as its first argument.
 
+`node scripts/check-feedback.mjs <output-directory>` checks invalid numeric input,
+blank-canvas commits, page renaming, stable panel geometry, native/vector overflow targets,
+note-save recovery, and file-save/conflict recovery with delayed opens and stale polls
+in a disposable session with injected service failures. It
+also checks notification exits, interrupted re-entry, inert hidden controls and reduced
+motion, and records screenshots and measurements. Run with `--before` on a baseline checkout
+to record the same failure states without asserting the revised behavior.
+
 These checks exercise all five component kinds, empty slides, JSON round trips,
 vector editing/history and fitted line dragging. They capture editor and
 presentation states at two sizes; inspect the images because assertions alone

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "konpeki",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A shared editable canvas for agent-made visuals",
   "license": "Apache-2.0",
   "repository": {
@@ -48,8 +48,10 @@
     "lib/{assets.d.ts,charts.ts,contrast.ts,layouts.ts,slide.tsx,taste.ts,text.tsx,typeface.ts}",
     "scripts/migrate-react-page.ts",
     "slides/README.md",
+    "slides/drawing-references.md",
     "slides/{architecture,article-brief,bar-chart,comparison,decision-memo,delivery-plan,experiment,incident-workflow,line-chart,migration,og-images,product-introduction,research-brief,results-explanation,retrospective,sankey,teaching,vertical-bar-charts}/{PROMPT.md,index.tsx}",
     "slides/introducing-konpeki/{README.md,PROMPT.md,SOURCE.md,composition.json,author.ts}",
+    "slides/github-cover/{README.md,PROMPT.md,composition.json,author.ts}",
     "!**/*.test.ts"
   ],
   "engines": {

package/plugin.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://agent-plugins.org/schemas/1.0.0/plugin.schema.json",
   "name": "konpeki",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Create editable visuals with your coding agent.",
   "repository": "https://github.com/vcfgdev/konpeki",
   "license": "Apache-2.0",

package/skills/konpeki/scripts/ensure-runtime.mjs

@@ -6,7 +6,7 @@ import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 
 // A copied skill must resolve a known runtime, not follow repo-relative links.
-const version = "0.3.0";
+const version = "0.3.1";
 const probeDocument = fileURLToPath(new URL("../assets/blank.json", import.meta.url));
 function runtime(root) {
   try {

package/slides/README.md

@@ -1,153 +1,56 @@
-# Decks and examples
+# What can I make with Konpeki?
 
-The image gallery below is for the repository checkout. The npm package includes
-editable examples and prompts but omits gallery PNGs; view this page and its
-screenshots in the repository, or render the source locally.
+Reviewed examples with editable text and vector artwork. Scenarios and data
+are illustrative; these are finished documents, not one-click templates.
 
-## Introducing Konpeki
+Download an example's JSON and choose **Demo Mode → Import** in the
+[playground](https://vcfgdev.github.io/konpeki/). For revision notes and agent
+handoff, open it in a [file-backed preview](../docs/workflow.md#file-backed-editing-with-an-agent).
+Playground edits stay in your browser.
 
-[Introducing Konpeki](introducing-konpeki/README.md) is a six-slide factual product
-introduction authored in the shared canvas's editable composition format.
-Open `?example=introducing-konpeki` in the running application, or download
-its [composition JSON](introducing-konpeki/composition.json) and use **Open**.
+## Explain a system
 
-## Retained drawing references
+An order platform's request handling, data, events and fulfillment.
 
-Each retained example contains its approved `PROMPT.md`, editable `index.tsx`, and final
-PNGs in `screenshots/`. Generation logs, environment records, review reports and
-superseded captures are not included. Subjects and datasets in these retained
-references are fictional; they are not another presentation runtime.
+[Editable JSON](gallery/architecture.json) ·
+[Brief](gallery/PROMPT.md#architecture) · [Source](gallery/SOURCE.md#architecture)
 
-## Representative charts
+![Editable order-platform architecture](gallery/architecture.png)
 
-### Line chart — Tide, page 1
+## Communicate data
 
-Two time series on a shared scale, direct labels, a target line, an event marker
-and an explicit gap for missing data. [Editable source](line-chart/index.tsx).
+A proportional Sankey follows 1,000 trial users through activation and outcomes.
 
-![Line chart with a target and missing-data gap](line-chart/screenshots/page-1.png)
+[Editable JSON](gallery/sankey.json) ·
+[Brief](gallery/PROMPT.md#sankey) · [Source](gallery/SOURCE.md#sankey)
 
-### Grouped bar chart — Birch, page 1
+![Editable trial-user flow with proportional ribbons](gallery/sankey.png)
 
-Horizontal before/after bars with a shared zero baseline and direct values.
-[Editable source](bar-chart/index.tsx).
+## Announce a release
 
-![Grouped horizontal before-and-after bars](bar-chart/screenshots/page-1.png)
+A 1080×1350 Clearpath release announcement: preview, review and export Markdown.
 
-### Vertical bar chart — Fieldnote, page 1
+[Editable JSON](gallery/release.json) ·
+[Brief](gallery/PROMPT.md#release) · [Source](gallery/SOURCE.md#release)
 
-Zero-based columns compare processing throughput with direct values.
-[Editable source](vertical-bar-charts/index.tsx).
+![Clearpath portrait announcement](gallery/release.png)
 
-![Vertical bars comparing indexing throughput](vertical-bar-charts/screenshots/page-1.png)
+## Teach a concept
 
-### Two charts side by side — Fieldnote, page 2
+A 1200×1600 Folio explainer shows a stale save, its rejection and recovery choices.
 
-Throughput on the left and visibility delay on the right show the trade-off,
-with separate units, zero-based scales and acceptance thresholds.
-[Editable source](vertical-bar-charts/index.tsx).
+[Editable JSON](gallery/explainer.json) ·
+[Brief](gallery/PROMPT.md#explainer) · [Source](gallery/SOURCE.md#explainer)
 
-![Side-by-side throughput and visibility-delay bar charts](vertical-bar-charts/screenshots/page-2.png)
+![Folio optimistic-concurrency explainer](gallery/explainer.png)
 
-### Stacked bar chart — Fern, page 1
+## More examples
 
-Direct-count segments compare completion before and after a hint, with the same
-denominator for every task. [Editable source](research-brief/index.tsx).
+- [Introducing Konpeki](introducing-konpeki/README.md): six-page product overview.
+- [Repository cover](github-cover/README.md): 1280×640 social preview.
+- [React/SVG drawing references](drawing-references.md): 18 older examples, not editor-importable documents.
 
-![Stacked bars showing task completion counts](research-brief/screenshots/page-1.png)
-
-## Representative content layouts
-
-### Two columns — Fern, page 2
-
-Parallel columns separate observed evidence from researchers' interpretations.
-[Editable source](research-brief/index.tsx).
-
-![Two-column observations and interpretations](research-brief/screenshots/page-2.png)
-
-### Three columns — Lantern, page 2
-
-Three aligned time-based columns distinguish rollback, partial recovery and
-backlog clearance. [Editable source](incident-workflow/index.tsx).
-
-![Three-column incident recovery stages](incident-workflow/screenshots/page-2.png)
-
-### Main panel and sidebar — Patchnote, page 2
-
-A large illustrative draft panel pairs with a narrower human-review checklist.
-[Editable source](product-introduction/index.tsx).
-
-![Draft interface with a review sidebar](product-introduction/screenshots/page-2.png)
-
-## Representative diagrams and structured information
-
-### Architecture diagram — Parcel Relay, page 1
-
-Named components and attached connectors explain acceptance and delivery.
-[Editable source](architecture/index.tsx).
-
-![Event acceptance and delivery architecture](architecture/screenshots/page-1.png)
-
-### Sequence diagram — Parcel Relay, page 3
-
-Two participant lifelines show a lost response and retry of the same event.
-[Editable source](architecture/index.tsx).
-
-![Timeout and retry sequence diagram](architecture/screenshots/page-3.png)
-
-### Gantt chart — Harbor, page 1
-
-A shared calendar axis compares baseline, completed and forecast work, with
-dependencies and release gates. [Editable source](delivery-plan/index.tsx).
-
-![Gantt chart with dependencies and gates](delivery-plan/screenshots/page-1.png)
-
-### Sankey chart — Brook, page 1
-
-Proportional flows carry 120 tickets from intake through handling to outcomes,
-with direct counts and conservation at each stage.
-[Editable source](sankey/index.tsx).
-
-![Sankey chart of support ticket routing and outcomes](sankey/screenshots/page-1.png)
-
-### Evidence table — Harbor, page 2
-
-Aligned stage–evidence rows use horizontal rules to make gate requirements easy
-to compare. [Editable source](delivery-plan/index.tsx).
-
-![Stage and evidence requirements table](delivery-plan/screenshots/page-2.png)
-
-## All examples
-
-The selections above demonstrate distinct visual patterns rather than ranking
-decks. All final screenshots remain available below.
-
-| Example | Prompt | Final screenshots |
-| --- | --- | --- |
-| Patchnote — product introduction | [Prompt](product-introduction/PROMPT.md) | [Images](product-introduction/screenshots/) |
-| Parcel Relay — architecture | [Prompt](architecture/PROMPT.md) | [Images](architecture/screenshots/) |
-| Fieldnote — experiment | [Prompt](experiment/PROMPT.md) | [Images](experiment/screenshots/) |
-| Lantern — incident workflow | [Prompt](incident-workflow/PROMPT.md) | [Images](incident-workflow/screenshots/) |
-| Moss — comparison | [Prompt](comparison/PROMPT.md) | [Images](comparison/screenshots/) |
-| Juniper — migration | [Prompt](migration/PROMPT.md) | [Images](migration/screenshots/) |
-| Clearpath — OG images | [Prompt](og-images/PROMPT.md) | [Images](og-images/screenshots/) |
-| Alder — article briefing | [Prompt](article-brief/PROMPT.md) | [Images](article-brief/screenshots/) |
-| Waymark — results explanation | [Prompt](results-explanation/PROMPT.md) | [Images](results-explanation/screenshots/) |
-| Dockline — retrospective | [Prompt](retrospective/PROMPT.md) | [Images](retrospective/screenshots/) |
-| Fern — research briefing | [Prompt](research-brief/PROMPT.md) | [Images](research-brief/screenshots/) |
-| Cedar Support — decision memo | [Prompt](decision-memo/PROMPT.md) | [Images](decision-memo/screenshots/) |
-| Harbor — delivery plan | [Prompt](delivery-plan/PROMPT.md) | [Images](delivery-plan/screenshots/) |
-| Folio — teaching | [Prompt](teaching/PROMPT.md) | [Images](teaching/screenshots/) |
-| Tide — line chart | [Prompt](line-chart/PROMPT.md) | [Images](line-chart/screenshots/) |
-| Birch — bar chart | [Prompt](bar-chart/PROMPT.md) | [Images](bar-chart/screenshots/) |
-| Fieldnote — vertical and paired bar charts | [Prompt](vertical-bar-charts/PROMPT.md) | [Images](vertical-bar-charts/screenshots/) |
-| Brook — Sankey chart | [Prompt](sankey/PROMPT.md) | [Images](sankey/screenshots/) |
-
-The `index.tsx` files are retained presentation-runtime-independent React/SVG
-drawing references, not runnable routes or a second deck format. Agents can
-inspect and adapt their techniques, then convert supported SVG primitives into
-editable vector elements in the owning composition component.
-Shared authoring resources live in `design/` and `lib/`.
-
-Screenshots reflect the final reviewed browser renders, including manual repairs.
-They do not establish PDF/PPTX, cross-browser or cross-application fidelity.
+These four gallery exports are repository-only; their authoring projects are
+maintained separately. They are not bundled in npm or the hosted playground.
+The introduction and cover JSONs are included in npm; the playground bundles
+the introduction. View this gallery in the repository for its screenshots.

package/slides/drawing-references.md

@@ -0,0 +1,32 @@
+# React/SVG drawing references
+
+These 18 fictional examples preserve the earlier authoring approach: React/SVG
+source, original briefs and reviewed screenshots. Use them for drawing, typography
+and layout techniques; **they cannot be imported directly into the editor**.
+For editable documents, see the [native gallery](README.md).
+
+To adapt trusted source, follow the [conversion guide](../docs/development.md#reactsvg-drawing-references)
+and inspect the result in the canvas. These files are not runnable app routes.
+npm includes source and briefs; screenshots remain in the repository and show
+the historical browser renders, not export or cross-application fidelity.
+
+| Example / source | Brief | Screenshots |
+| --- | --- | --- |
+| [Patchnote — product introduction](product-introduction/index.tsx) | [Brief](product-introduction/PROMPT.md) | [Images](product-introduction/screenshots/) |
+| [Parcel Relay — architecture and sequence](architecture/index.tsx) | [Brief](architecture/PROMPT.md) | [Images](architecture/screenshots/) |
+| [Fieldnote — experiment](experiment/index.tsx) | [Brief](experiment/PROMPT.md) | [Images](experiment/screenshots/) |
+| [Lantern — incident workflow](incident-workflow/index.tsx) | [Brief](incident-workflow/PROMPT.md) | [Images](incident-workflow/screenshots/) |
+| [Moss — comparison](comparison/index.tsx) | [Brief](comparison/PROMPT.md) | [Images](comparison/screenshots/) |
+| [Juniper — migration](migration/index.tsx) | [Brief](migration/PROMPT.md) | [Images](migration/screenshots/) |
+| [Clearpath — OG images](og-images/index.tsx) | [Brief](og-images/PROMPT.md) | [Images](og-images/screenshots/) |
+| [Alder — article briefing](article-brief/index.tsx) | [Brief](article-brief/PROMPT.md) | [Images](article-brief/screenshots/) |
+| [Waymark — results explanation](results-explanation/index.tsx) | [Brief](results-explanation/PROMPT.md) | [Images](results-explanation/screenshots/) |
+| [Dockline — retrospective](retrospective/index.tsx) | [Brief](retrospective/PROMPT.md) | [Images](retrospective/screenshots/) |
+| [Fern — research and stacked bars](research-brief/index.tsx) | [Brief](research-brief/PROMPT.md) | [Images](research-brief/screenshots/) |
+| [Cedar Support — decision memo](decision-memo/index.tsx) | [Brief](decision-memo/PROMPT.md) | [Images](decision-memo/screenshots/) |
+| [Harbor — delivery plan and Gantt](delivery-plan/index.tsx) | [Brief](delivery-plan/PROMPT.md) | [Images](delivery-plan/screenshots/) |
+| [Folio — teaching](teaching/index.tsx) | [Brief](teaching/PROMPT.md) | [Images](teaching/screenshots/) |
+| [Tide — line chart](line-chart/index.tsx) | [Brief](line-chart/PROMPT.md) | [Images](line-chart/screenshots/) |
+| [Birch — grouped bar chart](bar-chart/index.tsx) | [Brief](bar-chart/PROMPT.md) | [Images](bar-chart/screenshots/) |
+| [Fieldnote — vertical and paired bars](vertical-bar-charts/index.tsx) | [Brief](vertical-bar-charts/PROMPT.md) | [Images](vertical-bar-charts/screenshots/) |
+| [Brook — Sankey chart](sankey/index.tsx) | [Brief](sankey/PROMPT.md) | [Images](sankey/screenshots/) |

package/slides/github-cover/PROMPT.md

@@ -0,0 +1,21 @@
+# Brief
+
+> i'd like a cover image for github repo. build it with konpeki
+
+## Adaptation
+
+- Assumed a 1280×640 GitHub social preview; unspecified mode resolved to default.
+- Use the existing blue mark, white canvas and IBM Plex Sans. Lead with “Konpeki”
+  and “Create clear visuals with your coding agent.”
+- Arrange different canvas sizes on a consistent grid, with white backgrounds
+  and text, image, chart, diagram and table motifs. Avoid labels or a single
+  workflow that suggests these are the only possible outputs.
+- A generated concept informed placement; the final uses editable text and
+  vectors, not a flattened concept image.
+
+## Sources
+
+- Product: [README](../../README.md) and [workflow](../../docs/workflow.md).
+- Brand: [project mark](../../src/assets/konpeki-mark.png) and bundled IBM Plex
+  Sans under its existing font license.
+- Canvas motifs are conceptual, not screenshots.

package/slides/github-cover/README.md

@@ -0,0 +1,21 @@
+# GitHub repository cover
+
+[composition.json](composition.json) holds the editable text and vectors;
+[cover.png](cover.png) is its 1280×640 Konpeki PNG export.
+The varied canvas sizes illustrate possible formats, not a fixed workflow.
+
+Open from the repository root, edit, then choose **Export PNG**:
+
+```sh
+mise exec -- pnpm konpeki preview slides/github-cover/composition.json
+```
+
+Refresh [public/og.png](../../public/og.png) for the playground's social cards.
+Uploading the cover to GitHub's repository social-preview setting is separate.
+
+[Brief and sources](PROMPT.md). [author.ts](author.ts) reconstructs the initial
+composition using Node.js and ImageMagick; **it overwrites canvas edits**.
+
+Original review: validation, typecheck and build passed; all five components and
+IBM Plex Sans loaded. Inspected the 1280×640 export and a 640×320 copy for alignment,
+clipping and legibility.