Agent Skills › pierrecomputer/pierre › theming

theming

GitHub

用于管理应用运行时主题，支持颜色模式切换、主题状态持久化及 UI 色彩映射。适用于 React 或原生 JS 环境下的主题集合创建、解析与控制器配置。

skills/theming/SKILL.md pierrecomputer/pierre

Trigger Scenarios

需要实现深色/浅色模式切换管理应用主题状态和颜色映射集成 @pierre/theming 库

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