Menu
指导在前端项目中正确使用 Ant Design 与自定义主题 CSS 变量，避免硬编码颜色并保证暗色/浅色主题切换一致性。当前端编写或修改样式时使用本技能。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
提供 Vue 项目中页面 CSS 的命名规范。在编写页面样式或重构 CSS 时使用此技能。
提供 Vue 3 + Vite + TypeScript 项目的目录结构规范和代码组织建议。在创建新页面、组件、API 模块或重构项目结构时使用此技能。
定义 Vue 项目中 TypeScript 类型（Interface/Type）的命名规范。在定义公共类型或业务模型时调用此技能。
引导并执行 Vue 代码模块化拆分；在收到新需求或单文件代码臃肿、复用逻辑出现时调用，拆分为业务组件/公共组件、TypeScript 类型文件、hooks。
规范并校验 Vue 项目目录结构；在创建/移动/重命名文件夹或文件、生成脚手架、新增组件/页面时调用。
指导创建符合规范的API接口，包括TypeScript类型定义、接口文件组织、请求响应拦截处理。当需要创建新的API接口时使用本技能。
| 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) 变量？