メニュー
一套用于使用现代前端 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コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？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）。通常，避免提前测试工件，因为这会在请求和完成工件可见之间增加延迟。如果请求或出现问题，请在展示工件后进行测试。