Agent Skills
› trycompai/crm
› diffs
diffs
GitHub提供 @pierre/diffs 库的使用指南，涵盖语法高亮、代码差异渲染、编辑器功能及 SSR/Worker 支持，帮助开发者集成 React 或原生 JS 的代码查看与编辑界面。
Trigger Scenarios
需要渲染代码文件或 diff 视图
构建代码审查界面
实现代码编辑器功能
Install
npx skills add trycompai/crm --skill diffs -g -y
SKILL.md
Frontmatter
{
"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 Shiki 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.
Install
pnpm add @pierre/diffs
Install react and react-dom when the app uses the React entry.
Select an API reference
| Surface | Reference |
|---|---|
@pierre/diffs/react |
React API |
@pierre/diffs/edit |
Editor API |
Select a recipe
| Task | Recipe |
|---|---|
| Render a file or diff in React | Render with React |
| Build a virtualized review surface | Use CodeView |
| Edit a React surface or CodeView | Edit with React |
Not vendored here
These references were not copied into this skill. There is no local file for them. Read the package types and the upstream documentation instead.
- Core API: root components, parsing, and file extension APIs.
- Highlighting API: languages, themes, highlighter state, and streams.
- Low-level rendering API: renderers, managers, DOM helpers, and constants.
- Shared types: data, option, render, selection, and editor types.
- SSR API for
@pierre/diffs/ssr, and the recipe for preloading server markup. - Worker API for
@pierre/diffs/worker, and the recipe for a worker pool. - Recipes for vanilla JavaScript rendering and vanilla editing.
- Recipes for line annotations and selection.
- Recipe for registering a custom Shiki language or theme.
Version History
- 14cd220 Current 2026-08-12 09:17
