Agent Skills › pierrecomputer/pierre › diffs

diffs

GitHub

用于渲染语法高亮文件、差异对比及代码审查界面的库，支持React、原生JS、SSR和Web Worker。提供编辑、选择、注释及自定义主题功能，适用于构建代码查看器和合并冲突处理等场景。

skills/diffs/SKILL.md pierrecomputer/pierre

Trigger Scenarios

需要渲染代码文件或diff内容构建代码审查界面或CodeView 处理合并冲突展示实现代码编辑器功能

Install

npx skills add pierrecomputer/pierre --skill diffs -g -y

More Options

Use without installing

npx skills use pierrecomputer/pierre@diffs

指定 Agent (Claude Code)

npx skills add pierrecomputer/pierre --skill diffs -a claude-code -g -y

安装 repo 全部 skill

npx skills add pierrecomputer/pierre --all -g -y

预览 repo 内 skill

npx skills add pierrecomputer/pierre --list

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
Root components, parsing, and file extension APIs	Core API
Languages, themes, highlighter state, and streams	Highlighting API
Renderers, managers, DOM helpers, comparisons, and constants	Low-level rendering API
Shared data, option, render, selection, and editor types	Shared types
`@pierre/diffs/react`	React API
`@pierre/diffs/edit`	Editor API
`@pierre/diffs/ssr`	SSR API
`@pierre/diffs/worker` and worker scripts	Worker API

Select a recipe

Task	Recipe
Render a file or diff in React	Render with React
Render a file or diff without React	Render with vanilla JavaScript
Build a virtualized review surface	Use CodeView
Edit a React surface or CodeView	Edit with React
Edit a vanilla surface or CodeView	Edit with vanilla JavaScript
Preload markup on the server	Use SSR
Highlight through a worker pool	Use workers
Add line annotations and selection	Add annotations and selection
Register a Shiki language or theme	Register custom highlighting