diffs — скилл для Claude Code: рендер файлов и диффов
Скилл для работы с библиотекой @pierre/diffs: подсветка синтаксиса, диффы, патчи и конфликты слияния в приложении.
npx skills add pierrecomputer/pierre --skill diffs -a claude-codeЧто делает diffs
Скилл diffs помогает агенту писать код с библиотекой @pierre/diffs — она рендерит файлы и диффы с подсветкой синтаксиса. Внутри лежит разбор API по поверхностям: ядро с парсингом и расширениями файлов, подсветка (языки, темы, потоки), низкоуровневый рендеринг, общие типы. Отдельные справочники есть для входов @pierre/diffs/react, @pierre/diffs/edit, @pierre/diffs/ssr и @pierre/diffs/worker.
Кроме справочников в скилле собраны рецепты под конкретные задачи: рендер файла или диффа в React и без React, виртуализированная поверхность ревью CodeView, редактирование, предзагрузка разметки на сервере, подсветка через пул воркеров, аннотации и выделение строк, регистрация своего языка или темы. Агент открывает нужный файл вместо того, чтобы угадывать сигнатуры.
Ставится библиотека командой pnpm add @pierre/diffs. Если приложение использует React-вход, понадобятся ещё react и react-dom — без них этот путь не соберётся. Для отдельной генерации HTML или токенов через @pierre/highlights в скилле есть отсылка к соседнему скиллу highlights.
Какие задачи решает
- отрисовать файл или дифф с подсветкой синтаксиса в React
- собрать виртуализированную поверхность ревью на CodeView
- добавить редактирование кода прямо в интерфейсе
- предзагрузить разметку диффа на сервере через SSR
- подсвечивать код в пуле воркеров или зарегистрировать свою тему
Примеры запросов агенту
- Отрисуй дифф из этого патча через @pierre/diffs/react
- Сделай поверхность ревью на CodeView с аннотациями по строкам
- Настрой подсветку через @pierre/diffs/worker для больших файлов
Как установить diffs
1Через Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill diffs -a claude-code2Вручную: положить файлы
~/.claude/skills/diffs/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/diffs/
1Через Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill diffs -a codex2Вручную: положить файлы
.agents/skills/diffs/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill diffs -a cursor2Вручную: положить файлы
.cursor/skills/diffs/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install pierrecomputer/pierre diffs2Вручную: положить файлы
.github/skills/diffs/SKILL.md1Через Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill diffs -a gemini-cli2Командой платформы
gemini skills install https://github.com/pierrecomputer/pierre --path skills/diffsВручную: положить файлы
.devin/skills/diffs/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add pierrecomputer/pierre --skill diffs -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о diffs
Как установить diffs в Claude?
Выполните npx skills add pierrecomputer/pierre --skill diffs -a claude-code. Файл скилла окажется в ~/.claude/skills/diffs/SKILL.md.
Что делает скилл diffs?
Он даёт агенту справочники и рецепты по библиотеке @pierre/diffs: рендер файлов и диффов, редактирование, SSR, воркеры, аннотации и кастомная подсветка.
Что нужно для работы скилла?
Сама библиотека ставится через pnpm add @pierre/diffs. Для React-входа нужны ещё пакеты react и react-dom.
Исходный текст
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
