# 组装组件 ## 目的该技能将 AI 设计组件技能的输出转换为可投入生产的应用程序。它为我们的令牌系统、组件模式和技能链工作流程提供了特定于库的上下文 - 通用组装模式无法提供的知识。该技能验证令牌集成，生成适当的脚手架，并将组件正确连接在一起。 ## 何时使用在以下情况下激活该技能： * 完成技能链工作流程（主题→布局→仪表板→数据可视化→反馈） * 为 React/Vite、Next.js、FastAPI、Flask 或 Rust/Axum 生成新的项目脚手架 * 验证所有生成的 CSS 是否使用设计标记（而不是硬编码值） * 正确创建桶出口和接线组件进口 * 将多种技能的组件组装成一个统一的应用程序 * 调试集成问题（缺少入口点、导入损坏、主题未切换） * 为生产部署准备生成的代码 ## 技能链背景该技能了解每个 AI 设计组件技能的输出： ┌──────────────────┐ ┐──────────────────┐ ┌──────────────────┐ │ 主题- │────▶│ 设计- │────▶│ 创作- │ │ 组件 │ │ 布局 │ │ 仪表板 │ └──────────────────┘ └──────────────────┘ └──────────────────┘ │ │ │ ▼ ▼ ▼ tokens.css Layout.tsx Dashboard.tsx 主题提供者.tsx 标头.tsx KPICard.tsx │ │ │ └────────────────────────┴────────────────────────┘ │ ▼ ┌──────────────────────┐ │ 可视化数据 │ │ 提供反馈 │ └──────────────────────┘ │ ▼ 甜甜圈图.tsx Toast.tsx、Spinner.tsx │ ▼ ┌──────────────────────┐ │ 组装- │ │ 组件 │ │ (此技能) │ └──────────────────────┘ │ ▼ 工作组件系统 ### 技能预期输出技能|主要输出|令牌依赖性 ---|---|--- `主题组件` | tokens.css、主题提供程序.tsx |基金会 `设计布局` |布局.tsx、标题.tsx、侧边栏.tsx | \--间距-_，--颜色边框-_ `创建仪表板` |仪表板.tsx、KPICard.tsx |所有布局+图表标记 `可视化数据` |图表组件、图例 | \--图表颜色-_，--字体大小-_ `建筑形式` |表单输入、验证 | \--spacing-_、--radius-_、--颜色错误 `建筑表` |表格，分页| \--颜色-_，--间距-_ `提供反馈` | Toast、Spinner、EmptyState | \--颜色-成功/错误/警告 ## 令牌验证 ### 运行验证脚本（无令牌执行） # 基本验证 python 脚本/validate_tokens.py src/styles # 带有修复建议的严格模式 python 脚本/validate_tokens.py src --strict --fix-suggestions # CI/CD 的 JSON 输出 python 脚本/validate_tokens.py src --json ### 我们的代币命名约定 /* 颜色 - 语义命名 */ --颜色主色：#FA582D； /* 品牌主 */ --颜色成功：#00CC66； /* 正状态 */ --颜色警告：#FFCB06； /* 警告状态 */ --颜色错误：#C84727； /* 错误状态 */ --颜色信息：#00C0E8； /* 信息性 */ --颜色背景主色：#FFFFFF； /* 主背景 */ --颜色-背景-次要：#F8FAFC； /* 高架表面 */ --颜色文本主色：#1E293B； /* 正文 */ --颜色文本次要：#64748B； /* 静音文本 */ /* 间距 - 4px 基本单位 */ --间距-xs: 0.25rem; /* 4 像素 */ --spacing-sm: 0.5rem; /* 8 像素 */ --间距-md: 1rem; /* 16 像素 */ --间距-lg: 1.5rem; /* 24 像素 */ --spacing-xl: 2rem; /* 32 像素 */ /* 版式 */ --字体大小-xs: 0.75rem; /* 12 像素 */ --字体大小-sm：0.875rem； /* 14 像素 */ --字体大小基础：1rem； /* 16 像素 */ --字体大小-lg: 1.125rem; /* 18 像素 */ /* 组件大小 */ --图标大小-sm: 1rem; /* 16 像素 */ --icon-size-md: 1.5rem; /* 24 像素 */ --半径-sm：4px； --radius-md: 8px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); ### 验证规则必须使用令牌（错误）|修复示例 ---|--- 颜色 | `#FA582D` → `var(--color-primary)` 间距（≥4px）| `16px` → `var(--spacing-md)` 字体大小 | `14px` → `var(--font-size-sm)` 应该使用令牌（警告）|修复示例 ---|--- 边界半径| `8px` → `var(--radius-md)` 阴影| `0 4px...` → `var(--shadow-md)` Z 指数 (≥100) | `1000` → `var(--z-dropdown)` ## 框架选择 ### React/TypeScript **在以下情况下选择 Vite + React：** * 构建单页应用程序 * 轻量级、快速的开发构建 * 对配置的最大控制 * 无需服务器端渲染 **在以下情况下选择 Next.js 14/15：** * 需要服务端渲染或者静态生成 * 使用 API 路由构建全栈 * 搜索引擎优化很重要 * 使用React服务器组件 ###Python **在以下情况下选择 FastAPI：** * 构建现代异步 API * 需要自动 OpenAPI 文档 * 需要高性能 * 使用Pydantic进行验证 **在以下情况下选择 Flask：** * 更简单、更灵活的设置 * 熟悉Flask生态系统 * 模板渲染（Jinja2） * 较小的应用程序 ### 铁锈 **在以下情况下选择阿克苏姆：** * 现代塔式建筑 * 类型安全提取器 * 异步优先设计 * 不断发展的生态系统 **在以下情况下选择 Actix Web：** * 所需的最大性能 * Actor 模型有利于您的用例 * 更成熟的生态系统 ## 实现方式 ### 1\.验证令牌集成在组装之前，检查所有 CSS 使用标记： python 脚本/validate_tokens.py <组件目录> 在继续之前修复任何违规行为。 ### 2\.生成项目脚手架 **反应/投票：** // src/main.tsx - 入口点从 'react' 导入 { StrictMode } 从 'react-dom/client' 导入 { createRoot } 从 '@/context/theme-provider' 导入 { ThemeProvider } 从“./App”导入应用程序 import './styles/tokens.css' // 首先 - 标记定义 import './styles/globals.css' // 第二 - 全局重置 createRoot(document.getElementById('root')!).render( <严格模式> <主题提供者> <应用程序/> ，） **索引.html：** <头> <元字符集=“UTF-8”/> <标题>{{PROJECT_TITLE}} <正文>

<脚本类型=“模块”src=“/src/main.tsx”> ### 3\.将组件连接在一起 **主题提供商：** // src/context/theme-provider.tsx 从 'react' 导入 { createContext, useContext, useEffect, useState } 类型主题 = '轻' | '黑暗' | ‘系统’ const ThemeContext = createContext<{ 主题：主题 setTheme: (主题: 主题) => void } |未定义>（未定义）导出函数 ThemeProvider({ 孩子 }: { 孩子: React.ReactNode }) { const [主题，setTheme] = useState<主题>('系统') 使用效果（（）=> { const root = document.documentElement const systemTheme = window.matchMedia('(首选颜色方案：深色)').matches ？ “暗”：“亮” root.setAttribute('data-theme', theme === 'system' ? systemTheme : 主题) localStorage.setItem('主题', 主题) }，[主题]）返回（ {孩子} ） } 导出 const useTheme = () => { 常量上下文 = useContext(ThemeContext) if (!context) throw new Error('useTheme 必须在 ThemeProvider 中使用') 返回上下文 } **桶出口：** // src/components/ui/index.ts 从 './button' 导出 { Button } 从 './card' 导出 { Card } // src/components/features/dashboard/index.ts 从 './kpi-card' 导出 { KPICard } 从 './donut-chart' 导出 { DonutChart } 从 './dashboard' 导出 { Dashboard } ### 4\.配置构建系统 **vite.config.ts:** 从“vite”导入{defineConfig} 从“@vitejs/plugin-react”导入反应从“路径”导入路径导出默认的defineConfig({ 插件：[react()]，解决：{ 别名：{ '@': path.resolve(__dirname, './src'), }, }, }) **tsconfig.json：** { “编译器选项”：{ “目标”：“ES2020”， "lib": ["ES2020", "DOM", "DOM.Iterable"], “模块”：“ESNext”， "moduleResolution": "捆绑器", "jsx": "react-jsx", “严格”：真实， "baseUrl": ".", “路径”：{“@/*”：[“./src/*”]} }, “包括”：[“src”] } ## 跨技能整合 ### 使用主题组件 // 先导入token，组件继承token值导入'./styles/tokens.css' // 在根目录下使用 ThemeProvider <主题提供者> <应用程序/> ### 使用仪表板组件 // 来自create-dashboards技能的组件从 '@/components/features/dashboard' 导入 { Dashboard, KPICard } // 连接数据 <仪表板> <大韩民国卡标签=“总威胁” 值={1234} 严重性=“严重” 趋势={{值：15.3，方向：'向上'}} /> ### 使用数据可视化 // 来自可视化数据技能的图表从 '@/components/charts' 导入 { DonutChart } // 图表自动使用 --chart-color-* 标记 <甜甜圈图数据={威胁数据} title="威胁的严重程度" /> ### 使用反馈组件 // 来自提供反馈技能从 '@/components/feedback' 导入 { Toast, Spinner, EmptyState } // 连线 toast 通知 <应用程序/> // 使用微调器来加载状态 {正在加载？ <旋转器/>：<仪表板/>} ## 集成清单交货前，请确认： * **令牌文件存在** (`tokens.css`) 包含所有 7 个类别 * **令牌导入顺序**正确（tokens.css → globals.css → 组件） * **没有硬编码值**（运行“validate_tokens.py”） * **主题切换有效**（`data-theme` 属性切换） * **支持减少运动** (`@media (prefers-reduced-motion)`) * **构建完成**，没有错误 * **类型传递**（TypeScript 编译） * **导入解析**（没有丢失模块） * **每个组件目录都存在桶导出** ## 捆绑资源 ### 脚本（无令牌执行） * `scripts/validate_tokens.py` \- 验证 CSS 使用设计令牌 * `scripts/generate_scaffold.py` \- 生成项目样板 * `scripts/check_imports.py` \- 验证导入链 * `scripts/generate_exports.py` \- 创建桶导出文件直接运行脚本而不加载到上下文中： python 脚本/validate_tokens.py 演示/示例 --fix-suggestions ### 参考资料（详细模式） * `references/library-context.md` \- AI 设计组件库感知 * `references/react-vite-template.md` \- 完整的 Vite + React 设置 * `references/nextjs-template.md` \- Next.js 14/15 模式 * `references/python-fastapi-template.md` \- FastAPI 项目结构 * `references/rust-axum-template.md` \- Rust/Axum 项目结构 * `references/token-validation-rules.md` \- 完整的验证规则 ### 示例（完整实现） * `examples/react-dashboard/` \- 完整的 Vite + React 仪表板 * `examples/nextjs-dashboard/` \- Next.js App Router 仪表板 * `examples/fastapi-dashboard/` \- Python FastAPI 仪表板 * `examples/rust-axum-dashboard/` \- Rust Axum 仪表板 ### 资产（模板） * `assets/templates/react/` \- React 项目模板 * `assets/templates/python/` \- Python 项目模板 * `assets/templates/rust/` \- Rust 项目模板 ## 应用程序组装工作流程 1. **验证组件** ：在所有生成的 CSS 上运行 `validate_tokens.py` 2. **根据需求选择框架**：React/Vite、Next.js、FastAPI 或 Rust 3. **生成脚手架**：创建项目结构和配置 4. **线材进口**：设置入口点、进口链、桶出口 5. **添加提供程序**：根目录下的 ThemeProvider、ToastProvider 6. **连接组件**：导入并组合功能组件 7. **配置构建**：vite.config、tsconfig、package.json 8. **最终验证**：构建、类型检查、lint 9. **文档**：包含设置和使用说明的自述文件有关特定于库的模式和完整上下文，请参阅“references/library-context.md”。

组装组件

包含技能