feat(skills): add pr-design-doc skill - #451
Conversation
Add a skill that guides writing a self-contained HTML design doc for a non-trivial PR, committed under the temporary .pr/ directory and linked in the PR description via htmlpreview so maintainers see the code/API design and the before/after at a glance, grounded to real code. Adapted from the show-me visualization skill for the OpenHands PR-review workflow: focuses the craft on the .pr/ convention (auto-removed on approval) and the fork-branch htmlpreview link that renders before merge. Includes SKILL.md, README.md, references/html-craft.md, the generated command files and .plugin manifest/symlinks, and the marketplace + README catalog registration. sync_extensions.py --check passes. Co-authored-by: smolpaws <engel@enyst.org>
Point contributors at the frontend-design skill, if it helps, when building the design HTML page. Co-authored-by: smolpaws <engel@enyst.org>
|
👋 This PR needs a couple of things fixed before OpenHands can review it:
Push an update once this is addressed and this check re-runs automatically. This is an automated check - no AI was used to generate this comment. |
The pr-artifacts workflow removes .pr/ on approval only for same-repository PRs; fork PRs require manual cleanup before merge. Adjust the skill and README to state this accurately rather than claiming it never lands in main. Co-authored-by: openhands <openhands@all-hands.dev>
The reference is a PR-design-doc craft doc, but six of its sections (dependency graphs, deployment/topology, swimlanes, state machines, capability matrices, misconception-correction) are generic 'show-me' visualization breadth not specific to PR design docs. Drop them to keep the skill tightly scoped to its purpose; retain the editorial HTML shell, before/after SVG encoding, figure captions, code grounding, and the htmlpreview delivery guidance the skill actually depends on. Co-authored-by: openhands <openhands@all-hands.dev>
Removed section on human accessibility and GitHub link preference.
Removed instructions for serving HTML files over HTTP for private repositories.
The checked-in skills/index.js was stale and missing pr-design-doc, so test_index_is_up_to_date failed. Regenerate via build-skills-catalog.mjs. Note: the category-count snapshot test (test_category_distribution_is_balanced) is intentionally NOT updated here — it is useless and is being removed in a separate PR. Co-authored-by: openhands <openhands@all-hands.dev>
95401f0 to
3fa97f7
Compare
|
🚦 CI is currently failing on this PR's latest commit. Please fix the failing checks before OpenHands reviews it - this is re-checked automatically once you push a new commit. (A maintainer can also request This is an automated check - no AI was used to generate this comment. |
|
🚦 CI is currently failing on this PR's latest commit. Please fix the failing checks before OpenHands reviews it - this is re-checked automatically once you push a new commit. (A maintainer can also request This is an automated check - no AI was used to generate this comment. |
…skill # Conflicts: # README.md # marketplaces/openhands-extensions.json
enyst
left a comment
There was a problem hiding this comment.
I am an AI agent posting on behalf of Engel.
Requesting changes before this is suitable for the global extensions registry:
- Scope and cleanup:
.pr/cleanup is repository-specific. Keep this skill repo-local until the cleanup and hosting contract is portable, and require a manual fallback when the workflow is absent or does not cover forks. - Branch and filesystem safety: start from a clean checkout, verify
HEADequals the PRheadRefOid, reject symlinks at.pr/and the output file, then push explicitly to the verified head repository and branch. - Evidence links: use the base repository at the merge-base SHA for before/deleted code, and the head repository at the verified head SHA for after code.
- Preview safety: use htmlpreview only for public repositories. Private/internal docs must stay local or access-controlled, contain no external active content, and context-escape attributes plus URL-encode dynamic path segments.
- Presentation correctness: make SVG edge styling match the legend and follow the repository's plain-hyphen guidance.
Corrected repo-local replacements:
HUMAN:
Human attention is a scarce resource. This PR proposes a skill to teach the agent the make-up of an HTML design doc for non-trivial PRs, that allows a better quick view of the proposed changes, than the raw diff. The doc would show the state before and after, and contains instructions to focus the agent on summarizing, on capturing what is relevant, including SVG diagrams if needed.
I have personally used a very similar skill for a few dozen arch notes, studies of a repo or component or feature behavior, and I think the result is much better to go through than raw diffs.
Why
Reviewers of a non-trivial PR often have to reconstruct the design from the diff alone — the shape of the change, the API before/after, and why this approach. That's slow and error-prone. This skill guides an agent to hand maintainers a single, self-contained HTML design doc they can grasp in ~15 seconds, grounded to real code.
It also operationalizes the
.pr/convention: the doc is committed under the temporary.pr/directory (auto-removed on approval bypr-artifacts.yml), and linked in the PR description via an htmlpreview URL that renders before the PR is merged.Companion guideline issue: OpenHands/OpenHands#16304.
Summary
pr-design-docskill (/pr-design-doc,/design-doc): when to use it (and when to skip — trivial PRs), the.pr/workflow, a step-by-step process, what the page contains (decision-first summary, API before/after, per-file before/after cards grounded topath:line), and anti-patterns.references/html-craft.md— the editorial look, hand-drawn before/after SVG technique, code-grounding discipline, and the htmlpreview delivery link (adapted so.pr/+ the fork/branch URL is the primary path).openhands-extensionsmarketplace + README catalog; add the.pluginmanifest, vendor symlinks, and generated command files viascripts/sync_extensions.py.Adapted from the
show-mevisualization skill, focused on the OpenHands PR-review workflow.Issue Number
Related: OpenHands/OpenHands#16304
How to Test
You can also read
skills/pr-design-doc/SKILL.mdand follow it against any non-trivial PR: it produces.pr/design.htmland an htmlpreview link of the shapehttps://htmlpreview.github.io/?https://github.com/<fork-owner>/<repo>/blob/<pr-branch>/.pr/design.html.Notes
.pr/auto-removal workflow lives inOpenHands/OpenHands; this skill documents relying on it.Co-authored-by: smolpaws engel@enyst.org