Menu
指导在前端项目中按团队规范创建和维护 React 组件，涵盖通用组件与页面级组件的边界、目录结构、样式隔离、类型设计与导出策略。当前端需要新增、拆分或沉淀组件时使用本技能。
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
检查 .agents 下 rules、skills、README 与模板基线依赖的一致性，避免规则漂移、悬空引用和 React 能力越界。修改或新增 .agents 内容时使用本技能。
指导在前端项目中按团队规范创建和维护接口请求层，涵盖统一请求客户端、业务 API 文件、类型组织、错误处理、mock 过渡与 React 使用边界。当前端需要新增或重构接口时使用本技能。
指导在前端项目中按团队规范创建和维护路由（React Router Data Router），涵盖路由单源、页面目录、路由模块注册、懒加载、标题与守卫等约束。当前端需要新增或重构页面路由时使用本技能。
指导在前端项目中按团队规范使用 Zustand 创建和维护全局状态 store，包括目录结构、命名与持久化策略。当前端需要新增或重构状态管理时使用本技能。
指导在前端项目中正确使用 Ant Design 与自定义主题 CSS 变量，避免硬编码颜色并保证暗色/浅色主题切换一致性。当前端编写或修改样式时使用本技能。
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 | create-component |
| description | 指导在前端项目中按团队规范创建和维护 React 组件，涵盖通用组件与页面级组件的边界、目录结构、样式隔离、类型设计与导出策略。当前端需要新增、拆分或沉淀组件时使用本技能。 |
src/components/ 与 src/views/<page>/components/ 双层边界classnames，可选使用，但不是默认前提当你需要：
请使用本技能，并同时遵守：
.agents/rules/03-项目结构.md.agents/rules/04-组件规范.md.agents/rules/09-样式规范.mdclassnamesvercel-composition-patternssrc/components/<ComponentName>/src/views/<page-name>/components/<ComponentName>/src/components/标准结构：
src/components/ComponentName/
├── index.tsx
└── index.module.scss
或：
src/views/<page-name>/components/ComponentName/
├── index.tsx
└── index.module.scss
创建前先判断：
判断结论：
示例：
import styles from './index.module.scss';
interface UserCardProps {
title: string;
className?: string;
}
export default function UserCard({ title, className }: UserCardProps) {
return <div className={[styles.card, className].filter(Boolean).join(' ')}>{title}</div>;
}
对应样式：
.card {
display: flex;
}
index.tsx 作为入口src/components/index.ts 公共出口，可按需补充导出index.module.scsssrc/styles/.adm-*.tsx 文件过大时优先拆分isXxx / showXxx / withXxx 开关时，应视为 API 膨胀预警适用条件：
操作：
src/components/<ComponentName>/适用条件：
操作：
src/views/<page-name>/components/<ComponentName>/index.tsx + index.module.scssclassnames 等辅助库，回退到原生 class 拼接方案create-route：页面开发时，页面级组件通常与新路由一起创建create-proposal：提案中若涉及组件开发，可引用本技能theme-variables：涉及主题样式时配合使用