技能 artifacts-builder

📦

artifacts-builder

Name: artifacts-builder
Author: ComposioHQ

内容修订 r1 中风险 ⚙️ 外部命令⚡ 包含脚本🌐 网络访问📁 文件系统访问

使用 React 构建丰富的 Claude Artifacts

复杂的 Claude artifacts 通常需要状态、路由、样式和可复用组件。此技能会创建一个可直接使用的 React 工作区，并将完成的应用打包成一个 HTML artifact。

支持: Claude Codex Code(CC)

⚠️ 50 差

安装前请停下并请求确认。

请审查安装计划，并在更改文件前获得用户明确同意。

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求

Review the Skillstore skill "artifacts-builder" from https://skillstore.io/skills/composiohq-artifacts-builder.md and its manifest at https://skillstore.io/api/skills/composiohq-artifacts-builder/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/composiohq-artifacts-builder.md 已签名 manifest GET /api/skills/composiohq-artifacts-builder/manifest 已签名 lockfile GET /api/skills/composiohq-artifacts-builder/lockfile

测试它

正在使用“artifacts-builder”。 Create a React artifact for a pricing comparison page.

预期结果:

一个生成的 React 项目，包含 Tailwind 样式、可复用的价格卡片，以及运行和打包 artifact 的说明。

正在使用“artifacts-builder”。 Bundle my completed artifact for Claude.

预期结果:

一个包含已构建应用的单一 bundle.html 文件，可作为 Claude artifact 分享。

正在使用“artifacts-builder”。 Make a component-heavy dashboard prototype.

预期结果:

一个使用 shadcn/ui 组件的结构化前端项目，例如卡片、标签页、对话框、表格和表单控件。

安全审计

中风险

v8 • 2026/7/9 打开版本化报告

The skill is a legitimate local artifact builder, but it relies on shell scripts that install packages, modify project files, and extract a bundled archive. Most documentation and schema URL findings are false positives, while command execution, filesystem modification, package installation, and the embedded archive require user awareness before installation.

已扫描文件

653

分析行数

复核项

已忽略误报

已确认安全问题 (3)

中

scripts/init-artifact.sh:36 scripts/init-artifact.sh:59 scripts/bundle-artifact.sh:21

Automatic Package Installation from External Registries

The scripts run pnpm and npm installation commands during setup and bundling. This creates supply-chain exposure because install scripts and package contents come from external registries.

The install commands are explicit and reachable in normal use. The risk is supply-chain exposure, not evidence of malicious intent.

低

scripts/init-artifact.sh:277

Local Archive Extraction into Generated Project

The setup script extracts shadcn-components.tar.gz into the generated src directory. This is expected functionality, but archive extraction can overwrite files if archive contents are unsafe.

The extraction command is present and the archive is part of the skill. The observed archive listing looked scoped to components, so severity is low.

低

scripts/bundle-artifact.sh:36

Project Directory Cleanup Removes Local Paths

The bundling script deletes dist and bundle.html in the current project directory before rebuilding. This is normal build cleanup, but it can remove user files with those names.

The rm command is explicit and uses fixed relative paths. The blast radius is limited, but users should know it deletes local files.

能力复核项 (10)

这些是真实的本地能力，对此技能可能是预期行为，因此需要复核，但不会按已确认恶意行为计分。

中

scripts/bundle-artifact.sh:1

Unix shell invocation

#!/bin/bash

The file is a shell script that runs package installation, build, cleanup, and bundling commands. This is expected for the tool, but it gives the skill local command execution capability.

中

scripts/init-artifact.sh:1

Unix shell invocation

#!/bin/bash

The initialization file is a shell script that creates projects, installs packages, edits files, and extracts an archive. This local automation is intentional but carries execution and filesystem risk.

中

scripts/init-artifact.sh:230

Node.js fs operations

const config = JSON.parse(fs.readFileSync('tsconfig.json', 'utf8'));

The embedded Node command reads tsconfig.json from the generated project. This is expected setup behavior, but it is still local filesystem access performed by the skill.

中

scripts/init-artifact.sh:234

Node.js fs operations

fs.writeFileSync('tsconfig.json', JSON.stringify(config, null, 2));

The embedded Node command writes tsconfig.json in the generated project. The write is scoped to setup files, but it modifies local project state.

中

scripts/init-artifact.sh:242

Node.js fs operations

const content = fs.readFileSync(path, 'utf8');

The script reads tsconfig.app.json to rewrite compiler options. This is legitimate setup behavior but confirms filesystem read access.

中

scripts/init-artifact.sh:250

Node.js fs operations

fs.writeFileSync(path, JSON.stringify(config, null, 2));

The script writes tsconfig.app.json after modifying path aliases. This is expected but confirms local filesystem modification.

中

scripts/init-artifact.sh:230

Synchronous file operations

const config = JSON.parse(fs.readFileSync('tsconfig.json', 'utf8'));

Synchronous reading of tsconfig.json is used inside a setup script. It is not malicious, but it is a real local file operation.

中

scripts/init-artifact.sh:234

Synchronous file operations

fs.writeFileSync('tsconfig.json', JSON.stringify(config, null, 2));

Synchronous writing of tsconfig.json modifies the generated project configuration. This is expected but still a real filesystem write.

中

scripts/init-artifact.sh:242

Synchronous file operations

const content = fs.readFileSync(path, 'utf8');

Synchronous reading of tsconfig.app.json is used for project setup. The access is local and scoped, but the finding is technically real.

中

scripts/init-artifact.sh:250

Synchronous file operations

fs.writeFileSync(path, JSON.stringify(config, null, 2));

Synchronous writing of tsconfig.app.json changes local configuration. This is legitimate setup behavior, but it confirms filesystem modification.

审计者: claude 查看审计历史 →

分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告

复制报告链接

https://skillstore.io/skills/composiohq-artifacts-builder/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/composiohq-artifacts-builder/security.svg)](https://skillstore.io/skills/composiohq-artifacts-builder?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/composiohq-artifacts-builder?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/composiohq-artifacts-builder/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/composiohq-artifacts-builder.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

学术引用 (APA · BibTeX · CFF)

APA 引用

ComposioHQ. (2026). artifacts-builder security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/composiohq-artifacts-builder/audits/8

BibTeX 引用

@techreport{composiohq-composiohq-artifacts-builder-2026,
  author = {ComposioHQ},
  title = {artifacts-builder security audit report (audit version 8)},
  institution = {Skillstore},
  year = {2026},
  number = {8},
  url = {https://skillstore.io/skills/composiohq-artifacts-builder/audits/8},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "artifacts-builder security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
  - name: "ComposioHQ"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/composiohq-artifacts-builder/audits/8"
identifiers:
  - type: other
    value: "skillstore:composiohq-artifacts-builder:audit:8"
    description: "Skillstore immutable audit report identifier"

比较变体

5 个可安装变体

每位作者的技能都保持为独立的可安装项。推荐变体按 Skillstore 证据排序。

为什么此变体排名第一

Skillstore 评分最高

作者 / 来源 Skillstore 评分证据置信度 Skillstore 使用量已更新

davila7 推荐

davila7-artifacts-builder

Skillstore 评分 67

证据置信度高

Skillstore 使用量 8

已更新

2026-09-09

Cam10001110101

cam10001110101-artifacts-builder

Skillstore 评分 66

证据置信度中

Skillstore 使用量 13

已更新

2026-09-09

DYAI2025

dyai2025-artifacts-builder

Skillstore 评分 50

证据置信度中

Skillstore 使用量 12

已更新

2026-09-09

ComposioHQ 当前

composiohq-artifacts-builder

Skillstore 评分 50

证据置信度中

Skillstore 使用量 11

已更新

2026-09-09

ArtemisAI

artemisai-artifacts-builder

Skillstore 评分 38

证据置信度中

Skillstore 使用量 13

已更新

2026-09-09

Skillstore 评分

评分依据证据置信度: 中

架构

可维护性

内容

社区

规范符合性

你能构建什么

构建交互式产品演示

创建带有可复用 UI 组件的精致 React 原型，并将其作为一个 Claude artifact 分享。

原型化数据仪表板

使用 React 状态和组件组合来构建仪表板，比维护一个大型文件更容易。

准备用于评审的前端概念

生成结构化应用，优化 UI，并将其打包成可移植的 HTML 文件以供利益相关者查看。

试试这些提示

创建一个简单的 artifact 项目

Use the artifacts-builder skill to create a React artifact project named my-artifact. Keep the first version simple and explain how I can run it locally.

添加 shadcn/ui 布局组件

Use artifacts-builder to make a dashboard artifact with cards, tabs, a table, and a dialog. Use shadcn/ui components and keep the design clean.

打包完成的 artifact

Bundle the current React artifact into a single HTML file with artifacts-builder. Confirm the expected output file and note any build issues.

构建并验证高级原型

Create a multi-step onboarding prototype with local state, responsive layout, and shadcn/ui controls. Bundle it, then test the main flow in a browser if tools are available.