Tabler Core JavaScript
tabler/tabler
Guidance for changing the Tabler framework's own JavaScript in core/js: the tabler.js and tabler-theme.js bundles, the Bootstrap port and their tests.
Shows how to use @pierre/highlights for syntax-highlighted HTML or tokens, streaming and incremental tokenizing, and Zed-compatible themes with CSS variables.
Install Pierre Highlights
$ npx skills add pierrecomputer/pierre --skill highlights -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pierrecomputer/pierre highlights --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/highlights .claude/skills/highlights && 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 "highlights" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/highlights into .claude/skills/highlights/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "highlights", 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/highlightsType 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 highlights -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pierrecomputer/pierre highlights --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/highlights .agents/skills/highlights && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "highlights" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/highlights into .agents/skills/highlights/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "highlights", 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 highlights -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pierrecomputer/pierre highlights --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/highlights .cursor/skills/highlights && 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 "highlights" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/highlights into .cursor/skills/highlights/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "highlights", 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/highlights--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 highlights -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pierrecomputer/pierre highlights --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/highlights .gemini/skills/highlights && 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 "highlights" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/highlights into .gemini/skills/highlights/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "highlights", 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 highlightsInstalls 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 highlights -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/highlights .github/skills/highlights && 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 "highlights" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/highlights into .github/skills/highlights/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "highlights", 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 highlights -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 highlights --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/highlights .opencode/skills/highlights && 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 "highlights" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/highlights into .opencode/skills/highlights/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "highlights", 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
highlights- GitHub stars
- 6.2k
- Token cost
- ~409 tokens
- SKILL.md length
- 119 words
- Files
- 5 (incl. references)
- Skills in repo
- 10
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Shows how to use @pierre/highlights for syntax-highlighted HTML or tokens, streaming and incremental tokenizing, and Zed-compatible themes with CSS variables.
- Generating syntax-highlighted HTML for code blocks
- SKILL.md covers Install and Select a reference
- Calls pnpm
- Tokenizing streamed code as it arrives
What it does
The skill explains @pierre/highlights, a standalone syntax highlighting package with built-in WebAssembly lexers. You choose HTML for a complete code block, tokens for a custom renderer, StreamTokenizer for append-only input or LiveTokenizer for an editable document. It installs with pnpm add, and conditional exports start WebAssembly automatically for Node.js, browsers and Cloudflare Workers, so highlighting is synchronous after import and normal use needs no init call or language registration.
A table routes tasks to four reference files: rendering (HTML, tokens, language validation and Wasm module management), themes (loading and customizing themes, switching CSS variables, rendering several color schemes), streaming (tokenizing streamed strings or bytes) and live editing (applying edits, prioritizing a viewport and reading packed token records). For file, diff or editor components it points to a separate diffs skill.
When your agent uses it
- Generating syntax-highlighted HTML for code blocks
- Tokenizing streamed code as it arrives
- Incrementally re-tokenizing an editable document after edits
- Loading Zed-compatible themes and switching CSS variables
Example prompts
- “Render this TypeScript snippet to highlighted HTML with @pierre/highlights.”
- “Highlight the code my model streams back, token by token, as it arrives.”
- “Switch our code blocks between light and dark schemes using CSS variables.”
- “Re-tokenize the editor buffer after each edit and prioritize the visible viewport.”
Requirements
- The @pierre/highlights package, installed with pnpm
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 Highlights loads about 409 tokens when it runs, and up to ~5.8k if it reads all its reference files. Until then it costs about 48 tokens; SKILL.md has 119 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). 119 words, ~409 tokens.
Download SKILL.mdSave it as
.claude/skills/highlights/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.- name
- highlights
- description
- Use when an app uses @pierre/highlights to generate syntax-highlighted HTML or tokens, stream code, incrementally tokenize edits, or apply Zed-compatible themes and CSS variables.
@pierre/highlights
Use @pierre/highlights for standalone syntax highlighting with built-in
WebAssembly lexers. Choose HTML for a complete code block, tokens for a custom
renderer, StreamTokenizer for append-only input, or LiveTokenizer for an
editable document.
Install
pnpm add @pierre/highlightsImport from @pierre/highlights. Conditional exports initialize WebAssembly
automatically for Node.js, browsers, and Cloudflare Workers. Highlighting is
synchronous after import; ordinary usage needs no init() or language
registration.
Select a reference
| Task | Reference |
|---|---|
| Generate HTML or tokens, validate a language, or manage a Wasm module | Rendering |
| Load or customize themes, switch CSS variables, or render multiple schemes | Themes |
| Tokenize streamed strings or bytes | Streaming |
| Apply edits, prioritize a viewport, or read packed token records | Incremental editing |
For file, diff, or editor components, read the diffs skill.
© 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 4 other files (references) in skills/highlights of pierrecomputer/pierre.
- SKILL.md
- references/live.md
- references/rendering.md
- references/streaming.md
- references/themes.md
Open the folder on GitHubat commit d302ea0
Compare with similar skills
Pierre Highlights 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 Highlights this skillpierrecomputer/pierre | 6.2k | — | ~409 | Automated safety check: Pass | Apache-2.0 | |
| Tabler Core JavaScripttabler/tabler | 42k | — | ~1.4k | Automated safety check: Pass | MIT | |
| Vuetify Playgroundvuetifyjs/vuetify | 41k | — | ~730 | Automated safety check: Pass | Custom licence | |
| Tabler Astro Dev Servertabler/tabler | 42k | — | ~1.2k | Automated safety check: Pass | MIT | |
| Create Docsvictorgarciaesgi/nuxt-typed-router | 413 | 2 repos | ~2.8k | Automated safety check: Pass | MIT | |
| Variate Design VariationsNutlope/variate | 211 | — | ~3.5k | Automated safety check: Pass | MIT |
Similar skills
Vuetify Playground
vuetifyjs/vuetify
Maintains the Vuetify repo's local Playground.vue so contributors get a realistic reproduction and a short demo they can paste into a pull request description.
Tabler Astro Dev Server
tabler/tabler
Starts the right Tabler dev server, keeps it from clashing with builds and verifies changes in the browser before a page or component is handed back.
Create Docs
victorgarciaesgi/nuxt-typed-router
Create complete documentation sites for projects. An agent skill from victorgarciaesgi/nuxt-typed-router.
Variate Design Variations
Nutlope/variate
Puts four real design variations of one project file on your localhost behind a small card you flip with the arrow keys, then acts on your verdict.
Skin Developer
ningbainb/deepseek-harness-desktop
Build a new skin for the dsh-web-ui skin collection (DSH Web GUI) and publish it into the skin-center plugin — scaffold with scripts/dsh-skin-new, author skin.json plus the apply/dispose +…
More from pierrecomputer/pierre
All 10 skills in this repo@pierre/diffs Code Rendering
pierrecomputer/pierre
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.
Pierre 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 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 Highlights
What does Pierre Highlights do?
Shows how to use @pierre/highlights for syntax-highlighted HTML or tokens, streaming and incremental tokenizing, and Zed-compatible themes with CSS variables. The skill explains @pierre/highlights, a standalone syntax highlighting package with built-in WebAssembly lexers. You choose HTML for a complete code block, tokens for a custom renderer, StreamTokenizer for append-only input or LiveTokenizer for an editable document.
When should I use Pierre Highlights?
Pierre Highlights fits situations like: generating syntax-highlighted HTML for code blocks; tokenizing streamed code as it arrives; incrementally re-tokenizing an editable document after edits; loading Zed-compatible themes and switching CSS variables.
How do I install Pierre Highlights in Claude Code?
Run `npx skills add pierrecomputer/pierre --skill highlights -a claude-code`. Or copy the skill folder (skills/highlights in pierrecomputer/pierre) into .claude/skills/highlights in your project. Claude Code loads it when a task matches its description.
How do I install Pierre Highlights in Codex?
Run `npx skills add pierrecomputer/pierre --skill highlights -a codex`. Or copy the skill folder (skills/highlights in pierrecomputer/pierre) into .agents/skills/highlights in your project. Codex loads it when a task matches its description.
Can I use Pierre Highlights 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 highlights -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/highlights, .gemini/skills/highlights, .github/skills/highlights and .opencode/skills/highlights in your project.
What does Pierre Highlights need to run?
Going by SKILL.md and its folder, Pierre Highlights needs the command-line tools its instructions call (pnpm). Our summary lists: The @pierre/highlights package, installed with pnpm.
Does Pierre Highlights 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 Highlights 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 Highlights use?
Pierre Highlights 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 Highlights use?
About 409 tokens (SKILL.md is roughly 1.6k 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 5.4k tokens, read only when the agent opens those files.
What are the alternatives to Pierre Highlights?
Skills that share tags, products or a category with Pierre Highlights: Tabler Core JavaScript (tabler/tabler, 42k stars), Vuetify Playground (vuetifyjs/vuetify, 41k stars), Tabler Astro Dev Server (tabler/tabler, 42k stars) and Create Docs (victorgarciaesgi/nuxt-typed-router, 413 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Pierre Highlights?
pierrecomputer (a GitHub organization) maintains it in pierrecomputer/pierre, which has 6,243 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 6, 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.