opencode

Install one skill and opencode embeds the Patchrooms widget whenever it generates a UI artifact for review — reviewers comment straight on the preview, and opencode gets clean, structured feedback to patch from.

Prerequisites

opencode with skills enabled.
For cloud reports: a project key (pr_…) from your Patchrooms dashboard. Local mode needs no account.

Install the skill

Place the skill so opencode can discover it:

Directoryyour-project/
- Directoryskills/
  - Directorypatchrooms-artifact-review/
    SKILL.md

Paste this into SKILL.md:

---
name: patchrooms-artifact-review
description: Embed the Patchrooms SDK when generating an HTML/React/preview artifact a human will review, so reviewers comment in place and feedback returns as structured, agent-ready context.
---

# Patchrooms: make generated artifacts reviewable

When you generate a UI artifact (HTML page, React app, preview build) a human
will review, embed Patchrooms. The preview becomes a review room: the reviewer
clicks any element to comment in place, and you get clean, structured feedback.
Apply when the artifact has a visual surface; skip backend-only code.

## 1. Embed the SDK

Add before `</body>`. The UMD build attaches `window.Patchrooms`.

```html
<script src="https://room.patchrooms.com/v1/patchrooms.js"></script>
<script>
  Patchrooms.init({
    mode: 'artifact-review',
    storage: 'local',                 // zero-friction: no account, no backend
    artifact: {
      id: 'my-app',                   // stable room key — reuse across regenerations
      title: 'Checkout flow',
      tool: 'opencode',
      goal: 'What this artifact should do',
    },
  });
</script>
```

For React, put both `<script>` tags in `index.html` so `window.Patchrooms`
exists before app code runs.

## 2. Storage mode

- `storage: 'local'` — default for generated previews: no account, no backend,
  no network calls; reports live in localStorage. The reviewer exports them
  ("Copy agent feedback" / Download `.md`) and pastes the Markdown back.
- Cloud — if the user supplies a `projectKey` (`pr_…`), pass it in `init()` and
  omit `storage` (cloud is default). Reports land in the dashboard and stream
  live; an agent can read them over MCP. `projectKey` is not a `data-*`
  attribute.

## 3. Stable anchors

Put `data-patchroom-id` on the key elements (primary buttons, header, nav, hero,
form fields) using semantic, stable ids so comments survive regeneration.

```html
<button data-patchroom-id="checkout-submit">Pay now</button>
```

## 4. Rules

- Never embed secrets, tokens, or PII in the page, `artifact.meta`, or `extra`.
- `pr_…` is public and safe; a secret `pr_sk_…` key must never appear in client
  code.
- After shipping, tell the user: open the preview, click elements to comment,
  then "Copy agent feedback" / Download `.md` and paste it back so you can patch.

Where it goes

The skill lives in your project’s skills/ directory (or wherever your opencode config loads skills from). opencode surfaces it by its description when you ask it to build a reviewable UI.

The install snippet opencode emits

By default the skill uses the local snippet above (no account). When you provide a project key, the cloud install is the per-project loader — the key lives in the URL and the server inlines your config, so the widget auto-initializes:

<script src="https://room.patchrooms.com/v1/patchrooms/pr_xxx.js"></script>

Programmatic alternative (when the skill should attach mode/artifact):

<script src="https://room.patchrooms.com/v1/patchrooms.js"></script>
<script>
  Patchrooms.init({ projectKey: 'pr_xxx', mode: 'artifact-review', artifact: { id: 'my-app', tool: 'opencode' } });
</script>

Verify it works

Ask opencode to generate or edit a UI page, then open the preview.
Confirm the Patchrooms launcher appears docked to the viewport edge.
Click an element to comment. With a project key, the report should stream into your dashboard.

Your first feedback

Open the preview, click an anchored element, and leave a comment such as:

The empty state has no call to action — add a “Create your first room” button.

Attach a screenshot or element selection in the same thread. In local mode, hit Copy agent feedback / Download .md and paste the Markdown back into opencode to patch. In cloud mode, the report is already in your dashboard (and readable by an agent over MCP).

API the skill relies on

Real init options (packages/sdk-web/src/types.ts):

mode: 'default' | 'artifact-review'.
storage: 'cloud' | 'local' — local means no backend, no network.
artifact: { id, title?, tool?, source?, goal?, constraints?: string[], url?, meta? }. id is the stable room key.
Script data-* reads: data-project-key, data-mode, data-artifact-id, data-source, data-storage.

Troubleshooting

Symptom	Fix
opencode doesn’t apply the skill	Confirm `SKILL.md` is under your `skills/` directory and ask explicitly for a reviewable UI.
No launcher in the preview	Check the `<script>` is in the rendered HTML. In React, both tags must be in `index.html`.
Console: `[Patchrooms] unknown project key`	The `pr_…` key in the loader URL is wrong — copy it from the dashboard.
Comments drift after regeneration	Use stable `data-patchroom-id` anchors and reuse the same ids.