Agent Skills › pierrecomputer/pierre › theming

theming

GitHub

用于管理应用运行时主题，支持列出、解析、切换、持久化和应用主题，涵盖颜色模式、控制器及 React 状态集成。

skills/theming/SKILL.md pierrecomputer/pierre

Trigger Scenarios

需要配置或切换应用的主题和颜色模式实现主题状态的持久化与同步在 React 中集成主题控制器

Install

npx skills add pierrecomputer/pierre --skill theming -g -y

More Options

Use without installing

npx skills use pierrecomputer/pierre@theming

指定 Agent (Claude Code)

npx skills add pierrecomputer/pierre --skill theming -a claude-code -g -y

安装 repo 全部 skill

npx skills add pierrecomputer/pierre --all -g -y

预览 repo 内 skill

npx skills add pierrecomputer/pierre --list

SKILL.md

Frontmatter

{
    "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/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