メニュー
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/wanghaisheng/openaiworkhorse-design-team --skill web-monorepo-reactコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| 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类型