菜单
一套用于使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂的多组件 claude.ai HTML 工件的工具集。适用于需要状态管理、路由或 shadcn/ui 组件的复杂工件，不适用于简单的单文件 HTML/JSX 工件。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Prorise-cool/prorise-claude-skills --skill artifacts-builder命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Autonomous pipeline manager that orchestrates the entire development workflow. You are the leader of this process.
Specialist in self-healing data pipelines — uses air-gapped local SLMs and semantic clustering to automatically detect, classify, and fix data anomalies at scale. Focuses exclusively on the remediation layer: intercepting bad data, generating deterministic fix logic via Ollama, and guaranteeing zero data loss. Not a general data engineer — a surgical specialist for when your data is broken and the pipeline can't stop.
Expert AI/ML engineer specializing in machine learning model development, deployment, and integration into production systems. Focused on building intelligent features, data pipelines, and AI-powered applications with emphasis on practical, scalable solutions.
基于 SOC 职业分类
正在显示 SKILL.md
| name | artifacts-builder |
| description | 一套用于使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂的多组件 claude.ai HTML 工件的工具集。适用于需要状态管理、路由或 shadcn/ui 组件的复杂工件，不适用于简单的单文件 HTML/JSX 工件。 |
| license | Complete terms in LICENSE.txt |
基准路径:
.claude/skills/frontend-specialist/references/domains/artifact-engineering/
artifact-engineering/
├── scripts/
│ ├── bundle-artifact.sh
│ ├── init-artifact.sh
│ └── shadcn-components.tar.gz
└── SKILL.md
要构建强大的前端 claude.ai 工件，请按照以下步骤操作：
scripts/init-artifact.sh 初始化前端仓库scripts/bundle-artifact.sh 将所有代码打包成单个 HTML 文件技术栈: React 18 + TypeScript + Vite + Parcel (打包) + Tailwind CSS + shadcn/ui
非常重要：为避免通常被称为 "AI slop" 的情况，请避免使用过多的居中布局、紫色渐变、统一的圆角和 Inter 字体。
在调用初始化脚本之前，必须先询问用户项目的主题配色规范。
询问用户以下信息：
如果用户提供了主题配色信息，在调用脚本时通过环境变量传递：
THEME_COLOR=blue bash scripts/init-artifact.sh <project-name>
支持的主题色：slate（默认灰色）、blue、green、violet
如果用户没有提供主题配色，使用默认的 slate 灰色主题。
运行初始化脚本以创建新的 React 项目：
bash scripts/init-artifact.sh <project-name>
# 或指定主题色
THEME_COLOR=blue bash scripts/init-artifact.sh <project-name>
cd <project-name>
这将创建一个完全配置的项目，包含：
@/) 已配置要构建工件，请编辑生成的文件。请参阅下面的常见开发任务以获取指导。
要将 React 应用打包成单个 HTML 工件：
bash scripts/bundle-artifact.sh
这将创建 bundle.html - 一个自包含的工件，所有 JavaScript、CSS 和依赖项都已内联。此文件可以直接在 Claude 对话中作为工件共享。
要求：您的项目必须在根目录中有一个 index.html。
脚本的作用：
.parcelrc 配置最后，在对话中与用户共享打包的 HTML 文件，以便他们可以将其作为工件查看。
注意：这是一个完全可选的步骤。仅在必要时或应要求时执行。
要测试/可视化工件，请使用可用工具（包括其他 Skills 或内置工具，如 Playwright 或 Puppeteer）。通常，避免提前测试工件，因为这会在请求和完成工件可见之间增加延迟。如果请求或出现问题，请在展示工件后进行测试。