Golemui
golemui/golemui
Build, validate, and debug GolemUI forms in React, Angular, Vue, Lit, or vanilla JS.
Explains how to use the @pierre/theming package to list, resolve, select, switch and persist themes, with controller, color and React references.
Install Pierre Theming Library
$ npx skills add pierrecomputer/pierre --skill theming -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install pierrecomputer/pierre theming --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/theming .claude/skills/theming && 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 "theming" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/theming into .claude/skills/theming/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "theming", 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/themingType 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 theming -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install pierrecomputer/pierre theming --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/theming .agents/skills/theming && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "theming" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/theming into .agents/skills/theming/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "theming", 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 theming -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install pierrecomputer/pierre theming --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/theming .cursor/skills/theming && 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 "theming" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/theming into .cursor/skills/theming/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "theming", 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/theming--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 theming -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install pierrecomputer/pierre theming --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/theming .gemini/skills/theming && 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 "theming" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/theming into .gemini/skills/theming/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "theming", 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 themingInstalls 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 theming -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/theming .github/skills/theming && 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 "theming" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/theming into .github/skills/theming/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "theming", 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 theming -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 theming --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/theming .opencode/skills/theming && 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 "theming" agent skill from https://github.com/pierrecomputer/pierre/tree/main/skills/theming into .opencode/skills/theming/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "theming", 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
theming- GitHub stars
- 6.2k
- Token cost
- ~661 tokens
- SKILL.md length
- 163 words
- Files
- 10 (incl. references)
- Skills in repo
- 10
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Explains how to use the @pierre/theming package to list, resolve, select, switch and persist themes, with controller, color and React references.
- Adding theme switching with light and dark color modes to an app
- SKILL.md covers Install, Select an API reference, Select a controller recipe and Select a framework recipe
- Calls pnpm
- Persisting the user's selected theme
What it does
The `@pierre/theming` package manages runtime themes and splits the work into theme metadata, theme resolution, selected state and UI color mapping. The skill covers installing it with pnpm and adding optional peer dependencies only for the entry you use: `react` for the React entry, and `@pierre/theme`, `@shikijs/themes` and `shiki` for the themes entry.
Short tables point to the right reference for each need: collections for catalogs and bundled theme sets, the resolver for registering, loading and caching theme objects, the controller for tracking color mode and the selected light and dark themes, the colors API for normalizing workbench colors, and the React API for reading controller state. Recipes show one controller as the default, multiple controllers only when areas need different theme state, and separate setups for vanilla JavaScript and React.
When your agent uses it
- Adding theme switching with light and dark color modes to an app
- Persisting the user's selected theme
- Reading theme state in React components
- Registering and loading bundled Pierre or Shiki theme collections
Example prompts
- “Set up @pierre/theming in my React app with one controller shared across the page.”
- “Give the preview pane its own theme selection separate from the editor using multiple controllers.”
- “Install the packages needed for the Shiki theme collection.”
Requirements
- `@pierre/theming`, installed with pnpm
- `react` 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 Theming Library loads about 661 tokens when it runs, and up to ~5k if it reads all its reference files. Until then it costs about 53 tokens; SKILL.md has 163 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). 163 words, ~661 tokens.
Download SKILL.mdSave it as
.claude/skills/theming/SKILL.md (or your agent's skills folder). This skill also uses 9 other files; get the full folder from GitHub.- name
- theming
- description
- Use when an app uses @pierre/theming to list, resolve, select, switch, persist, or apply themes, including color modes, theme controllers, React state, UI colors, and bundled Pierre or Shiki collections.
@pierre/theming
Use @pierre/theming to manage runtime themes. The package separates theme
metadata, theme resolution, selected state, and UI color mapping.
Install
pnpm add @pierre/themingInstall optional peer dependencies only for the selected entry. The React entry
needs react. The themes entry needs @pierre/theme, @shikijs/themes, and
shiki.
Select an API reference
| Need | Reference |
|---|---|
| Create a collection, catalog, descriptor, or bundled theme set | Collections API |
| Register, load, seed, or cache theme objects | Resolver API |
| Track the color mode and selected light and dark themes | Controller API |
| Normalize workbench colors or derive colors | Colors API |
| Read controller state in React | React API |
Select a controller recipe
| Situation | Recipe |
|---|---|
| One app or page shares one color mode and one light/dark selection | Use one controller |
| Independent areas need separate selections or separate controller lifecycles | Use multiple controllers |
Use one controller by default. Use multiple controllers only when the theme state must differ between areas.
Select a framework recipe
| Host | Recipe |
|---|---|
| Vanilla JavaScript or another framework | Use vanilla JavaScript |
| React | Use React |
© 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 9 other files (references) in skills/theming of pierrecomputer/pierre.
- SKILL.md
- references/collections.md
- references/colors.md
- references/controller.md
- references/react.md
- references/recipe-multiple-controllers.md
- references/recipe-one-controller.md
- references/recipe-react.md
- references/recipe-vanilla.md
- references/resolver.md
Open the folder on GitHubat commit d302ea0
Compare with similar skills
Pierre Theming Library 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 Theming Library this skillpierrecomputer/pierre | 6.2k | — | ~661 | Automated safety check: Pass | Apache-2.0 | |
| Golemuigolemui/golemui | 113 | — | ~2.2k | Automated safety check: Pass | MIT | |
| Pixi Vn UIDRincs-Productions/pixi-vn | 149 | — | ~3.8k | Automated safety check: Pass | LGPL-2.1 | |
| Tailwindcss Developmentanonaddy/anonaddy | 4.9k | 10 repos | ~865 | Automated safety check: Pass | MIT | |
| GSAP Core Animationgreensock/gsap-skills | 16k | 4 repos | ~3.7k | Automated safety check: Pass | MIT | |
| Chakra UI v3 Builderchakra-ui/chakra-ui | 41k | — | ~3.1k | Automated safety check: Pass | MIT |
Similar skills
Pixi Vn UI
DRincs-Productions/pixi-vn
A skill your agent uses when building game UI (menus, HUD, dialogue box, settings/save screens) on top of Pixi'VN with an external JS framework (React, Vue) or with plain PixiJS components —…
Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
GSAP Core Animation
greensock/gsap-skills
Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.
Chakra UI v3 Builder
chakra-ui/chakra-ui
Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.
UI UX Pro Max
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
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 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 Theming Library
What does Pierre Theming Library do?
Explains how to use the @pierre/theming package to list, resolve, select, switch and persist themes, with controller, color and React references. The `@pierre/theming` package manages runtime themes and splits the work into theme metadata, theme resolution, selected state and UI color mapping. The skill covers installing it with pnpm and adding optional peer dependencies only for the entry you use: `react` for the React entry, and `@pierre/theme`, `@shikijs/themes` and `shiki` for the themes entry.
When should I use Pierre Theming Library?
Pierre Theming Library fits situations like: adding theme switching with light and dark color modes to an app; persisting the user's selected theme; reading theme state in React components; registering and loading bundled Pierre or Shiki theme collections.
How do I install Pierre Theming Library in Claude Code?
Run `npx skills add pierrecomputer/pierre --skill theming -a claude-code`. Or copy the skill folder (skills/theming in pierrecomputer/pierre) into .claude/skills/theming in your project. Claude Code loads it when a task matches its description.
How do I install Pierre Theming Library in Codex?
Run `npx skills add pierrecomputer/pierre --skill theming -a codex`. Or copy the skill folder (skills/theming in pierrecomputer/pierre) into .agents/skills/theming in your project. Codex loads it when a task matches its description.
Can I use Pierre Theming Library 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 theming -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/theming, .gemini/skills/theming, .github/skills/theming and .opencode/skills/theming in your project.
What does Pierre Theming Library need to run?
Going by SKILL.md and its folder, Pierre Theming Library needs the command-line tools its instructions call (pnpm). Our summary lists: `@pierre/theming`, installed with pnpm; `react` for the React entry.
Does Pierre Theming Library 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 Theming Library 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 Theming Library use?
Pierre Theming Library 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 Theming Library use?
About 661 tokens (SKILL.md is roughly 2.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 4.4k tokens, read only when the agent opens those files.
What are the alternatives to Pierre Theming Library?
Skills that share tags, products or a category with Pierre Theming Library: Golemui (golemui/golemui, 113 stars), Pixi Vn UI (DRincs-Productions/pixi-vn, 149 stars), Tailwindcss Development (anonaddy/anonaddy, 4.9k stars) and GSAP Core Animation (greensock/gsap-skills, 16k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Pierre Theming Library?
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.