web-artifacts-builder
业务领域
技能形态
Agent Skill 规格描述
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
使用场景
两种典型用法
构建交互式数据仪表盘
数据分析师或产品经理需要创建一个包含图表、筛选器和实时数据更新的交互式仪表盘。用户通过Agent使用该技能初始化React项目，利用shadcn/ui组件快速搭建界面，集成状态管理处理数据流，最终打包为单个HTML文件，方便在Claude对话中展示和分享。
开发多页面原型工具
前端设计师或开发者需要快速构建一个包含路由、表单和动态内容的多页面原型。用户通过Agent调用该技能，使用React Router实现页面导航，结合Tailwind CSS进行样式定制，避免常见的AI设计模式，最终生成自包含的HTML文件，用于客户演示或内部评审。
技能关系
我用了哪些 Skills · 哪些 skills 用了我
依赖关系读作“上一格指向下一格”。当前 Skill 位于第二格，上下分别是影响它与被它影响的 Skill。
第一层 · 这些 Skills 用了我
- 无显式依赖
第二层 · 当前 Skill
- web-artifacts-builderWorkflow · Cli Manual
第三层 · 我用了这些 Skills
- 无其他 Skill 显式依赖此项
技能文件
SKILL.md
目录结构
技能结构
- ▸skills/web-artifacts-builder/
- ▸root
- ·LICENSE.txt
- ·SKILL.md
- ▸scripts
- ·bundle-artifact.sh
- ·init-artifact.sh
- ·shadcn-components.tar.gz
按 Agent Skills 规范，必需项仅 SKILL.md；其余目录均为可选的脚本 / 引用 / 资源扩展。
同集相关