القائمة
使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂多组件 claude.ai HTML artifacts 的工具套件。用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifacts - 不适用于简单的单文件 HTML/JSX artifacts。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
启动本地 VitePress 服务器，在 http://localhost:5173 预览文档站点
创建高质量 MCP（模型上下文协议）服务器的指南，使 LLM 能够通过精心设计的工具与外部服务交互。在构建 MCP 服务器以集成外部 API 或服务时使用，无论是 Python（FastMCP）还是 Node/TypeScript（MCP SDK）。
分析会议转录和录音，揭示行为模式、沟通洞察和可行的反馈。识别何时回避冲突、使用填充词、主导对话或错失倾听机会。非常适合寻求改善沟通和领导技能的专业人士。
为 Slack 创建优化动画 GIF 的工具包，包含大小约束验证器和可组合动画原语。当用户请求为 Slack 创建动画 GIF 或表情动画时使用此技能，例如"为 Slack 制作一个 X 做 Y 的 GIF"。
分析职位描述并生成定制简历，突出相关经验、技能和成就，最大化面试机会
使用 Twitter 开源算法洞察分析和优化推文以获得最大传播范围。根据推荐系统对内容的排名方式重写和编辑用户推文，以提高参与度和可见性。
| name | artifacts-builder |
| description | 使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂多组件 claude.ai HTML artifacts 的工具套件。用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifacts - 不适用于简单的单文件 HTML/JSX artifacts。 |
| license | 完整条款见 LICENSE.txt |
要构建强大的前端 claude.ai artifacts，请按以下步骤操作：
scripts/init-artifact.sh 初始化前端仓库scripts/bundle-artifact.sh 将所有代码打包成单个 HTML 文件技术栈：React 18 + TypeScript + Vite + Parcel（打包）+ Tailwind CSS + shadcn/ui
非常重要：为避免所谓的 "AI slop"，避免使用过多的居中布局、紫色渐变、统一的圆角和 Inter 字体。
运行初始化脚本创建新的 React 项目：
bash scripts/init-artifact.sh <project-name>
cd <project-name>
这将创建一个完全配置好的项目，包含：
@/）已配置要构建 artifact，编辑生成的文件。参见下方常见开发任务获取指导。
要将 React 应用打包成单个 HTML artifact：
bash scripts/bundle-artifact.sh
这将创建 bundle.html - 一个包含所有 JavaScript、CSS 和依赖项的独立 artifact。此文件可直接在 Claude 对话中作为 artifact 分享。
要求：你的项目根目录必须有 index.html。
脚本执行内容：
.parcelrc 配置最后，在对话中与用户分享打包后的 HTML 文件，以便他们将其作为 artifact 查看。
注意：这是完全可选的步骤。仅在必要时或被请求时执行。
要测试/可视化 artifact，使用可用工具（包括其他 Skills 或内置工具如 Playwright 或 Puppeteer）。通常，避免预先测试 artifact，因为这会增加从请求到展示完成 artifact 之间的延迟。如果被请求或出现问题，在展示 artifact 后再进行测试。