本文へ移動
cccskills
無料GitHub で公開

render-evidence

Capture the before/after rendered PNGs a UI-affecting PR in this repository needs as visual evidence, including bringing an Android SDK up in a fresh sandbox. Use when a change touches a Compose @Preview, a catalog, the VS Code webview, an overlay, a theme, an icon or a fixture, and the PR body needs real pixels.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md5.5 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Capturing visual evidence

Root AGENTS.md says a UI-affecting PR must carry before/after evidence as embedded, viewable images — describing an image, or deferring to the diff bot's auto-comment, does not count. This is how to produce them here.

Check what already exists first

Rendering is not free. Before capturing anything:

  • Read the sticky <!-- preview-diff --> comment on the PR — CI may already have rendered and diffed exactly the surface you changed.
  • Reuse renders published on the compose-preview/pr and compose-preview/main branches where they cover the change.
  • Scan .github/workflows for the preview-diff CI this repo already runs, and cite it.

The bot's comment is a convenience, not a substitute: your PR body still needs your change's before/after embedded in it.

Rendering

Whole sample modules:

./gradlew :samples:android:composePreviewRenderAll
./gradlew :samples:cmp:composePreviewRenderAll

One preview, which is what a before/after pair usually wants:

./gradlew :samples:android:composePreviewRender --rerun \
  -PcomposePreview.filter=<PreviewFunctionName>

--rerun matters. A failed render leaves .error.json sidecars that count as task outputs, so composePreviewRender goes UP-TO-DATE and re-reports the stale failure. PNGs land under <module>/build/compose-previews/renders/.

The samples consume the plugin through includeBuild("gradle-plugin"), so a plugin edit is picked up with no publish step.

For the before side, render at the base commit (git stash, or a worktree at origin/main) into a separate directory before rendering the head.

The Android lane needs an SDK; the Desktop lane does not

  • Compose Desktop renders headlessly — no DISPLAY, X server or xvfb. Skia's software path draws offscreen. If a desktop render looks broken in a sandbox, it is almost never the windowing system: check the JDK 17 toolchain and the native deps first, per Common commands and docs/DESKTOP_NATIVE_DEPS.md.
  • The Android/Robolectric lane needs an Android SDK, which a fresh container does not have. scripts/install.sh --android-sdk installs it (and a JDK when ./gradlew reports "Unable to download toolchain"). The traps that cost a whole session — chiefly that the platform package for compileSdk = 37 is platforms;android-37.0, not android-37, and that the wrong name fails the entire sdkmanager invocation it appears in, taking the SDK 36 packages down with it — are written up under Bringing up a fresh sandbox. Read that before improvising. Cold end-to-end run is about 3 minutes.

Surfaces the @Preview pipeline does not reach

  • VS Code panel UI (src/webview/, media/preview*.css) has its own capture path: the preview-harness boots the real <preview-app> bundle headlessly against fixture JSON. Loop and fixture authoring are in preview-harness/README.md; seed fixtures are grid-default and a11y-findings.
  • A semantics overlay has a renderable proxy: the compose/semantics-wireframe SVG.
  • Anything genuinely uncapturable here (a three.js webview in a headless container): say so explicitly in the PR body, embed a proxy if one exists, and state how a human or CI verifies it visually. Then treat "nothing renders this yet" as a gap to close in the same or a fast-follow PR — register a fixture or a @Preview with the preview-harness so the next change to that surface is diffed automatically.

Getting the pixels into the PR

  1. Commit the PNGs you intend to cite to your working branch and push.
  2. Embed them as markdown images whose URLs are commit-SHA-pinned raw.githubusercontent.com links to those pushed files — the same form the diff bot uses. This is not just convention: a ![alt](url) whose host is not a GitHub origin has its ! stripped before it reaches the API, silently, so a deployment URL or a CDN link arrives as a bare link and the evidence is gone. Committing and citing the raw URL is what makes the image survive.
  3. Write ![alt](url) plainly and leave any backticks that appear alone. They are injected between the agent and GitHub, and the PR Body Syntax workflow repairs them in place. The three cases it does not cover — review comments, destinations mangled past recognition, and a picture that still did not render — are in PR workflow.
  4. Verify the pixels actually render on the published page before claiming evidence. WebFetch caches per URL for ~15 minutes; bust it with a throwaway query parameter rather than chasing a bug you already fixed.

A before/after pair whose two images look identical is a finding, not a failure — either the change is not visual, or the render did not pick it up. Say which.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Decide whether a preview the visual-diff bot flagged actually regressed or is simply nondeterministic, using a repeat-render oracle at a single commit. Use when a PR's preview diff reports a changed preview whose source the PR does not touch, or when a render, GIF or filmstrip is suspected of being unstable.

日本語の概要は準備中です。原文の説明を表示しています。

yschimke/compose-ai-tools1172026年10月12日 更新

steward

無料

Drive a pull request on this repository to green — which fast checks to run before pushing, how to read a red check, and what to do about a review comment. Use when a CI failure, a review comment, a merge conflict, or a scheduled check-in arrives on a PR you opened or were asked to drive.

日本語の概要は準備中です。原文の説明を表示しています。

yschimke/compose-ai-tools1172026年10月12日 更新

yschimke のスキルをすべて見る

このスキルの問題を報告する