Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →backnotprop/pierre-guard
Guard against breaking the @pierre/diffs integration in Plannotator's code review UI.
Passed 17 of 20 test cases with the skill, and 5 of 20 without it.
and 17 more in the full report
14 fixed5 passed either way2 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 13 test cases the skill fixed. Same model, same prompt, with and without the skill.
Which specific script command should be run locally to start the review editor dev environment and visually verify split and unified diff rendering?
| Checked | Without skill | With skill |
|---|---|---|
| Specifies running bun run dev:review | Missed | Passed |
The instructions your model reads when the skill loads.
Plannotator's code review UI wraps @pierre/diffs — an open-source diff renderer that uses Shadow DOM. The integration is concentrated in a single file but relies on undocumented internals (shadow DOM selectors, CSS variable names, grid layout assumptions). This skill helps verify changes don't break that contract.
node_modules/@pierre/diffs/dist/ (.d.ts files)packages/review-editor/components/DiffViewer.tsxpackages/review-editor/package.json for the pinned versionAlways verify against the upstream repo or local .d.ts files — don't rely on memory of the API shape.
import { FileDiff } from '@pierre/diffs/react';
import { getSingularPatch, processFile } from '@pierre/diffs';
These are the only three imports. DiffViewer.tsx is the only file that touches Pierre.
FileDiff)Read the current prop types from node_modules/@pierre/diffs/dist/react/index.d.ts or the upstream source. The props we use:
| Prop | Type | Notes |
|---|---|---|
fileDiff | FileDiffMetadata | From getSingularPatch() or processFile() |
options | FileDiffOptions<T> | See options table below |
lineAnnotations | DiffLineAnnotation<T>[] | { side, lineNumber, metadata } |
selectedLines | SelectedLineRange | null | { start, end, side } |
renderAnnotation | (ann) => ReactNode | Custom inline annotation renderer |
renderHoverUtility | (getHoveredLine) => ReactNode | The + button on hover (deprecated upstream — watch for removal) |
| Option | Value We Pass | Risk |
test cases passed, vs 5 / 20 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.