メニュー
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.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/pierrecomputer/pierre --skill themingコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Use when an app uses @pierre/diffs to render or edit code files, diffs, patches, merge conflicts, or CodeView review surfaces, including React, vanilla JavaScript, SSR, workers, annotations, selection, and custom Shiki languages or themes.
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.
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 and drop, icons, git status, and themes.
SOC 職業分類に基づく
SKILL.md を表示中
| 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/themingUse @pierre/theming to manage runtime themes. The package separates theme
metadata, theme resolution, selected state, and UI color mapping.
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.
| 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 |
| 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.
| Host | Recipe |
|---|---|
| Vanilla JavaScript or another framework | Use vanilla JavaScript |
| React | Use React |