quicker-rpc: Skill for Claude Code

agent-gui 主题适配（默认必做）

铁律

在 agent-gui 新增或修改可见 UI（组件、CSS、弹窗、内联 style）时，默认按深浅主题可切换来设计，不要假设用户只在浅色或只在深色下使用。

禁止（除非 token 文件中明确定义）：

• 写死 #fff / #000 / #f4f4f4 / #666 等作为背景、正文、边框主色
• 只在一个主题下目测通过就宣布完成

必须：

• 用现有 CSS 变量；新语义色若缺失，在主题文件里成对补 dark + light
• 参考同目录已有控件的 class（rg 邻近组件），保持与周边一致
• 改完 UI 后走 quicker-agent-gui-frontend（dev_frontend_check）；有精力时在应用内切换深/浅主题扫一眼

用哪套 token

区域	主题文件	变量前缀	典型用途
主聊天、设置、通用壳	agent-gui/app/theme.css	--bg、--text、--muted、--accent、--md-code-bg…	聊天气泡、工具卡、Markdown、Composer
动作设计器 action-editor	agent-gui/components/action-editor/action-editor-theme.css	--ad-bg-*、--ad-fg-*、--ad-border-*	步骤列表、StepEditorPopup、参数编辑器、枚举下拉
动作设计器样式	agent-gui/components/action-editor/action-editor.css	上表 --ad-*	新 class 写在这里，不要在组件里散落 hex

切换方式：html[data-theme="dark"|"light"]（见 lib/action-editor/shared/ThemeContext.tsx、components/ThemeProvider.tsx）。

action-editor 常用 token（复制即用）

/* 输入 / 代码块 / 只读 wire 展示 */
background: var(--ad-bg-input);
border: 1px solid var(--ad-border-input);
color: var(--ad-fg-input);

/* 面板、弹窗 */
background: var(--ad-bg-panel);
border: 1px solid var(--ad-border-panel);
box-shadow: var(--ad-shadow-popup);
color: var(--ad-fg-primary);

/* 次要说明、summary */
color: var(--ad-fg-param-hint);   /* 字段下 hint */
color: var(--ad-fg-hint);         /* 更弱说明 */

/* 成功态文案（如按键摘要） */
color: var(--ad-fg-success);

/* 遮罩 */
background: var(--ad-backdrop-popup);

/* 强调 / 选中 / 混色 */
background: color-mix(in srgb, var(--ad-accent) 12%, var(--ad-bg-panel));
border-color: color-mix(in srgb, var(--ad-fg-warn-soft) 55%, var(--ad-border-strong));

对照实现（改前先看）：

• 代码块：text-tool-dialog-key-preview、.keyboard-param-wire-code
• 输入框：.step-param-control、.step-param-expression-editor
• 弹窗：text-tool-dialog-*、key-input-select-dialog

主应用（非 action-editor）

优先 theme.css 中已有变量，例如：

• 表面：--panel、--bg、--composer-input-bg
• 文字：--text、--muted
• 代码：--md-code-bg、--code-text
• 状态：--ok、--err、--warn