web-artifacts-builder

web-artifacts-builder 技能为在 Claude 界面中创建复杂的网页实体提供了一个强大的开发环境。此技能专为需要超越简单单文件 HTML 的开发者与进阶用户而设计，整合了包含 React 18、TypeScript 与 Vite 的全栈前端工作流程。它特别适合需要处理高级状态管理、复杂路由以及追求 shadcn/ui 组件库一致性视觉风格的项目。

• 通过自定义脚本简化项目初始化流程，自动配置 React、TypeScript 与 Tailwind CSS。

• 预安装超过 40 种 shadcn/ui 组件，大幅加速用户界面设计开发。

• 利用 Parcel 进行高效资源打包，将模块化的 React 应用程序转换为单一、内含所有依赖的 HTML 文件，方便分享。

• 内置路径别名 (@/) 配置，确保代码导入结构清晰且易于维护。

• 强制执行设计指南，避免常见的 AI 产出界面样式，确保交付内容具有专业质量。

• 本技能适用于复杂的多组件网页界面；若仅需制作简单的静态内容，建议使用原生的实体创建功能会更有效率。

• 请确保开发环境满足 Node 18+ 版本要求，以维持与打包脚本的兼容性。

• 工作流程遵循明确的生命周期：初始化项目、模块化开发、执行打包脚本，最后呈现生成的 HTML 实体。

• 请始终将 bundle.html 作为最终交付物，以确保在对话窗口中的可移植性。

• 遵循设计指南，避免使用过度的居中排版或单一渐变，重点在于强调现代化且简洁的 UI 设计模式，而非单纯套用 AI 生成的视觉模板。