菜单
指导在前端项目中正确使用 Ant Design 与自定义主题 CSS 变量，避免硬编码颜色并保证暗色/浅色主题切换一致性。当前端编写或修改样式时使用本技能。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | theme-variables |
| description | 指导在前端项目中正确使用 Ant Design 与自定义主题 CSS 变量，避免硬编码颜色并保证暗色/浅色主题切换一致性。当前端编写或修改样式时使用本技能。 |
当你在：
请使用本技能，并同时遵守 .agents/rules/04-组件规范.md 与 .agents/rules/08-样式规范.md。
在 SCSS 中直接使用：
color: var(--ant-color-text);
background-color: var(--ant-color-bg-container);
border-color: var(--ant-color-border);
常见变量举例：
var(--ant-color-primary)var(--ant-color-text)var(--ant-color-bg-container)var(--ant-color-border)项目中可以定义自有变量，例如：
var(--shentu-card-bg)var(--shentu-border-radius)var(--shentu-cn-family)在组件样式中的使用：
.card {
background-color: var(--shentu-card-bg);
border-radius: var(--shentu-border-radius);
font-family: var(--shentu-cn-family);
}
// ❌ 硬编码颜色，不随主题变化
.button {
background-color: #1677ff;
color: #ffffff;
}
var(--xxx) 变量？提供 Vue 项目中页面 CSS 的命名规范。在编写页面样式或重构 CSS 时使用此技能。
提供 Vue 3 + Vite + TypeScript 项目的目录结构规范和代码组织建议。在创建新页面、组件、API 模块或重构项目结构时使用此技能。
定义 Vue 项目中 TypeScript 类型（Interface/Type）的命名规范。在定义公共类型或业务模型时调用此技能。
引导并执行 Vue 代码模块化拆分；在收到新需求或单文件代码臃肿、复用逻辑出现时调用，拆分为业务组件/公共组件、TypeScript 类型文件、hooks。
规范并校验 Vue 项目目录结构；在创建/移动/重命名文件夹或文件、生成脚手架、新增组件/页面时调用。
指导创建符合规范的API接口，包括TypeScript类型定义、接口文件组织、请求响应拦截处理。当需要创建新的API接口时使用本技能。