Repository navigation
chore: show a mockup before writing a UI issue - #166
Merged
Merged
Conversation
Add a mockup step to the issue workflow for changes people will see: an HTML page styled after the app, rendered to PNG, approved by the owner before the issue is written, kept on the chore/mockups branch and embedded in the issue. Subagents get it and compare their screenshots with it; the review does too. references/mockups.md has the steps and render-mockup.js renders a page. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015nMqJHsqtndDSqJDPp1qYv
Codex Review Summary: ✅ CompletedThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a mockup step to the issue workflow (
.claude/skills/issue-workflow/), as was done for the command editor (#160): for a change people will see, a picture of the finished feature is shown to the owner and approved before the issue is written.SKILL.md: a "Show a mockup first" part in step 1, a## Mockupsection in the issue template, comparing tester screenshots with the mockup in step 4, and checking them against it in the review (step 6).references/mockups.md: what to draw (callouts and a legend, options side by side, the other app's screenshot when it follows one), how to make it (an HTML page styled afterdocs/screenshots/, rendered with the sandbox's Playwright), how to show it, and how to keep it: on thechore/mockupsbranch, committed with a temporary index, embedded in the issue with a blob link. GitHub's attachment upload is browser-only.references/render-mockup.js: renders HTML pages to PNG at 2x.references/subagent-prompt.md: the prompt gives the subagent the mockup's path and link.The
chore/mockupsbranch already exists (no history in common withmain, never merged) with the #148 and #160 mockups, and #160 has a comment embedding them, which the owner confirmed shows the images.Closes #165
Testing
node .claude/skills/issue-workflow/references/render-mockup.js page.htmlrendered the command editor mockup's page to a 2480x1556 PNG.mockups.mdwas run as written againstorigin/chore/mockups: the new commit had the old images plus the new one and its parent was the branch head (not pushed).Generated by Claude Code