SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场assembling-components

assembling-components

前端与建站

查看项目

更新于 10-16 08:26

技能介绍

用途

Assembling Components 用于将 AI Design Components 各技能的输出转化为可投入生产的应用。它提供针对该令牌系统、组件模式和技能链工作流的库级上下文——这是通用组装模式无法提供的知识。该技能会验证令牌集成、生成正确的脚手架，并将组件正确连接在一起。

何时使用

在以下情况激活此技能：

  • 完成技能链工作流（主题 → 布局 → 仪表盘 → 数据可视化 → 反馈）
  • 为 React/Vite、Next.js、FastAPI、Flask 或 Rust/Axum 生成新项目脚手架
  • 验证所有生成的 CSS 使用设计令牌（而非硬编码值）
  • 创建桶导出并正确连接组件导入
  • 将来自多个技能的组件组装为统一应用
  • 调试集成问题（缺少入口点、导入损坏、主题无法切换）
  • 为生产部署准备生成的代码

技能链上下文

该技能理解每个 AI Design Components 技能的输出：theming-components 产出 tokens.css、theme-provider.tsx；designing-layouts 产出 Layout.tsx、Header.tsx、Sidebar.tsx；creating-dashboards 产出 Dashboard.tsx、KPICard.tsx；visualizing-data 产出图表组件与图例；building-forms 产出表单输入与校验；building-tables 产出表格与分页；providing-feedback 产出 Toast、Spinner、EmptyState。这些输出最终由本技能组装为可工作的组件系统。

令牌验证

运行验证脚本（无需加载到上下文）：

# 基本验证
python scripts/validate_tokens.py src/styles

# 严格模式并给出修复建议
python scripts/validate_tokens.py src --strict --fix-suggestions

# 用于 CI/CD 的 JSON 输出
python scripts/validate_tokens.py src --json

令牌命名约定涵盖颜色（语义命名，如 --color-primary、--color-success、--color-warning、--color-error、--color-info、--color-bg-primary、--color-bg-secondary、--color-text-primary、--color-text-secondary）、间距（4px 基准单位，--spacing-xs 至 --spacing-xl）、排版（--font-size-xs 至 --font-size-lg）、组件尺寸（--icon-size-sm/md、--radius-sm/md、--shadow-sm）。

验证规则：必须使用令牌（错误）包括颜色、间距（≥4px）、字号；应使用令牌（警告）包括边框圆角、阴影、z-index（≥100）。

框架选择

React/TypeScript：选择 Vite + React 适用于构建单页应用、轻量快速的开发构建、对配置的最大控制、无需服务端渲染；选择 Next.js 14/15 适用于需要服务端渲染或静态生成、使用 API 路由构建全栈、SEO 重要、使用 React Server Components。

Python：选择 FastAPI 适用于构建现代异步 API、需要自动 OpenAPI 文档、要求高性能、使用 Pydantic 校验；选择 Flask 适用于更简单灵活的设置、熟悉 Flask 生态、模板渲染（Jinja2）、较小应用。

Rust：选择 Axum 适用于现代 tower 架构、类型安全提取器、异步优先设计、生态增长中；选择 Actix Web 适用于要求最大性能、Actor 模型适合用例、生态更成熟。

实施方法

  1. 验证令牌集成：组装前检查所有 CSS 使用令牌，修复违规后再继续。
  2. 生成项目脚手架：为 React/Vite 创建入口点（main.tsx 中先导入 tokens.css 再导入 globals.css，并用 ThemeProvider 包裹 App）与 index.html。
  3. 连接组件：设置 ThemeProvider（支持 light/dark/system，通过 data-theme 属性切换并写入 localStorage）、创建桶导出（如 src/components/ui/index.ts、src/components/features/dashboard/index.ts）。
  4. 配置构建系统：vite.config.ts 中配置 @ 别名指向 ./src；tsconfig.json 中设置 target、lib、module、moduleResolution、jsx、strict、baseUrl 与 paths。

跨技能集成

使用 Theming Components：先导入 tokens.css，组件继承令牌值；在根使用 ThemeProvider。使用 Dashboard Components：从 creating-dashboards 技能导入 Dashboard、KPICard 并接入数据。使用 Data Visualization：从 visualizing-data 技能导入 DonutChart，图表自动使用 --chart-color-* 令牌。使用 Feedback Components：从 providing-feedback 技能导入 Toast、Spinner、EmptyState，用 ToastProvider 包裹应用，加载状态使用 Spinner。

集成检查清单

交付前验证：令牌文件存在（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 scripts/validate_tokens.py demo/examples --fix-suggestions。

参考文档：references/library-context.md、references/react-vite-template.md、references/nextjs-template.md、references/python-fastapi-template.md、references/rust-axum-template.md、references/token-validation-rules.md。

示例：examples/react-dashboard/、examples/nextjs-dashboard/、examples/fastapi-dashboard/、examples/rust-axum-dashboard/。

资产模板：assets/templates/react/、assets/templates/python/、assets/templates/rust/。

应用组装工作流

  1. 验证组件：对所有生成的 CSS 运行 validate_tokens.py。
  2. 选择框架：根据需求选择 React/Vite、Next.js、FastAPI 或 Rust。
  3. 生成脚手架：创建项目结构与配置。
  4. 连接导入：设置入口点、导入链、桶导出。
  5. 添加 Provider：在根添加 ThemeProvider、ToastProvider。
  6. 连接组件：导入并组合功能组件。
  7. 配置构建：vite.config、tsconfig、package.json。
  8. 最终验证：构建、类型检查、lint。
  9. 文档：编写包含设置与使用说明的 README。

限制

资料未提供该技能的收费、价格、平台支持范围、性能指标或效果保证等信息。