by 运行时依赖
安装命令
点击复制技能文档
目的 启用非程序员从自然语言要求中获取生产级前端组件。 此元技能协调三个上游技能并产生实现就绪输出，通常为一个 .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 正文 单行前置内容键 元数据编码为单行 JSON 对象 不支持自定义顶级前置内容键 如果此文件稍后被编辑，请保持这些约束完整。
运行时先决条件 最小本地栈： Node.js 18+ npm React + TypeScript 项目，配置了 Tailwind
相邻生态系统依赖项（来自检查的上游技能内容）： 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 中使用最小的适配。
LM 必须收集的输入 ui_goal（仪表盘、登录页面、管理面板等） theme_mode（暗、亮或系统） primary_metrics（例如收入、MRR、增长） chart_expectation（线、条、面积；静态或交互式） layout_density（紧凑、平衡、宽松） brand_constraints（颜色、标志、排版约束） target_framework（vite-react、nextjs 或 generic-react） single_file_strict（true/false）
如果任何关键输入缺失，请显式设置默认值并在假设中说明。
工具职责 frontend-design-ultimate 用于视觉方向和反通用设计决策： 选择强烈的美学方向 定义排版层次和颜色系统 强制执行移动优先响应 避免样板“AI-slop”布局
从检查的上游指导中： 提交一个清晰的语气 包含一个难忘的视觉元素 更喜欢 CSS 变量和强烈的对比 避免通用默认字体
shadcn-ui 用于强大的 UI 原语和组合模式： 卡片、选项卡、表单、导航、表格、徽章、对话框 主题约定和暗黑模式兼容性 可预测的组件结构，用于快速交付
从检查的上游指导中： 组件被复制到项目中（不是托管运行时 UI SDK） 包含任何引用的组件的安装命令 更喜欢可组合的原语用于布局和数据显示
react-expert 用于行为正确性和可维护性： 状态设计和数据流 严格的 TypeScript 首先组件模式 可访问性和可预测的渲染行为 可选的性能加固，用于非平凡的 UI
从检查的上游指导中： 避免状态突变和不稳定的键 使用语义结构和清理效果 运送清晰的类型化接口，用于道具/数据
规范因果链 使用此确切的编排顺序。
要求 解析 将用户请求规范化为目标、约束和输出合同。
设计方向（frontend-design-ultimate） 选择一个明确的美学模式。 定义调色板、类型刻度、间距和页面组成。 决定暗黑模式令牌策略。
组件架构（shadcn-ui） 将 UI 块映射到组件原语（侧边栏、卡片、选项卡、表格、徽章）。 声明所需的 shadcn 安装用于引用的原语。
React 粘合逻辑（react-expert） 实现类型化数据模型和渲染循环。 添加本地状态/钩子，若需要。 保持逻辑简单和确定性，用于复制粘贴的可用性。
输出组装 默认情况下产生一个 .tsx 文件。 包含简短的设置部分，用于所需的安装命令。 包含假设和适配说明。
输出合同 默认输出必须包含： 设置：确切的 npm/npx 命令，用于缺失的依赖项 shadcn 组件添加命令，用于生成代码 单个 TSX 文件：一个自包含的 React 组件，使用 TypeScript 列出的导入在顶部 内联模拟数据，除非用户提供真实数据源 假设：由于缺失输入而选择的显式默认值 适配说明：在哪里插入真实 API 数据 哪些导入需要删除