React Best Practices
shapeshift/web
Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering.
Guides an agent through using @pierre/diffs to render syntax-highlighted files and diffs, and to build editing and review surfaces in React or plain JavaScript.
Install @pierre/diffs Code Rendering
$ npx skills add pierrecomputer/pierre --skill diffs -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pierrecomputer/pierre diffs --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/pierrecomputer/pierre.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/diffs .claude/skills/diffs && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "diffs" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/diffs into .claude/skills/diffs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diffs", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/pierrecomputer/pierre/tree/main/skills/diffsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add pierrecomputer/pierre --skill diffs -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pierrecomputer/pierre diffs --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pierrecomputer/pierre.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/diffs .agents/skills/diffs && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "diffs" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/diffs into .agents/skills/diffs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diffs", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pierrecomputer/pierre --skill diffs -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pierrecomputer/pierre diffs --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pierrecomputer/pierre.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/diffs .cursor/skills/diffs && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "diffs" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/diffs into .cursor/skills/diffs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diffs", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/pierrecomputer/pierre.git --path skills/diffs--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add pierrecomputer/pierre --skill diffs -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pierrecomputer/pierre diffs --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pierrecomputer/pierre.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/diffs .gemini/skills/diffs && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "diffs" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/diffs into .gemini/skills/diffs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diffs", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install pierrecomputer/pierre diffsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add pierrecomputer/pierre --skill diffs -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/pierrecomputer/pierre.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/diffs .github/skills/diffs && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "diffs" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/diffs into .github/skills/diffs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diffs", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add pierrecomputer/pierre --skill diffs -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install pierrecomputer/pierre diffs --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/pierrecomputer/pierre.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/diffs .opencode/skills/diffs && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "diffs" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/diffs into .opencode/skills/diffs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diffs", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
diffs- GitHub stars
- 6.2k
- Used in
- 2 other repos
- Token cost
- ~803 tokens
- SKILL.md length
- 186 words
- Files
- 18 (incl. references)
- Skills in repo
- 10
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Guides an agent through using @pierre/diffs to render syntax-highlighted files and diffs, and to build editing and review surfaces in React or plain JavaScript.
- Adding a syntax-highlighted diff viewer to a React app
- SKILL.md covers Install, Select an API reference and Select a recipe
- Calls pnpm
- Building a code review surface with annotations and selection
What it does
The skill acts as a router into the @pierre/diffs library. It gives the install command for pnpm, adds react and react-dom when the React entry is used, and then points to an API reference for each surface: core components and parsing, highlighting, low-level rendering, shared types, and the react, edit, ssr and worker entry points.
A second table maps tasks to recipes: rendering a file or diff in React or without it, building a virtualized CodeView review surface, editing in either style, adding annotations, custom highlighting with Shiki languages or themes, server-side rendering and worker setups. Standalone HTML or token generation with @pierre/highlights is left to a separate highlights skill.
When your agent uses it
- Adding a syntax-highlighted diff viewer to a React app
- Building a code review surface with annotations and selection
- Rendering diffs on the server or moving highlighting into a worker
- Applying a custom Shiki theme or language to a diff view
Example prompts
- “Render the patch in ./changes.diff inside our React dashboard with @pierre/diffs.”
- “Add inline annotations to the diff view on the review page.”
- “Move syntax highlighting into a Web Worker so large diffs do not freeze the page.”
Requirements
- The @pierre/diffs package, installed with pnpm
- react and react-dom for the React entry
What it can do on your machine
Read from SKILL.md and the folder at commit d302ea0. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
pnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
@pierre/diffs Code Rendering loads about 803 tokens when it runs, and up to ~28k if it reads all its reference files. Until then it costs about 61 tokens; SKILL.md has 186 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from pierrecomputer/pierre at commit d302ea0, republished under its Apache-2.0 licence (© pierrecomputer). 186 words, ~803 tokens.
Download SKILL.mdSave it as
.claude/skills/diffs/SKILL.md (or your agent's skills folder). This skill also uses 17 other files; get the full folder from GitHub.- 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.
For standalone HTML or token generation with @pierre/highlights, read the
highlights skill.
Install
pnpm add @pierre/diffsInstall 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 |
© pierrecomputer, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 17 other files (references) in skills/diffs of pierrecomputer/pierre.
- SKILL.md
- references/api-core.md
- references/api-editor.md
- references/api-highlighting.md
- references/api-react.md
- references/api-rendering.md
- references/api-ssr.md
- references/api-types.md
- references/api-worker.md
- references/recipe-annotations.md
- references/recipe-code-view.md
- references/recipe-custom-highlighting.md
- references/recipe-edit-react.md
- references/recipe-edit-vanilla.md
- references/recipe-react.md
- references/recipe-ssr.md
- references/recipe-vanilla.md
- references/recipe-workers.md
Open the folder on GitHubat commit d302ea0
Used in 2 other repositories
We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 2 other GitHub owners. This page covers the copy in pierrecomputer/pierre, which our catalogue first saw on October 7, 2026.
Compare with similar skills
@pierre/diffs Code Rendering next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| @pierre/diffs Code Rendering this skillpierrecomputer/pierre | 6.2k | 2 repos | ~803 | Automated safety check: Pass | Apache-2.0 | |
| React Best Practicesshapeshift/web | 206 | 1 repos | ~2k | Automated safety check: Pass | MIT | |
| Frontend Code Reviewlangflow-ai/langflow | 156k | — | ~1.6k | Automated safety check: Pass | MIT | |
| Creating Docs Code Exampleshandsontable/handsontable | 22k | — | ~2.2k | Automated safety check: Pass | Custom licence | |
| Moai Ref React Patternsmodu-ai/moai-adk | 1.2k | — | ~1.8k | Automated safety check: Pass | Apache-2.0 | |
| Typescript Rulesshinpr/claude-code-workflows | 691 | — | ~1.8k | Automated safety check: Pass | MIT |
Similar skills
Frontend Code Review
langflow-ai/langflow
Review frontend code (.tsx, .ts, .js files) for quality, performance, and correctness against Langflow's frontend conventions.
Creating Docs Code Examples
handsontable/handsontable
Sets the rules for writing Handsontable documentation examples in JavaScript, TypeScript, React, Angular and Vue, with the imports, registration and licence key each needs.
Moai Ref React Patterns
modu-ai/moai-adk
React/Next.js component design patterns, state management strategies, and project structure reference for frontend development.
Typescript Rules
shinpr/claude-code-workflows
React/TypeScript frontend development rules including type safety, component design, state management, and error handling.
Wp Block Development
jorgerosal/wordpress-skills
WordPress block editor code review and Gutenberg block development patterns for WordPress 6.x+.
More from pierrecomputer/pierre
All 10 skills in this repoPierre Theming Library
pierrecomputer/pierre
Explains how to use the @pierre/theming package to list, resolve, select, switch and persist themes, with controller, color and React references.
Pierre Trees File Tree
pierrecomputer/pierre
Use when an app uses @pierre/trees to render or control a file tree, including React, vanilla JavaScript, SSR, web components, selection, search, rename, drag…
Pierre Highlights
pierrecomputer/pierre
Shows how to use @pierre/highlights for syntax-highlighted HTML or tokens, streaming and incremental tokenizing, and Zed-compatible themes with CSS variables.
Pierre Testing and Verification Guide
pierrecomputer/pierre
Chooses the right verification step after a code change in Pierre's monorepo: format and lint, a typecheck, Bun unit tests, snapshots, or Playwright E2E.
Pierre Theme Package
pierrecomputer/pierre
Shows an agent how to install and use the @pierre/theme package, which ships ten Pierre light and dark color themes for Shiki and VS Code.
Monorepo Tooling and Dependencies
pierrecomputer/pierre
Sets one monorepo's rules for toolchain pins, pnpm package operations, the shared dependency catalog and moon tasks, so the agent adds versions and scripts the right way.
Related
Works with
Categories
Questions about @pierre/diffs Code Rendering
What does @pierre/diffs Code Rendering do?
Guides an agent through using @pierre/diffs to render syntax-highlighted files and diffs, and to build editing and review surfaces in React or plain JavaScript. The skill acts as a router into the @pierre/diffs library. It gives the install command for pnpm, adds react and react-dom when the React entry is used, and then points to an API reference for each surface: core components and parsing, highlighting, low-level rendering, shared types, and the react, edit, ssr and worker entry points.
When should I use @pierre/diffs Code Rendering?
@pierre/diffs Code Rendering fits situations like: adding a syntax-highlighted diff viewer to a React app; building a code review surface with annotations and selection; rendering diffs on the server or moving highlighting into a worker; applying a custom Shiki theme or language to a diff view.
How do I install @pierre/diffs Code Rendering in Claude Code?
Run `npx skills add pierrecomputer/pierre --skill diffs -a claude-code`. Or copy the skill folder (skills/diffs in pierrecomputer/pierre) into .claude/skills/diffs in your project. Claude Code loads it when a task matches its description.
How do I install @pierre/diffs Code Rendering in Codex?
Run `npx skills add pierrecomputer/pierre --skill diffs -a codex`. Or copy the skill folder (skills/diffs in pierrecomputer/pierre) into .agents/skills/diffs in your project. Codex loads it when a task matches its description.
Can I use @pierre/diffs Code Rendering in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add pierrecomputer/pierre --skill diffs -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/diffs, .gemini/skills/diffs, .github/skills/diffs and .opencode/skills/diffs in your project.
What does @pierre/diffs Code Rendering need to run?
Going by SKILL.md and its folder, @pierre/diffs Code Rendering needs the command-line tools its instructions call (pnpm). Our summary lists: The @pierre/diffs package, installed with pnpm; react and react-dom for the React entry.
Does @pierre/diffs Code Rendering access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is @pierre/diffs Code Rendering safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does @pierre/diffs Code Rendering use?
@pierre/diffs Code Rendering is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does @pierre/diffs Code Rendering use?
About 803 tokens (SKILL.md is roughly 3.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 28k tokens, read only when the agent opens those files.
What are the alternatives to @pierre/diffs Code Rendering?
Skills that share tags, products or a category with @pierre/diffs Code Rendering: React Best Practices (shapeshift/web, 206 stars), Frontend Code Review (langflow-ai/langflow, 156k stars), Creating Docs Code Examples (handsontable/handsontable, 22k stars) and Moai Ref React Patterns (modu-ai/moai-adk, 1.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains @pierre/diffs Code Rendering?
pierrecomputer (a GitHub organization) maintains it in pierrecomputer/pierre, which has 6,244 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 8, 2026.
Source: pierrecomputer/pierre on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.