본문으로 건너뛰기
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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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-tools1202026년 10월 20일 업데이트

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-tools1202026년 10월 20일 업데이트

yschimke의 스킬 모두 보기

이 스킬의 문제 신고