How do I install the Theming skill?

Run npx skillmds@latest add pierrecomputer/theming in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Theming safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Theming?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Theming free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Theming?

pierrecomputer (@pierrecomputer) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Theming by pierrecomputer — Agent Skill

Name: Theming
Author: pierrecomputer

Theming

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.

pierrecomputer 230562d 10 files · 19.7 KB Updated Sep 17, 2026

File contents

`@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/theming

Install 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

---name: themingdescription: 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 thememetadata, theme resolution, selected state, and UI color mapping.## Install```bashpnpm add @pierre/theming```Install optional peer dependencies only for the selected entry. The React entryneeds `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](references/collections.md) || Register, load, seed, or cache theme objects | [Resolver API](references/resolver.md) || Track the color mode and selected light and dark themes | [Controller API](references/controller.md) || Normalize workbench colors or derive colors | [Colors API](references/colors.md) || Read controller state in React | [React API](references/react.md) |## Select a controller recipe| Situation | Recipe || ---------------------------------------------------------------------------- | --------------------------------------------------------------------- || One app or page shares one color mode and one light/dark selection | [Use one controller](references/recipe-one-controller.md) || Independent areas need separate selections or separate controller lifecycles | [Use multiple controllers](references/recipe-multiple-controllers.md) |Use one controller by default. Use multiple controllers only when the themestate must differ between areas.## Select a framework recipe| Host | Recipe || --------------------------------------- | ------------------------------------------------------ || Vanilla JavaScript or another framework | [Use vanilla JavaScript](references/recipe-vanilla.md) || React | [Use React](references/recipe-react.md) |

Frequently asked questions