Web 工件生成器

要解决什么问题

在 Claude 对话里展示「工件」（artifact），往往需要一个可独立打开的 HTML 文件，而不是让用户本地起 dev server 或拆多文件。本技能针对的是：用现代前端栈快速搭界面，再打成单文件交给对话上下文展示。

技能如何工作

流程可以概括为五步：

1. 用 scripts/init-artifact.sh 初始化前端仓库（React 18 + TypeScript + Vite，Tailwind 与 shadcn/ui 主题、路径别名 @/、预装大量 shadcn 组件及 Radix 依赖，并为后续捆绑写好 Parcel 相关配置）。
2. 在生成项目里按需求改代码（组件与页面逻辑）。
3. 用 scripts/bundle-artifact.sh 将应用捆绑为 bundle.html：依赖 Parcel 构建（无 source map），再用 html-inline 把 JS/CSS 等资源内联进单个 HTML。前提：项目根目录必须有 index.html。
4. 把捆绑结果作为工件展示给用户。
5. （可选）用 Playwright 等做可视化或回归测试；文档建议默认不要先测，以免拉长从完成到展示的路径，除非用户明确要求或事后排错。

技术栈要点：Vite 负责开发，Parcel + html-inline 负责产出单文件；UI 侧强调 shadcn/ui，并附带「反 AI 味」风格提醒——少滥用居中、紫色渐变、统一大圆角和 Inter。

适用边界与注意点

• 面向 Claude.ai 工件形态的单文件交付，不是通用 CI/CD 或多环境部署模板。
• 捆绑脚本会安装/使用 Parcel 生态（含路径别名解析）；若你 heavily 自定义构建链，需自行核对与 .parcelrc 是否一致。
• 组件文档以 shadcn/ui 为准；本技能不替代你对业务交互与安全（内联脚本、外部请求）的审查。