以下为本文档的中文说明artifacts-builder 是一套用于创建复杂、多组件的 Claude.ai HTML 构件的工具套件基于现代前端 Web 技术栈——React、Tailwind CSS 和 shadcn/ui 组件库构建。它源于 ComposioHQ 的 awesome-claude-skills 项目将企业级的组件化开发能力引入到 AI 生成的 HTML 构件中大大突破了传统 AI 生成内容在交互复杂度上的限制使得生成的应用不再是简单的静态页面而是可以具备完整前端交互能力的应用界面。使用场景包括当用户需要生成包含复杂交互逻辑和多个页面视图的 Claude.ai 构件时当需要利用 React 的组件化和状态管理能力构建数据面板或仪表盘时当需要使用 shadcn/ui 提供的美观且符合设计规范的基础 UI 组件时当需要确保生成的 HTML 构件具有响应式设计和一致的可访问性时当需要快速原型化一个完整的前端应用界面时当需要将 AI 对话中的概念快速转化为可视化的交互原型时当需要生成包含表单、表格、对话框等复杂 UI 元素的应用时。核心特点包括一是基于 React 框架支持组件化开发、状态管理和虚拟 DOM 带来的高性能渲染适合构建交互复杂的单页应用二是集成了 Tailwind CSS 的实用优先样式体系实现了快速定制和一致的设计语言无需编写大量冗余的 CSS 样式代码三是内置 shadcn/ui 组件库提供了按钮、表单、对话框、表格等高质量 UI 元素保证了视觉一致性和可访问性标准四是专门的技能注册机制允许代理在规划阶段就能发现并使用该技能实现编排层级的自动发现五是生成的 HTML 文件可脱离 Claude.ai 独立运行便于分享和部署到任意静态托管平台。这个技能弥合了 AI 生成内容与专业前端开发之间的鸿沟。artifacts-builder\\Curated from ComposioHQ awesome-claude-skills.\What it does\Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).\Source\\Upstream: https://github.com/ComposioHQ/awesome-claude-skills/tree/master/artifacts-builder\Category:web-artifacts\How to use\This catalogue entry advertises the skill in Open Design so the agentdiscovers it during planning. To run the full upstream workflow withits original assets, scripts, and references, install the upstreambundle into your active agent’s skills directory:\# Inspect the upstream README for exact paths\ open https://github.com/ComposioHQ/awesome-claude-skills/tree/master/artifacts-builder\ \ \ Then ask the agent to invoke this skill by name (artifacts-builder) or with\ one of the trigger phrases listed in this skills frontmatter.\ ,frontMatter:{name:artifacts-builder,description:Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).\ ,triggers:[artifacts builder,html artifact,multi component artifact,react artifact],od:{mode:prototype,category:web-artifacts,upstream:https://github.com/ComposioHQ/awesome-claude-skills/tree/master/artifacts-builder}}}] 3f:[$,section,null,{aria-labelledby:related-skills-heading,className:mt-8 overflow-hidden rounded-lg border border-border bg-card,children:[[$,div,null,{className:flex items-center justify-between border-b border-border bg-muted/30 px-4 py-2.5,children:[[$,div,null,{className:flex min-w-0 items-center gap-2,children:[$,span,null,{className:truncate text-xs font-medium text-muted-foreground,children:同仓库更多 Skills}]}],[$,span,null,{className:shrink-0 text-xs text-muted-foreground,children:同仓库}]]}],[$,div,null,{className:p-4 sm:p-5,children:[[$,h2,null,{id:related-skills-heading,className:text-2xl font-semibold tracking-normal text-foreground,children:同仓库更多 Skills}],[$,div,null,{className:mt-4 grid gap-3 sm:grid-cols-2,children:[$L42,$L43,$L44,$L45,$L46,$L47]}]]}]]}] 48:I[206516,[/_next/static/chunks/051aanbhrv4br.js,/_next/static/chunks/0mizr60h7ayzt.js,/_next/static/chunks/0v9lm1dmbdoo-.js,/_next/static/chunks/0rxr1j1j3j-.r.js,/_next/static/chunks/02ftybezfvqjd.js,/_next/static/chunks/0.v9ksvnnj8ia.js,/_next/static/chunks/0bn6id9~6nx3k.js,/_next/static/chunks/13ybnhn37c.tc.js,/_next/static/chunks/0_fnrdtruz8uf.js,/_next/static/chunks/0r6l15utt1mwb.js,/_next/static/chunks/0dm9a5into854.js,/_next/static/chunks/0~7k6hqoibtcn.js,/_next/static/chunks/0b4cao.4y_..j.js,/_next/static/chunks/02i-n28z7kjd0.js],default]