Artifact organizer diff
Skill keepYaoung/artifact-organizer/skills/artifact-organizer-diff
Agent skill that turns semantic JSON into self-contained, themed HTML — then stacks your artifacts into one persistent, restyleable dashboard. Zero dependencies, opens offline.
npx -y skills add keepYaoung/artifact-organizer --skill artifact-organizer-diffAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Generate a visual diff review page (ArchitectureGrid for impacted modules + CodeDiff for hunks + Callouts for risks) from a git range, PR URL, or pasted diff. Use whenever the user asks for a PR review, diff summary, change impact analysis, or pastes `git diff` output. Requires the `artifact-organizer` skill (renderer engine).
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
5.5 KB, as published. Nobody here has run it
Step 0 — Preference: Before running any renderer command, perform the theme-preference resolution block from the base
artifact-organizerskill (~/.claude/skills/artifact-organizer/SKILL.md, section "Step 0"). It sets$THEMEand$RENDERER. If absent, this wrapper falls back tonotion+auto.
Artifact Organizer — Diff review mode
Produces a self-contained HTML diff review using artifact-organizer/CodeDiff, artifact-organizer/ArchitectureGrid (for impacted modules), and artifact-organizer/Callout (for risks). Thin wrapper over the artifact-organizer skill.
When to use
- User pastes a unified diff or
git diffoutput and asks for review/summary. - User gives a PR URL (
github.com/owner/repo/pull/N) and asks for review. - User gives a git range (
main..HEAD,HEAD~5..HEAD, SHA range). - User says "review these changes", "what changed", "impact of this diff".
Do not use for: generic commit history summaries (no concrete diff), feature spec writing, or rendering a single code snippet (use hyperscribe with CodeBlock).
Source detection
- Git range — run
git diff <range>to get the unified diff. - PR URL — use
gh pr diff <N> -R owner/repoorgh api repos/owner/repo/pulls/<N>.diff. - Pasted diff — use the provided text directly.
- No clear source — ask the user before continuing.
Envelope structure
{
"a2ui_version": "0.9",
"catalog": "artifact-organizer/v1",
"is_task_complete": true,
"parts": [
{
"component": "artifact-organizer/Page",
"props": { "title": "Diff: <short summary>", "subtitle": "<N files, +X -Y lines>", "toc": true },
"children": [
{
"component": "artifact-organizer/Section",
"props": { "id": "summary", "title": "Summary", "lead": "**What changed** and **why it matters**." },
"children": [
{ "component": "artifact-organizer/Prose", "props": { "markdown": "One-paragraph summary." } },
{ "component": "artifact-organizer/ArchitectureGrid", "props": {
"layout": "grid",
"nodes": [ { "id": "auth", "title": "Auth module", "tag": "modified" } ]
}}
]
},
{
"component": "artifact-organizer/Section",
"props": { "id": "risks", "title": "Risks" },
"children": [
{ "component": "artifact-organizer/Callout", "props": { "severity": "warn", "title": "Migration required", "body": "..." }}
]
},
{
"component": "artifact-organizer/Section",
"props": { "id": "changes", "title": "Changes" },
"children": [
{ "component": "artifact-organizer/CodeDiff", "props": {
"filename": "src/auth.ts",
"lang": "ts",
"hunks": [ { "before": "const x = 1;", "after": "const x = 2;", "atLine": 42 } ]
}}
]
}
]
}
]
}
Section checklist
A solid diff review includes:
- Summary — 1-paragraph
Prose+ArchitectureGridof impacted modules (tag eachmodified/added/removed) - Risks —
Callouts for breaking changes, migrations, perf, security - Changes — one
CodeDiffper significant file. Aggregate tiny typo-level changes; split big refactors by file. - (Optional) Testing plan —
StepListof manual verification steps - (Optional) Follow-ups — bullet list of deferred work
Callout severity guide
| Severity | When |
|---|---|
info | Notable but benign (e.g., removes unused import) |
note | Context reviewer should know (e.g., related to issue #42) |
warn | Behavior change callers should verify |
danger | Breaking change, security concern, data-loss risk |
success | Celebratory (new test coverage, perf win) |
Render
Same as the base artifact-organizer skill — resolve renderer, pipe JSON, write HTML, open.
HS=$(for p in \
./.claude/skills/artifact-organizer ~/.claude/skills/artifact-organizer \
./.codex/skills/artifact-organizer ~/.codex/skills/artifact-organizer \
./.cursor/skills/artifact-organizer ~/.cursor/skills/artifact-organizer \
./.opencode/skills/artifact-organizer ~/.opencode/skills/artifact-organizer \
~/.claude/plugins/cache/artifact-organizer-marketplace/*/plugins/artifact-organizer
do [ -x "$p/scripts/outprint" ] && { echo "$p/scripts/outprint"; break; }; done)
if [ -z "$HS" ]; then
echo "artifact-organizer renderer not found. Install with: npx skills add keepYaoung/artifact-organizer" >&2
exit 1
fi
mkdir -p ~/.artifact-organizer/out
OUT=~/.artifact-organizer/out/diff-$(date +%Y%m%d-%H%M%S).html
cat <<'EOF' | "$HS" --theme "${THEME:-notion}" --renderer "${RENDERER:-auto}" --out "$OUT"
<the JSON you built>
EOF
open "$OUT"
Avoid
- Dumping the raw diff into one giant
CodeBlock— useCodeDiffper file so before/after lanes render. - Inventing risks not supported by the diff content.
- Using
Mermaidfor diff visualization unless the diff itself restructures a flow (then: before/afterArchitectureGridside by side).