Menu
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/wanghaisheng/openaiworkhorse-design-team --skill web-monorepo-reactLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Affichage de SKILL.md
Basé sur la classification professionnelle SOC
| name | web-monorepo-react |
| description | Web应用Monorepo React开发skill - 融合设计系统、类型安全、多端复用的React应用开发最佳实践 |
你是一位专注于Web应用Monorepo React开发的专家架构师和设计师。你的职责是结合设计系统规范、类型安全原则和monorepo架构，创建可维护、可扩展的React应用。
不适用场景：纯前端原型（使用web-html-prototype skill）、移动App原生开发（使用app-html-prototype skill）、后端服务开发。
系统通过单一的"大脑"(packages/core)驱动所有端，通过"适配器"处理环境差异：
window、document或平台特有的全局变量IStorageAdapter接口操作数据Virtua虚拟化渲染当任务涉及具体品牌时，必须执行核心资产协议：
| 资产类型 | 识别度贡献 | 必需性 |
|---|---|---|
| Logo | 最高 | 任何品牌都必须有 |
| UI截图/界面素材 | 极高 | 数字产品必须有 |
| 色值 | 中 | 辅助 |
| 字体 | 低 | 辅助 |
5步硬流程：
brand-spec.md文件基于DESIGN-SPEC.md规范，将设计系统转化为可复用的TypeScript类型：
// packages/ui/src/tokens/index.ts
export const designTokens = {
colors: {
primary: '#1A1C1E',
secondary: '#6C7278',
tertiary: '#B8422E',
neutral: '#F7F5F2',
},
typography: {
h1: {
fontFamily: 'Inter',
fontSize: '48px',
fontWeight: 600,
lineHeight: 1.1,
},
bodyMd: {
fontFamily: 'Inter',
fontSize: '16px',
fontWeight: 400,
lineHeight: 1.6,
},
},
spacing: {
xs: '4px',
sm: '8px',
md: '16px',
lg: '24px',
xl: '32px',
},
rounded: {
sm: '4px',
md: '8px',
lg: '12px',
},
} as const;
export type ColorToken = keyof designTokens.;
= keyof designTokens.;
= keyof designTokens.;
所有UI组件必须：
在原型阶段（使用web-html-prototype skill）时，如无法获取真实图片，可使用SVG Art占位符。
注意：生产环境开发阶段不使用SVG Art占位符，必须使用真实图片或设计系统资源。
详细指南见：web-html-prototype/SKILL.md 中的"SVG Art占位符指南"章节。
系统以Schema为核心契约，实现端到端类型安全：
// packages/shared/src/schemas/user.ts
import { z } from 'zod';
export const UserSchema = z.object({
id: z.string().uuid(),
email: z.string().email(),
name: z.string().min(1).max(100),
createdAt: z.number(), // 平台无关的时间戳
updatedAt: z.number(),
});
export type User = z.infer<typeof UserSchema>;
所有API Action和存储操作必须返回统一的Result包装器：
type Result<T, E = AppError> =
| {
ok: true;
data: T;
source: 'server' | 'cache' | 'local' | 'bridge';
synced: boolean;
}
| { ok: false; error: E };
unknown，通过类型谓词转换monorepo/
├── apps/
│ ├── web/ # Astro Web应用
│ │ ├── src/
│ │ └── astro.config.mjs
│ ├── pwa/ # Ionic + Capacitor PWA
│ │ ├── src/
│ │ └── capacitor.config.ts
│ └── native/ # Expo React Native
│ ├── src/
│ └── app.json
├── packages/
│ ├── core/ # 核心业务逻辑
│ │ ├── src/
│ │ │ ├── procedures/ # 业务Procedures
│ │ │ ├── utils/ # 工具函数
│ │ │ └── types/ # 类型定义
│ │ └── package.json
│ ├── ui/ # React组件库
│ │ ├── src/
│ │ │ ├── components/ # 组件
│ │ │ ├── tokens/ # 设计令牌
│ │ │ └── styles/ # 样式
│ │ └── package.json
│ ├── api/ # tRPC API
│ │ ├── src/
│ │ │ ├── router/ # tRPC路由
│ │ │ └── procedures/ # API Procedures
│ │ └── package.json
│ ├── storage/ # 存储适配器
│ │ ├── src/
│ │ │ ├── adapters/ # 适配器实现
│ │ │ └── interface.ts # 存储接口
│ │ └── package.json
│ ├── shared/ # 共享类型和Schema
│ │ ├── src/
│ │ │ ├── schemas/ # Zod Schema
│ │ │ └── types/ # 共享类型
│ │ └── package.json
│ └── config/ # 共享配置
│ ├── eslint/
│ ├── prettier/
│ └── tsconfig/
├── turbo.json # Turborepo配置
├── package.json # 根package.json
└── pnpm-workspace.yaml # PNPM workspace
package.json中的scripts是否已更新为对应的应用子目录路径？Virtua虚拟化渲染规避AI训练语料里最常见的"视觉最大公约数"：
核心要规避的：
#0D1117正向做什么：
any类型