$ ~/registry/skill/composiohq-artifacts-builder

SKILL

artifacts-builder

Name: artifacts-builder
Author: Composio

帮助用户构建基于 React 与 Tailwind 的复杂多组件网页交互原型

星标

★ 77,278

来源

GitHub

更新于

2026-10-18

// 安全评估需留意

仅提示词，不执行代码
开源可审计
社区验证· 64.9k

总评

该 Skill 材料显示其本质是用于生成前端 artifact 的提示/文档型工作流，本身未声明需要密钥或连接远程端点。虽然 README 提到可运行本地脚本与安装前端依赖，但结合“prompt-only”、开源来源及较高社区采用度，整体风险偏低，以需留意为主。

凭证密钥低风险

材料明确写明无需密钥或环境变量，未见要求输入 API token、账号凭证或长期敏感认证信息，因此凭证泄露与滥用面较低。

网络外发低风险

未声明任何远程端点，且系统检查项标记为 prompt-only。文档虽引用外部文档网址并提到安装依赖，但未显示该 Skill 自身会把用户数据发送到第三方服务。

代码执行需留意

README 指导执行本地 shell 脚本（如 init-artifact.sh、bundle-artifact.sh）并进行打包安装，这属于本机起进程与构建代码的常规能力。材料未见超出其前端构建用途的系统权限申请，但若实际使用应在受控环境中运行。

数据访问需留意

其预期操作包括创建项目目录、编辑生成代码、读取 index.html、输出 bundle.html，属于对本地工程文件的常规读写。未见要求访问无关目录、系统敏感文件或额外资源，过度授权迹象不明显。

来源供应链需留意

来源为 GitHub 开源仓库且社区采用度高（约 64.9k stars），这明显降低了供应链风险；但许可证未声明、维护状态未知，且 README 提到会安装多项前端依赖，因此仍需留意依赖与脚本内容审查。

安全建议

实际使用前先审阅 scripts/init-artifact.sh 与 scripts/bundle-artifact.sh 的具体内容。
在隔离开发环境或容器中运行初始化与打包流程，避免影响主机系统。
锁定并审查安装的 npm 依赖版本，优先使用可复现构建。
如需分享生成的 bundle.html，先检查其中是否意外内联了敏感数据或调试内容。

审计模型: gpt-5.4 · 2026-06-17

// 安装

复制安装指令，让 AI 自动完成配置 · 推荐新手

请帮我安装 askskill 上的 "artifacts-builder" 技能：
1. 下载 https://raw.githubusercontent.com/ComposioHQ/awesome-claude-skills/master/artifacts-builder/SKILL.md
2. 保存为 ~/.claude/skills/artifacts-builder/SKILL.md
3. 装好后重载技能，告诉我可以用了

// 下载

下载 SKILL.md机读安装清单 ↗

// 文档

Artifacts Builder

To build powerful frontend claude.ai artifacts, follow these steps:

Initialize the frontend repo using scripts/init-artifact.sh
Develop your artifact by editing the generated code
Bundle all code into a single HTML file using scripts/bundle-artifact.sh
Display artifact to user
(Optional) Test the artifact

Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui

Design & Style Guidelines

VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.

Quick Start

Step 1: Initialize Project

Run the initialization script to create a new React project:

bash scripts/init-artifact.sh <project-name>
cd <project-name>

This creates a fully configured project with:

✅ React + TypeScript (via Vite)
✅ Tailwind CSS 3.4.1 with shadcn/ui theming system
✅ Path aliases (@/) configured
✅ 40+ shadcn/ui components pre-installed
✅ All Radix UI dependencies included
✅ Parcel configured for bundling (via .parcelrc)
✅ Node 18+ compatibility (auto-detects and pins Vite version)

Step 2: Develop Your Artifact

To build the artifact, edit the generated files. See Common Development Tasks below for guidance.

Step 3: Bundle to Single HTML File

To bundle the React app into a single HTML artifact:

bash scripts/bundle-artifact.sh

This creates bundle.html - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.

Requirements: Your project must have an index.html in the root directory.

What the script does:

Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
Creates .parcelrc config with path alias support
Builds with Parcel (no source maps)
Inlines all assets into single HTML using html-inline

Step 4: Share Artifact with User

Finally, share the bundled HTML file in conversation with the user so they can view it as an artifact.

Step 5: Testing/Visualizing the Artifact (Optional)

Note: This is a completely optional step. Only perform if necessary or requested.

To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.