技能 web-artifacts-builder
📦

web-artifacts-builder

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

构建 React HTML Artifacts

复杂的 Claude artifacts 通常需要状态、路由、组件以及可重复的构建设置。此 skill 会搭建一个 React 项目，并将其打包为一个可共享的 HTML artifact。

支持: Claude Codex Code(CC)
⚠️ 38 差

使用我的智能体安装

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

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

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

Agent 可读资源

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

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

测试它

正在使用“web-artifacts-builder”。 Build an interactive project tracker for Claude.

预期结果:

搭建一个 React 项目，使用 Tailwind CSS 设置样式，并打包为单个 HTML artifact。

正在使用“web-artifacts-builder”。 Convert a component-heavy prototype into a shareable artifact.

预期结果:

  • 配置一个带路径别名的 Vite app。
  • shadcn/ui 组件可用于界面构建。
  • 完成后的构建结果会打包为一个 HTML 文件。

正在使用“web-artifacts-builder”。 Set up a polished settings panel with tabs and dialogs.

预期结果:

结果使用预安装的 UI 组件和结构化的 React 项目，可直接用于打包。

安全审计

高风险
v5 • 2026/7/8 打开版本化报告

Most static hits are false positives from Markdown code fences, safe command substitutions, local config edits, and documentation URLs. The meaningful risks are community shell scripts that install npm packages, modify project files, and delete local build outputs during bundling. No evidence found of prompt injection or data exfiltration intent.

3
已扫描文件
451
分析行数
2
复核项
0
已忽略误报

已确认安全问题 (2)

高
scripts/init-artifact.sh:34-36scripts/init-artifact.sh:58-79scripts/init-artifact.sh:270-273scripts/bundle-artifact.sh:19-21
Package Manager Installs Third-Party Code
The setup and bundle scripts install or add third-party packages, including a global pnpm install when pnpm is missing. This can run npm lifecycle scripts and pulls current package versions at execution time.
The cited lines directly invoke npm and pnpm package installation commands. This is legitimate setup behavior, but it executes third-party package code from the network.
中
scripts/bundle-artifact.sh:34-36
Destructive Build Cleanup
The bundle script removes dist and bundle.html in the current project before building. The package and index checks reduce exposure, but the command can delete local build artifacts.
The rm -rf command is explicit and destructive, but it targets common generated outputs after project-root checks. This makes the issue real but bounded.
能力复核项 (2)

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

中
scripts/bundle-artifact.sh:1
Unix shell invocation
#!/bin/bash
This is an executable bash script used by the skill. It installs bundling packages, removes build outputs, and runs local build commands, so it requires review before execution.
中
scripts/init-artifact.sh:1
Unix shell invocation
#!/bin/bash
This is an executable setup script that installs packages and rewrites project files. The script is expected, but it is a real execution risk for a community skill.

风险因素

⚙️ 外部命令 (15)
scripts/bundle-artifact.sh:47 scripts/bundle-artifact.sh:1 scripts/init-artifact.sh:7 scripts/init-artifact.sh:13 scripts/init-artifact.sh:46 scripts/init-artifact.sh:1 SKILL.md:10 SKILL.md:12 SKILL.md:27-30 SKILL.md:30-35 SKILL.md:35-48 SKILL.md:48-50 SKILL.md:50-52 SKILL.md:52-54 SKILL.md:54-58
⚡ 包含脚本 (1)
scripts/init-artifact.sh:93
🌐 网络访问 (2)
scripts/init-artifact.sh:283 SKILL.md:74
📁 文件系统访问 (9)
scripts/init-artifact.sh:230 scripts/init-artifact.sh:234 scripts/init-artifact.sh:242 scripts/init-artifact.sh:250 scripts/init-artifact.sh:230 scripts/init-artifact.sh:234 scripts/init-artifact.sh:242 scripts/init-artifact.sh:250 scripts/init-artifact.sh:34
审计者: codex 查看审计历史 →
分享与引用此报告

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

打开版本化报告
安全评估

复制报告链接

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

Markdown 徽章

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

HTML 徽章

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

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/zhanlincui-web-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 引用

ZhanlinCui. (2026). web-artifacts-builder security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/zhanlincui-web-artifacts-builder/audits/5

BibTeX 引用

@techreport{zhanlincui-zhanlincui-web-artifacts-builder-2026, author = {ZhanlinCui}, title = {web-artifacts-builder security audit report (audit version 5)}, institution = {Skillstore}, year = {2026}, number = {5}, url = {https://skillstore.io/skills/zhanlincui-web-artifacts-builder/audits/5}, 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: "web-artifacts-builder security audit report (audit version 5)" version: "unspecified" type: report authors: - name: "ZhanlinCui" date-released: "2026-07-08" url: "https://skillstore.io/skills/zhanlincui-web-artifacts-builder/audits/5" identifiers: - type: other value: "skillstore:zhanlincui-web-artifacts-builder:audit:5" description: "Skillstore immutable audit report identifier"

比较变体

5 个可安装变体

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

为什么此变体排名第一

Skillstore 使用量更高
davila7 推荐

davila7-web-artifacts-builder

Skillstore 评分 67
证据置信度 高
Skillstore 使用量 10
已更新

2026-09-09

Azeem-2

azeem-2-web-artifacts-builder

Skillstore 评分 67
证据置信度 高
Skillstore 使用量 9
已更新

2026-09-09

sickn33

sickn33-web-artifacts-builder

Skillstore 评分 66
证据置信度 中
Skillstore 使用量 10
已更新

2026-09-09

anthropics

web-artifacts-builder

Skillstore 评分 50
证据置信度 高
Skillstore 使用量 46
已更新

2026-09-09

ZhanlinCui 当前

zhanlincui-web-artifacts-builder

Skillstore 评分 38
证据置信度 中
Skillstore 使用量 79
已更新

2026-09-09

Skillstore 评分

评分依据 证据置信度: 中
45
架构
85
可维护性
87
内容
71
社区
83
规范符合性

你能构建什么

原型化仪表盘

产品团队可以使用 React 状态和 shadcn/ui 控件创建交互式仪表盘。

构建可复用的演示 app

开发者可以搭建一个带类型的前端，并将最终结果作为一个 HTML artifact 共享。

准备精致的 Claude artifact

AI assistants 可以创建需要组件库和打包能力的复杂 Claude artifacts。

试试这些提示

创建基础 artifact 
Use web-artifacts-builder to create a React artifact named task-board. Build a simple task board and bundle it as one HTML file.
添加 shadcn 控件 
Create a settings panel artifact with tabs, switches, dialogs, and form inputs. Use the included shadcn/ui components.
优化有状态工作流 
Build a multi-step planning tool with saved local state, validation, and responsive layouts. Bundle the finished React artifact.
打包复杂原型 
Create a data-rich operations dashboard with filters, tables, charts, and modal details. Verify the interface, then produce the bundled HTML artifact.

最佳实践

  • 在可信工作区中运行 setup script 之前，先审查 package installs。
  • 将此 skill 用于受益于 React 状态的多组件 artifacts。
  • 仅在浏览器或预览工具中检查 app 后再进行打包。

避免

  • 将 setup script 用于单屏静态 HTML artifact。
  • 在包含无关项目文件的目录中运行 scripts。
  • 未审查 packages 就假设生成的依赖是安全的。

常见问题

这个 skill 会创建什么？
它会创建一个 React 和 TypeScript artifact 项目，并将其打包为一个 HTML 文件。
它需要网络访问吗？
需要。scripts 会在设置和打包期间安装 npm packages。
它能构建简单的 HTML 片段吗？
可以，但它更适合复杂的 React artifacts。
包含哪个 UI 库？
设置中包含 shadcn/ui 组件和 Radix UI 依赖。
最终 artifact 保存在哪里？
bundle script 会在项目根目录创建一个 HTML 文件。
用户是否应该先审查 scripts？
应该。scripts 会安装依赖、写入配置文件并移除构建输出。

开发者详情

作者

ZhanlinCui

许可证

Complete terms in LICENSE.txt

Skillstore 修订

r1

版本提示

作者未声明版本。

仓库

https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/web-artifacts-builder

引用

88a205c7f635a966e31156313b590d59007c5caa

维护新鲜度

2026/7/18

使用量

76 次下载 · 264 次浏览

文件结构

📁 scripts/

📄 bundle-artifact.sh

📄 init-artifact.sh

📄 shadcn-components.tar.gz

📄 SKILL.md