# CC GUI Plugin Creator

Creates or changes CC GUI desktop plugins as CSS, JSON or single ESM files.

- Repository: https://github.com/zhukunpenglinyutong/desktop-cc-gui (4554 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add zhukunpenglinyutong/desktop-cc-gui --skill ccgui-plugin-creator -g -a claude-code -y`
Codex: `npx skills add zhukunpenglinyutong/desktop-cc-gui --skill ccgui-plugin-creator -g -a codex -y`
Cursor: `npx skills add zhukunpenglinyutong/desktop-cc-gui --skill ccgui-plugin-creator -g -a cursor -y`
Gemini CLI: `npx skills add zhukunpenglinyutong/desktop-cc-gui --skill ccgui-plugin-creator -g -a gemini-cli -y`

## Description

为 CC GUI 桌面客户端创建、修改、迭代插件（Tier-0 声明式 CSS/JSON，或 Tier-1 单文件 ESM）。当用户要"做一个插件 / 给 CC GUI 加个功能 / 改输入框或界面样式 / 加设置页、侧边栏或状态栏入口 / 加面板页签或命令面板命令 / 把某套工作流包装成插件 / 改一下我做过的那个插件"，或提到 ccgui 插件、插件目录、从本地目录安装插件时使用。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# CC GUI 插件创建

产出是**一个可被 CC GUI 直接安装的目录**（不是仓库、不是 PR）：用户在 CC GUI 侧边栏「插件」→「从本地目录安装」选这个目录即可生效。

## 1. 先决定 Tier（决定要不要写 JS）

| 用户要的效果 | Tier | 目录内容 | 需要构建 |
|---|---|---|---|
| 换配色/主题 token、改界面样式、加静态状态栏文字、加命令面板命令（只发事件） | `declarative` | `manifest.json` + `styles.css`（可无样式） | 否 |
| 加设置页、面板页签、侧边栏入口、命令面板命令（要逻辑）、Markdown 渲染、读写存储、调网络/命令、起 agent 轮次 | `js` | `manifest.json` + `main.js` | 否（单文件 ESM） |

**两层都能做到时优先 declarative**：不用写 JS、出错面小、用户看得懂。只有需要运行时逻辑（读写、事件、新 UI 组件、网络）才选 `js`。

## 2. 目录与文件名（宿主按名字找）

```
<插件目录>/                 # 默认放 ~/ccgui-plugins/<id>/；用户指定了路径就听用户的
├── manifest.json          # 必须在该目录根；宿主按 manifest.id 安置，目录名随意但 id 全局唯一
├── main.js                # 仅 Tier-1：单文件 ESM，export default function activate(ctx)
└── styles.css             # 可选；Tier-1 也可用 ctx.theme.injectCss 注入样式
```

- 安装会**复制**整棵目录（跳过 `node_modules` 与 `.git`，单文件上限 16MB）到 `~/.ccgui-next/plugins/<id>/`；目录名随意，宿主按 manifest 的 `id` 安置。
- 因此 `main.js` 必须自包含：**不能** `import` 任何模块（`react`、`@ccgui/plugin-sdk`、相对路径都不行），也不需要打包器；`main.js` 里用 `ctx.react.createElement` 建组件（不要 JSX）。

## 3. 写 manifest.json（硬性校验，违反装不上）

```jsonc
{
  "id": "my-panel",                    // ^[a-z0-9][a-z0-9-]{1,63}$，全局唯一，上架后不可改
  "name": "我的面板",                   // 显示名
  "version": "1.0.0",                  // ^\d+\.\d+\.\d+$（本地迭代可保持在 0.1.0）
  "tier": "js",                        // "declarative" | "js"（必填）
  "description": "在右侧面板显示……",   // 一句话，用户能看懂
  "permissions": ["ui:panel-tab"]      // 只声明真正用到的；调用未声明的能力会抛错
}
```

可选字段：`author`、`minAppVersion`（宿主最低版本）、`sdkVersion`（SDK 区间，如 `"^0.3"`）、`contributes`（声明式贡献点）、`configSchema`（自动生成设置表单）。
**字段与权限的完整清单以 `references/sdk-api.md` 为准**（该文件由 SDK 源码生成，不要凭记忆写字段名/权限名）。

## 4. 两个最小可用样例

### Tier-0：主题 + 状态栏文字（零 JS）

The rest: https://github.com/zhukunpenglinyutong/desktop-cc-gui/blob/HEAD/src-tauri/resources/skills/ccgui-plugin-creator/SKILL.md