pierre-guard
Guard against breaking the @pierre/diffs integration in Plannotator's code review UI. Use this skill whenever modifying DiffViewer.tsx, upgrading the @pierre/diffs package, changing unsafeCSS injection, adding new props to FileDiff, or touching shadow DOM selectors or CSS variables that cross into Pierre's shadow boundary. Also trigger when someone asks "will this break the diff viewer", "is this safe to change", or when reviewing PRs that touch the review-editor package.
Profile →npx skills add backnotprop/plannotator --skill pierre-guard --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Pierre Integration Guard 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. ## Source of Truth - **Upstream repo**: https://github.com/pierrecomputer/pierre/tree/main/packages/diffs - **Local types**: `node_modules/@pierre/diffs/dist/` (`.d.ts` files) - **Integration point**: `packages/review-editor/components/DiffViewer.tsx` - **Current version**: check `packages/review-editor/package.json` for the pinned version Always verify against the upstream repo or local `.d.ts` files — don't rely on memory of the API shape. ## What We Import ```typescript 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. ## API Surface to Guard ### 1. Component Props (`FileDiff`) Read the current prop types from `node_modules/@pierre/diffs/dist/react/index.d.ts` or the upstream source. The p
- Source of Truth
- What We Import
- API Surface to Guard
- 1. Component Props (FileDiff)
- 2. Options Object
- 3. Shadow DOM Selectors (via unsafeCSS)
- 4. CSS Variables We Override
- 5. CSS Variables We Inject (Custom)
- 6. Grid Layout Assumption
- Verification Checklist
- Props & Types
- Shadow DOM Selectors
- CSS Variables
- Theme Compliance
cp -r node_modules/@pierre/diffs/dist /tmp/pierre-old diff -r /tmp/pierre-old node_modules/@pierre/diffs/dist
What does the pierre-guard skill do?
Guard against breaking the @pierre/diffs integration in Plannotator's code review UI. Use this skill whenever modifying DiffViewer.tsx, upgrading the @pierre/diffs package, changing unsafeCSS injection, adding new props to FileDiff, or touching shadow DOM selectors or CSS variables that cross into Pierre's shadow boundary. Also trigger when someone asks "will this break the diff viewer", "is this safe to change", or when reviewing PRs that touch the review-editor package.
How do I install it?
Run `npx skills add backnotprop/plannotator --skill pierre-guard --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From backnotprop/plannotator, a repository with 7,510 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.