目的

让非程序员能够通过自然语言需求生成生产级别的前端组件。

此元技能协调三个上游技能，并生成可直接使用的输出，通常为一个 .tsx 文件加上简洁的设置说明。

它不替代上游技能逻辑，也不假设隐藏依赖已预先安装。

已安装技能要求

• frontend-design-ultimate（最新检查版本：1.0.0）
• shadcn-ui（最新检查版本：1.0.0）
• react-expert（最新检查版本：0.1.0）

安装/更新命令：

npx -y clawhub@latest install frontend-design-ultimate
npx -y clawhub@latest install shadcn-ui
npx -y clawhub@latest install react-expert
npx -y clawhub@latest update --all

验证命令：

npx -y clawhub@latest list

OpenClaw 兼容性说明

本技能遵循 OpenClaw 技能加载规则：

• SKILL.md 文件包含 YAML 前置元数据和 Markdown 正文
• 前置元数据键为单行格式
• metadata 以单行 JSON 对象形式编码
• 不包含不受支持的自定义顶层元数据键

若后续编辑此文件，请保持上述约束不变。

运行时前置条件

最低本地环境要求：

• Node.js 18+
• npm
• 已配置 Tailwind 的 React + TypeScript 项目

相邻生态依赖（来自上游技能内容检查）：

• tailwindcss（布局与样式基线）
• lucide-react（多个 shadcn 示例中使用的图标）
• next-themes（shadcn 指导中的主题切换模式）
• react-hook-form, zod, @hookform/resolvers（表单模式）
• 可选：framer-motion（来自 frontend-design-ultimate 的动效模式）
• 可选：如需真实图表功能，使用 recharts 或等效库

若用户希望使用 shadcn 组件但未安装，请在输出中包含明确的设置命令：

npx shadcn@latest init
npx shadcn@latest add card button badge tabs table sheet sidebar

除非用户明确说明使用 Next.js，否则默认不假设使用 Next.js。

默认输出为框架无关的 React .tsx 文件，可在 Vite 或 Next.js 中通过少量调整运行。

语言模型必须首先收集的输入

• ui_goal（例如：仪表盘、首页、管理面板等）
• theme_mode（dark、light 或 system）
• primary_metrics（例如：收入、MRR、增长等关键指标）
• chart_expectation（折线图、柱状图、面积图；静态或交互式）
• layout_density（compact、balanced、spacious）
• brand_constraints（颜色、Logo、字体等品牌限制）
• target_framework（vite-react、nextjs 或 generic-react）
• single_file_strict（true / false）

若任一关键输入缺失，应明确设定默认值，并在 Assumptions 中说明。

工具职责

frontend-design-ultimate

用于视觉方向判断和避免通用化设计决策：

• 确定鲜明的设计风格
• 定义排版层级与色彩系统
• 强调移动端优先的响应式设计
• 避免“AI模板”式的平庸布局

根据上游技能指导：

• 坚持一种明确的基调
• 包含令人难忘的视觉元素
• 优先使用 CSS 变量和高对比度
• 避免使用通用默认字体

shadcn-ui

用于构建稳健的 UI 原语与组合模式：

• 卡片、标签页、弹窗、导航、表格、徽章、对话框等
• 主题规范与暗色模式兼容性
• 可预测的组件结构，便于快速交付

根据上游技能指导：

• 组件将被复制到项目中（而非使用托管的运行时 UI SDK）
• 对引用的组件，需包含安装命令
• 优先使用可组合的原语进行布局与数据展示

react-expert

用于行为正确性与可维护性：

• 状态设计与数据流
• 严格的 TypeScript 优先组件模式
• 可访问性与可预测的渲染行为
• 非复杂 UI 可选性能优化

根据上游技能指导：

• 避免状态突变和不稳定 key
• 在 effects 中使用语义化结构并清理资源
• 为 props 和数据提供清晰的类型定义

标准因果链

请严格按照以下顺序执行调度。

1. 需求解析

- 将用户请求规范化为目标、约束与输出契约。

1. 设计方向（frontend-design-ultimate）

- 选定明确的美学模式。

- 定义配色方案、字体比例、间距系统与页面布局。

- 决定暗色模式的 token 策略。

1. 组件架构（shadcn-ui）

- 将 UI 块映射为组件原语（侧边栏、卡片、标签页、表格、徽章等）。

- 声明所引用原语所需的 shadcn 安装命令。

1. React 逻辑连接（react-expert）

- 实现类型化的数据模型与渲染循环。

- 在必要处添加本地状态或 hooks。

- 保持逻辑简单且确定，确保可直接复制粘贴使用。

1. 输出整合

- 默认生成一个 .tsx 文件。

- 包含简短的 Setup 部分，列出所需安装命令。

- 包含 Assumptions 与 Adaptation Notes。

输出契约

默认输出必须包含：

• Setup：

- 缺失依赖项的精确 npm/npx 安装命令

- 生成代码中使用的 shadcn 组件添加命令

• 单个 TSX 文件：

- 一个自包含的 React 组件（TypeScript 编写）

- 导入列表置于文件顶部

- 除非用户提供真实数据源，否则内联包含模拟数据

• Assumptions：

- 因输入缺失而明确选择的默认值

• Adaptation Notes：

- 如何接入真实 API 数据

- 若某组件不可用，应移除哪些导入

不生成辅助脚本。除非用户明确要求，否则不进行多文件结构搭建。

图表处理规则

若目标项目未保证包含图表库：

• 默认采用语义化的“可图表化”卡片布局并保留占位符，或
• 在同一 .tsx 文件中使用轻量级内联 SVG 实现图表逻辑

不得虚构不存在的图表组件。

若使用外部图表库（如 Recharts），需包含安装命令，并明确标注为可选。

场景映射：收入仪表盘（暗色模式）

场景示例：

“我需要一个显示收入指标的暗色模式仪表盘”

name: Frontend Builder

version: 1.0.0

description: 生成可直接用于生产环境的前端组件，基于设计规范与 UI 原语构建响应式仪表盘界面。

summary: 根据设计规范生成高质量、可运行的 React + TypeScript 组件，支持深色主题与移动端适配。

执行流程

1. frontend-design-ultimate 定义深色配色方案、强调型排版风格以及仪表盘布局结构（侧边栏 + 指标网格 + 图表区域）。
2. shadcn-ui 将布局映射为 Card、Badge、Tabs 等基础组件，可选使用 Sidebar 原语。
3. react-expert 创建类型安全的指标数据数组，并实现 KPI 卡片与趋势视图的渲染循环。
4. 最终输出包含一个可直接投入生产的 .tsx 组件文件，以及必要的初始化命令。

质量检查项

在最终输出前，请确保满足以下条件：

• 组件能正确编译为 TSX（生成代码中无缺失符号）
• 设计具有明确意图，非默认模板式的通用样式
• 深色模式下的颜色变量保持一致且可读性良好
• 包含移动端行为支持（采用 sm/md/lg 的响应式策略）
• 所有引用的 UI 组件均已在设置命令中列出
• 未将虚构的 API 调用伪装成真实集成

若任一检查项不通过，返回 Needs Revision 并附上具体缺失项列表。

安全约束

• 严禁声称“开箱即用”而未列出依赖假设。
• 严禁输出未在设置中声明的库组件。
• 严禁隐藏未决决策；所有假设需列于 Assumptions 部分。
• 优先提供一个高质量组件，而非广泛但浅层的骨架代码。

失败处理机制

• 若上游技能缺失：立即停止并报告确切缺失的技能名称。
• 若项目上下文缺失：输出通用 React 版本代码，并标记需要适配的位置。
• 若图表依赖缺失：提供降级渲染路径，并附上可选安装命令。
• 若存在冲突约束（如“单文件”与“完整应用路由”同时要求）：优先遵循单文件契约，并在文档中说明取舍。