Menú
指导在前端项目中正确使用 Ant Design 与自定义主题 CSS 变量，避免硬编码颜色并保证暗色/浅色主题切换一致性。当前端编写或修改样式时使用本技能。
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
检查 .agents 下 rules、skills、README 与模板基线依赖的一致性，避免规则漂移、悬空引用和 React 能力越界。修改或新增 .agents 内容时使用本技能。
指导在前端项目中按团队规范创建和维护接口请求层，涵盖统一请求客户端、业务 API 文件、类型组织、错误处理、mock 过渡与 React 使用边界。当前端需要新增或重构接口时使用本技能。
指导在前端项目中按团队规范创建和维护 React 组件，涵盖通用组件与页面级组件的边界、目录结构、样式隔离、类型设计与导出策略。当前端需要新增、拆分或沉淀组件时使用本技能。
指导在前端项目中按团队规范创建和维护路由（React Router Data Router），涵盖路由单源、页面目录、路由模块注册、懒加载、标题与守卫等约束。当前端需要新增或重构页面路由时使用本技能。
指导在前端项目中按团队规范使用 Zustand 创建和维护全局状态 store，包括目录结构、命名与持久化策略。当前端需要新增或重构状态管理时使用本技能。
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
| name | theme-variables |
| description | 指导在前端项目中正确使用 Ant Design 与自定义主题 CSS 变量，避免硬编码颜色并保证暗色/浅色主题切换一致性。当前端编写或修改样式时使用本技能。 |
index.module.scss，全局主题能力位于 src/styles/当你在：
请使用本技能，并同时遵守：
.agents/rules/09-样式规范.md（本模板样式规范与暗黑/主题落地口径）.agents/rules/04-组件规范.md（组件边界与样式隔离要求，避免污染）--adm-* 或项目主题变量可以表达，不要先发明新变量antd-mobile 为准，主题与暗黑模式优先走其 CSS 变量体系（--adm-*）。html 上切换 light/dark 类完成；业务组件/页面禁止自行实现 prefers-color-scheme 或重复写 setProperty 注入主题色。#fff/#000/#1677ff 等）。.adm-*）。本模板常用的是 antd-mobile CSS 变量（--adm-*）。在 SCSS 中可直接使用：
color: var(--adm-color-text);
background-color: var(--adm-color-background);
border-color: var(--adm-color-border);
常见变量举例：
var(--adm-color-primary)（由项目统一同步注入）var(--adm-color-text)var(--adm-color-background)var(--adm-color-border)当你需要“跟随 light/dark 语义变化”的颜色（不仅仅是 --adm-*），应优先使用项目的 SCSS 主题能力：
src/styles/ 下的统一主题文件可提供 @include use-theme { ... } 与 get-var('xxx').some-root {
@include use-theme {
color: get-var('main-text-color');
background-color: get-var('main-card-bg-color');
}
}
当 --adm-* 与项目主题变量无法表达你的业务语义时，可以定义“自有语义变量”，但必须满足：
示例（仅示意命名风格）：
var(--app-card-bg)var(--app-radius-lg)var(--app-font-cn)在组件样式中的使用：
.card {
background-color: var(--app-card-bg);
border-radius: var(--app-radius-lg);
font-family: var(--app-font-cn);
}
如果你只是想做暗黑/浅色差异，不建议为每处都加自定义变量；优先：
dark:(...) / dark:text-* 等变体@include use-theme { ... } + get-var('...')从高到低推荐：
--adm-* 组件库变量get-var('...')）// ❌ 硬编码颜色，不随主题变化
.button {
background-color: #1677ff;
color: #ffffff;
}
var(--xxx) 变量？--adm-*（组件库变量）或项目主题 get-var('...')，最后才考虑自定义语义变量？dark:(...) 变体处理暗黑差异，而不是手写媒体查询？