Create Docs
victorgarciaesgi/nuxt-typed-router
Create complete documentation sites for projects. An agent skill from victorgarciaesgi/nuxt-typed-router.
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.
Install Pierre Theme Package
$ npx skills add pierrecomputer/pierre --skill theme -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pierrecomputer/pierre theme --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/theme .claude/skills/theme && 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 "theme" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/theme into .claude/skills/theme/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "theme", 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/themeType 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 theme -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pierrecomputer/pierre theme --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/theme .agents/skills/theme && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "theme" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/theme into .agents/skills/theme/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "theme", 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 theme -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pierrecomputer/pierre theme --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/theme .cursor/skills/theme && 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 "theme" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/theme into .cursor/skills/theme/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "theme", 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/theme--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 theme -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pierrecomputer/pierre theme --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/theme .gemini/skills/theme && 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 "theme" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/theme into .gemini/skills/theme/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "theme", 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 themeInstalls 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 theme -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/theme .github/skills/theme && 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 "theme" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/theme into .github/skills/theme/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "theme", 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 theme -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 theme --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/theme .opencode/skills/theme && 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 "theme" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/theme into .opencode/skills/theme/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "theme", 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
theme- GitHub stars
- 6.2k
- Token cost
- ~352 tokens
- SKILL.md length
- 100 words
- Files
- 5 (incl. references)
- Skills in repo
- 10
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
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.
- Adding a Pierre light or dark theme to a Shiki code highlighter
- SKILL.md covers Install, Select an API reference and Select a recipe
- Calls pnpm
- Installing a Pierre theme in VS Code, Cursor or Zed
What it does
This skill points the agent at the `@pierre/theme` package, which provides ten immutable theme objects for Shiki and VS Code. The main file works as a router with two lookup references: an API reference listing every package entry and export, and a variants guide for comparing the themes and choosing one.
Two recipes cover the common jobs, loading a Pierre theme in Shiki and installing one in an editor. The description also names Cursor and Zed, plus soft, vibrant, protanopia, deuteranopia and tritanopia variants. When an app has to switch themes at runtime or follow the system color mode, the skill hands off to a separate `theming` skill, and Zed-compatible themes for `@pierre/highlights` are covered by a separate highlights skill.
When your agent uses it
- Adding a Pierre light or dark theme to a Shiki code highlighter
- Installing a Pierre theme in VS Code, Cursor or Zed
- Choosing between the soft, vibrant and color-vision variants
Example prompts
- “Use the Pierre dark theme in our Shiki setup for the docs site.”
- “Which Pierre variant suits someone with deuteranopia? Install it in my editor.”
- “Add @pierre/theme with pnpm and load the vibrant light theme.”
Requirements
- A Node package manager such as pnpm to add `@pierre/theme`
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 Theme Package loads about 352 tokens when it runs, and up to ~1.8k if it reads all its reference files. Until then it costs about 47 tokens; SKILL.md has 100 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). 100 words, ~352 tokens.
Download SKILL.mdSave it as
.claude/skills/theme/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.- name
- theme
- description
- Use when an app needs a Pierre light or dark theme from @pierre/theme for Shiki, VS Code, Cursor, or Zed, including soft, vibrant, protanopia, deuteranopia, and tritanopia variants.
@pierre/theme
Use @pierre/theme for Pierre syntax and editor themes. The package supplies
ten immutable Shiki and VS Code theme objects.
For Zed-compatible themes used by @pierre/highlights, read the
highlights skill.
Install
pnpm add @pierre/themeSelect an API reference
| Need | Reference |
|---|---|
| List every package entry and export | API reference |
| Compare all themes and select a variant | Theme variants |
Select a recipe
| Task | Recipe |
|---|---|
| Load a Pierre theme in Shiki | Use a theme with Shiki |
| Install a Pierre theme in an editor | Use a theme in an editor |
Use the theming skill when the app must switch themes at runtime or follow a
color mode.
© 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/theme of pierrecomputer/pierre.
- SKILL.md
- references/api.md
- references/recipe-editor.md
- references/recipe-shiki.md
- references/variants.md
Open the folder on GitHubat commit d302ea0
Compare with similar skills
Pierre Theme Package 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 Theme Package this skillpierrecomputer/pierre | 6.2k | — | ~352 | Automated safety check: Pass | Apache-2.0 | |
| Create Docsvictorgarciaesgi/nuxt-typed-router | 413 | 2 repos | ~2.8k | Automated safety check: Pass | MIT | |
| Tailwind Plus Elementsrocky-data/rocky | 304 | — | ~1.7k | Automated safety check: Pass | Apache-2.0 | |
| Design System Generatemohitagw15856/pm-claude-skills | 1.4k | — | ~1.7k | Automated safety check: Pass | MIT | |
| Impeccablebestofjs/bestofjs | 3.1k | 27 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 |
Similar skills
Tailwind Plus Elements
rocky-data/rocky
Using TailwindPlus Elements (@tailwindplus/elements) in the Rocky VS Code webviews.
Design System Generate
mohitagw15856/pm-claude-skills
Generate a complete, accessibility-checked design system from scratch — colour ramps, type scale, spacing, elevation, and exports for CSS, Tailwind, design tokens, Figma, VS Code and PowerPoint.
Impeccable
bestofjs/bestofjs
A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…
Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
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 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.
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 Theme Package
What does Pierre Theme Package do?
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. This skill points the agent at the `@pierre/theme` package, which provides ten immutable theme objects for Shiki and VS Code. The main file works as a router with two lookup references: an API reference listing every package entry and export, and a variants guide for comparing the themes and choosing one.
When should I use Pierre Theme Package?
Pierre Theme Package fits situations like: adding a Pierre light or dark theme to a Shiki code highlighter; installing a Pierre theme in VS Code, Cursor or Zed; choosing between the soft, vibrant and color-vision variants.
How do I install Pierre Theme Package in Claude Code?
Run `npx skills add pierrecomputer/pierre --skill theme -a claude-code`. Or copy the skill folder (skills/theme in pierrecomputer/pierre) into .claude/skills/theme in your project. Claude Code loads it when a task matches its description.
How do I install Pierre Theme Package in Codex?
Run `npx skills add pierrecomputer/pierre --skill theme -a codex`. Or copy the skill folder (skills/theme in pierrecomputer/pierre) into .agents/skills/theme in your project. Codex loads it when a task matches its description.
Can I use Pierre Theme Package 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 theme -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/theme, .gemini/skills/theme, .github/skills/theme and .opencode/skills/theme in your project.
What does Pierre Theme Package need to run?
Going by SKILL.md and its folder, Pierre Theme Package needs the command-line tools its instructions call (pnpm). Our summary lists: A Node package manager such as pnpm to add `@pierre/theme`.
Does Pierre Theme Package 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 Theme Package 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 Theme Package use?
Pierre Theme Package 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 Theme Package use?
About 352 tokens (SKILL.md is roughly 1.4k 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 1.4k tokens, read only when the agent opens those files.
What are the alternatives to Pierre Theme Package?
Skills that share tags, products or a category with Pierre Theme Package: Create Docs (victorgarciaesgi/nuxt-typed-router, 413 stars), Tailwind Plus Elements (rocky-data/rocky, 304 stars), Design System Generate (mohitagw15856/pm-claude-skills, 1.4k stars) and Impeccable (bestofjs/bestofjs, 3.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Pierre Theme Package?
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.