diffs — Claude Code skill: render files and diffs
A skill for building with @pierre/diffs: syntax-highlighted files, diffs, patches and merge conflicts inside your app.
npx skills add pierrecomputer/pierre --skill diffs -a claude-codeWhat diffs does
The diffs skill keeps an agent on track when an app uses @pierre/diffs to render or edit code. It splits the library into API references: core components and parsing, highlighting (languages, themes, streams), low-level renderers and DOM helpers, shared types. Separate references cover the @pierre/diffs/react, @pierre/diffs/edit, @pierre/diffs/ssr and @pierre/diffs/worker entries.
Recipes handle the actual jobs: rendering a file or diff in React, the same without React, a virtualized CodeView review surface, editing a React or vanilla surface, preloading markup on the server, highlighting through a worker pool, line annotations and selection, registering a custom language or theme. The agent reads the matching file instead of guessing at signatures.
Install the library with pnpm add @pierre/diffs. Apps that use the React entry also need react and react-dom — that path will not build without them. For standalone HTML or token generation through @pierre/highlights, the skill points to the neighbouring highlights skill.
What it helps with
- render a file or diff with syntax highlighting in React
- build a virtualized CodeView review surface
- add inline code editing to a UI
- preload diff markup on the server with SSR
- highlight through a worker pool or register a custom theme
Example prompts for the agent
- Render this patch as a diff with @pierre/diffs/react
- Build a CodeView review surface with line annotations
- Set up highlighting via @pierre/diffs/worker for large files
How to install diffs
1Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill diffs -a claude-code2Manually: put the files in place
~/.claude/skills/diffs/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/diffs/
1Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill diffs -a codex2Manually: put the files in place
.agents/skills/diffs/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill diffs -a cursor2Manually: put the files in place
.cursor/skills/diffs/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install pierrecomputer/pierre diffs2Manually: put the files in place
.github/skills/diffs/SKILL.md1Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill diffs -a gemini-cli2Platform CLI
gemini skills install https://github.com/pierrecomputer/pierre --path skills/diffsManually: put the files in place
.devin/skills/diffs/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill diffs -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about diffs
How do I install diffs in Claude?
Run npx skills add pierrecomputer/pierre --skill diffs -a claude-code. The skill lands at ~/.claude/skills/diffs/SKILL.md.
What does the diffs skill do?
It gives an agent API references and recipes for @pierre/diffs: rendering files and diffs, editing, SSR, workers, annotations and custom highlighting.
What do I need to run it?
The library itself installs with pnpm add @pierre/diffs. The React entry additionally needs react and react-dom.
Source text
SKILL.md · Apache-2.0
--- name: diffs description: Use when an app uses @pierre/diffs to render or edit code files, diffs, patches, merge conflicts, or CodeView review surfaces, including React, vanilla JavaScript, SSR, workers, annotations, selection, and custom syntax languages or themes. --- # `@pierre/diffs` Use `@pierre/diffs` to render syntax-highlighted files and diffs. Use its optional editor, SSR, and worker entries for those capabilities. For standalone HTML or token generation with `@pierre/highlights`, read the [highlights skill](../highlights/SKILL.md). ## Install ```bash pnpm add @pierre/diffs ``` Install `react` and `react-dom` when the app uses the React entry. ## Select an API reference | Surface | Reference | | ------------------------------------------------------------ | ------------------------------------------------------ | | Root components, parsing, and file extension APIs | [Core API](references/api-core.md) | | Languages, themes, highlighter state, and streams | [Highlighting API](references/api-highlighting.md) | | Renderers, managers, DOM helpers, comparisons, and constants | [Low-level rendering API](references/api-rendering.md) | | Shared data, option, render, selection, and editor types | [Shared types](references/api-types.md) | | `@pierre/diffs/react` | [React API](references/api-react.md) | | `@pierre/diffs/edit` | [Editor API](references/api-editor.md) | | `@pierre/diffs/ssr` | [SSR API](references/api-ssr.md) | | `@pierre/diffs/worker` and worker scripts | [Worker API](references/api-worker.md) | ## Select a recipe | Task | Recipe | | ----------------------------------- | ------------------------------------------------------------------------ | | Render a file or diff in React | [Render with React](references/recipe-react.md) | | Render a file or diff without React | [Render with vanilla JavaScript](references/recipe-vanilla.md) | | Build a virtualized review surface | [Use CodeView](references/recipe-code-view.md) | | Edit a React surface or CodeView | [Edit with React](references/recipe-edit-react.md) | | Edit a vanilla surface or CodeView | [Edit with vanilla JavaScript](references/recipe-edit-vanilla.md) | | Preload markup on the server | [Use SSR](references/recipe-ssr.md) | | Highlight through a worker pool | [Use workers](references/recipe-workers.md) | | Add line annotations and selection | [Add annotations and selection](references/recipe-annotations.md) | | Register a custom language or theme | [Register custom highlighting](references/recipe-custom-highlighting.md) |
© pierrecomputer · Apache-2.0 · pierrecomputer/pierre
