agentsclimarketplace

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.

Install
npx -y skills add keepYaoung/artifact-organizer --skill artifact-organizer-diff

Assembled 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-organizer skill (~/.claude/skills/artifact-organizer/SKILL.md, section "Step 0"). It sets $THEME and $RENDERER. If absent, this wrapper falls back to notion + 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 diff output 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

  1. Git range — run git diff <range> to get the unified diff.
  2. PR URL — use gh pr diff <N> -R owner/repo or gh api repos/owner/repo/pulls/<N>.diff.
  3. Pasted diff — use the provided text directly.
  4. 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 + ArchitectureGrid of impacted modules (tag each modified / added / removed)
  • RisksCallouts for breaking changes, migrations, perf, security
  • Changes — one CodeDiff per significant file. Aggregate tiny typo-level changes; split big refactors by file.
  • (Optional) Testing planStepList of manual verification steps
  • (Optional) Follow-ups — bullet list of deferred work

Callout severity guide

SeverityWhen
infoNotable but benign (e.g., removes unused import)
noteContext reviewer should know (e.g., related to issue #42)
warnBehavior change callers should verify
dangerBreaking change, security concern, data-loss risk
successCelebratory (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 — use CodeDiff per file so before/after lanes render.
  • Inventing risks not supported by the diff content.
  • Using Mermaid for diff visualization unless the diff itself restructures a flow (then: before/after ArchitectureGrid side by side).

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.