用途概括使用 React、Tailwind 和 shadcn/ui 构建复杂的多组件 claude.ai HTML 产物的工具套件。通过初始化脚本脚手架，用现代前端技术栈开发，并通过 bash 脚本打包为单 HTML 文件。产出可在对话中分享的自包含交互产物，避免通用 AI 设计风格。
业务领域
CodingDesign
技能形态
Workflow
业务领域
技能形态
技能解析
剖析技能的工作原理和产出物，快速判断你的场景与价值。
当用户需要复杂的 claude.ai HTML 产物，使用 React、状态管理、路由或 shadcn/ui 组件时（而非简单单文件 HTML/JSX）。
scripts/init-artifact.sh 脚手架生成 Vite + React + TS + Tailwind + shadcn/ui 项目scripts/bundle-artifact.sh 通过 Parcel 将所有内容内联为单个 bundle.html一个自包含、可交互的 HTML 产物，可直接在 Claude 中展示，具有专业 UI 且观众无需构建。
使用场景
产品经理希望将交互式仪表盘原型作为 Claude 产物分享给干系人。使用该技能，Agent 脚手架生成 React + shadcn/ui 项目，用状态管理构建图表与筛选，再打包为单 HTML。PM 获得精致自包含原型，可在对话中即时查看，加速反馈循环。
开发者需要带路由的多步骤向导 UI 作为 Claude 产物做演示。技能初始化含 Tailwind 与 40+ 组件的 Vite 项目，开发者编辑路由与表单，再脚本打包。成果为无外部依赖的单 HTML 演示文件，易于分发与展示。
技能关系
依赖关系读作「上一格指向下一格」。当前 Skill 位于第二格，上下分别是影响它与被它影响的 Skill。
第一层 · 这些 Skills 用了我
第二层 · 当前 Skill
第三层 · 我用了这些 Skills
在所属技能集的全局上下文中浏览当前 Skill 的关系。点击节点切换右侧详情,搜索框可快速定位技能。
技能文件