用途：该技能面向需要创建较复杂、多组件的 claude.ai HTML artifact 的场景，提供从初始化项目到打包成单个 HTML 文件的完整流程。
主要能力与流程：先运行 bash scripts/init-artifact.sh <project-name> 初始化前端仓库，再编辑生成的代码开发 artifact，然后用 bash scripts/bundle-artifact.sh 将所有代码打包成单个 HTML 文件，最后在对话中展示给用户。可选步骤是测试 artifact，工具说明中建议避免提前测试以减少延迟，仅在需要或出现问题时再测。
技术栈：React 18 + TypeScript + Vite + Parcel（打包）+ Tailwind CSS + shadcn/ui。初始化脚本会生成已配置好的项目，包含通过 Vite 的 React + TypeScript、Tailwind CSS 3.4.1 与 shadcn/ui 主题系统、路径别名（@/）、40+ 个预装 shadcn/ui 组件、Radix UI 依赖、Parcel 打包配置（.parcelrc），并兼容 Node 18+（自动检测并指定 Vite 版本）。打包脚本会安装打包依赖（parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline），创建支持路径别名的 .parcelrc 配置，使用 Parcel 构建（不生成 source map），再用 html-inline 将所有资源内联到一个 HTML 文件，生成自包含的 bundle.html，可直接作为 artifact 在 Claude 对话中分享。
设计要求：明确提示避免过度居中布局、紫色渐变、统一圆角和 Inter 字体，以减少所谓“AI slop”感。
适用场景：需要交付单个自包含 HTML artifact、且希望使用现代前端组件体系进行复杂交互或多组件界面开发的场合。限制说明：打包要求项目根目录存在 index.html；测试为可选步骤；资料未提供更具体的限制、收费或平台信息。