Token导航 LogoToken导航

Agent Skill · 研究检索

web-artifacts-builder（网络工件构建器）

web-artifacts-builder 用于查找、检索和筛选相关信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要根据关键词、任务场景或来源线索快速定位候选结果时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

web-artifacts-builder 是研究检索类 Agent Skill，可用宿主为 Codex、Claude、Cursor、Gemini CLI，通过GitHub 仓库获取，权限为操作浏览器；许可证为 MIT，暂无第三方扫描结果，按安装量在研究检索类的 73,675 个 Skill 里排第 69,522。

总安装 218周安装 9GitHub Stars 公开资料未说明下载 71核验 2026-05-01
研究检索操作浏览器GitHub 仓库未标认证来源可访问许可证明确审计未展示CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明，不托管安装包，也不代用户安装。
GitHub
许可证
MIT

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：web-artifacts-builder（网络工件构建器）
来源仓库：https://github.com/kunhai-88/skills
仓库路径：skills/web-artifacts-builder
安装命令：
npx skills add kunhai-88/skills --skill "web-artifacts-builder"
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

AgentSkills.tonpx skills
npx skills add kunhai-88/skills --skill "web-artifacts-builder"

这个 Skill 是做什么的

研究检索类 Skill 主要解决「找资料、核对事实、把来源整理清楚」的问题，通常会让助手先检索再总结。

web-artifacts-builder 用于查找、检索和筛选相关信息，适合在 Codex、Claude、Cursor、Gemini CLI 中快速定位候选结果。适用于关键词搜索、任务场景匹配或来源线索梳理等研究检索场景。

通过 npx skills add kunhai-88/skills --skill "web-artifacts-builder" 安装，需结合原始 README 核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写操作。

适用宿主包括 Codex、Claude、Cursor、Gemini CLI，接入前应确认版本、权限和运行环境要求。

来源仓库内路径：skills/web-artifacts-builder

上手步骤

4 步
  1. 1

    确认自己的宿主工具

    公开资料标注支持 Codex、Claude、Cursor、Gemini CLI；先确认自己用的是其中之一，再按对应工具的 Skills 目录放置。

  2. 2

    拿到安装命令

    可以直接复制的命令是 npx skills add kunhai-88/skills --skill "web-artifacts-builder"；命令里的占位符换成自己的路径或密钥再执行。

  3. 3

    安装后重启宿主

    命令执行完要完全退出宿主工具再打开，让新装的 Skill 被重新扫描到，否则列表里可能看不到。

  4. 4

    按最小权限试用

    它需要操作浏览器，先在测试目录或测试账号里跑，确认没问题再放到正式项目。

常见问题

6 条

web-artifacts-builder 怎么安装？

在终端执行 npx skills add kunhai-88/skills --skill "web-artifacts-builder"。装完完全退出宿主工具再打开，让它重新扫描本地 Skill。

web-artifacts-builder 支持哪些 AI 工具？

公开资料标注支持 Codex、Claude、Cursor、Gemini CLI。其他工具只要能读取本地 Skill 目录，一般也能手动放进去，但要自己确认触发方式是否一致。

web-artifacts-builder 需要什么权限？

权限级别是操作浏览器。该 Skill 可能涉及浏览器控制能力，使用时可能读取或操作网页内容，需要在受控环境中确认权限边界。

web-artifacts-builder 是免费的吗？

来源标注的许可证是 MIT。本站不代收任何费用，也不托管安装包；能否商用、要不要署名，以许可证原文为准。

web-artifacts-builder 用的人多吗？

公开数据是累计安装 218 次，近一周安装 9 次，下载 71 次。这些数字来自第三方目录统计，只能当作热度参考，不代表质量或安全性。

web-artifacts-builder 安全吗？

没有查到第三方扫描结果，安全性无法从公开资料判断，安装前请自行审查源码、依赖和命令行为。

值得选的地方和要先想清楚的地方

值得选的地方

  • 同时适配 4 种工具，换客户端不用重新找替代品。
  • 许可证明确为 MIT，商用和分发边界好判断。

先想清楚的地方

  • 没有第三方扫描结果，安全性只能靠自己读源码判断。
  • 第三方目录整理，版本更新和行为细节以来源仓库为准。

适不适合你

更适合

  • 已经在用 Codex，想直接扩展它能力的人。
  • 需要处理研究检索类任务、又不想每次都手写提示词的人。

不太适合

  • 要求有安全扫描结论才肯安装的团队。
  • 需要厂商级技术支持和 SLA 的生产系统。

研究检索类 Skill 对比

6 个同类
Skill总安装GitHub 星权限许可证扫描
find-skills

寻找技能 · Codex、Claude

31,199,81316,486操作浏览器MIT有提醒
self-improving-agent

自我改进 Agent · OpenClaw

16,464,0023,396接触敏感数据MIT-0通过
soultrace

灵魂追踪 · Codex、Claude

7,588,94412需要联网未明确有提醒
self-improving

自我完善 · OpenClaw

6,829,2841,046需要联网MIT-0通过
microsoft-foundry

微软代工厂 · Codex、Claude

6,614,144764调用外部服务未明确有提醒
web-artifacts-builder

网络工件构建器 · 本页

218—操作浏览器MIT未收录

按安装量取同分类前几名；数字来自第三方目录统计，只作热度参考，不代表质量结论。

SKILL.md 原文

name
web-artifacts-builder
description
使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂的多组件 claude.ai HTML 工件的工具套件。用于需要状态管理、路由或 shadcn/ui 组件的复杂工件—非简单单文件 HTML/JSX 工件。
license
MIT

Web Artifacts Builder

构建强大的前端 claude.ai 工件，遵循以下步骤：

  1. 使用 scripts/init-artifact.sh 初始化前端仓库
  2. 通过编辑生成的代码开发工件
  3. 使用 scripts/bundle-artifact.sh 将所有代码打包为单个 HTML 文件
  4. 向用户显示工件
  5. （可选）测试工件

技术栈：React 18 + TypeScript + Vite + Parcel（打包）+ Tailwind CSS + shadcn/ui

设计与样式指南

非常重要：为避免常被称为「AI 垃圾」的内容，避免使用过度居中布局、紫色渐变、统一圆角与 Inter 字体。

快速开始

步骤 1：初始化项目

运行初始化脚本创建新 React 项目：

bash scripts/init-artifact.sh 
cd

这创建完全配置的项目，包含：

  • ✅ React + TypeScript（通过 Vite）
  • ✅ Tailwind CSS 3.4.1 与 shadcn/ui 主题系统
  • ✅ 路径别名（@/）配置
  • ✅ 40+ shadcn/ui 组件预安装
  • ✅ 所有 Radix UI 依赖包含
  • ✅ Parcel 配置用于打包（通过 .parcelrc）
  • ✅ Node 18+ 兼容性（自动检测并固定 Vite 版本）

步骤 2：开发工件

编辑生成的文件以构建工件。见下方「常见开发任务」获取指导。

步骤 3：打包为单个 HTML 文件

将 React 应用打包为单个 HTML 工件：

bash scripts/bundle-artifact.sh

这创建 bundle.html — 包含所有 JavaScript、CSS 与依赖内联的自包含工件。此文件可直接在 Claude 对话中作为工件分享。

要求：项目必须在根目录有 index.html。

脚本作用：

  • 安装打包依赖（parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline）
  • 创建带路径别名支持的 .parcelrc 配置
  • 使用 Parcel 构建（无源映射）
  • 使用 html-inline 将所有资源内联到单个 HTML

步骤 4：与用户分享工件

最后，在对话中分享打包的 HTML 文件，以便他们可以将其作为工件查看。

步骤 5：测试/可视化工件（可选）

注意：这是完全可选步骤。仅在必要时或请求时执行。

要测试/可视化工件，使用可用工具（包括其他技能或内置工具如 Playwright 或 Puppeteer）。通常，避免提前测试工件，因为它在请求与可以看到完成工件之间增加延迟。如果请求或出现问题，在呈现工件后稍后测试。

参考

  • shadcn/ui 组件：https://ui.shadcn.com/docs/components

平台分布

windsurf

28.72%
按下载量换算20

OpenCode

24.61%
按下载量换算17

Cursor

18.49%
按下载量换算13

kiro-cli

12.12%
按下载量换算9

Codex

9.1%
按下载量换算6

Claude Code

3.81%
按下载量换算3

安全审计

暂无安全审计结果可展示。

权限和风险

操作浏览器

该 Skill 可能涉及浏览器控制能力，使用时可能读取或操作网页内容，需要在受控环境中确认权限边界。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。目前只有一个公开来源，建议同时核对源仓库。

继续浏览同类 Skills

更多研究检索 Skills（73,675）返回 Skills 目录

上一个 Skill

web-artifacts-builder（网络工件构建器）

tazomatalax/context-engineering

web-artifacts-builder 用于查找、检索和筛选相关信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要根据关键词、任务场景或来源线索快速定位候选结果时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。

下一个 Skill

web-artifacts-builder（网络工件构建器）

teachingai/agent-skills

web-artifacts-builder 用于查找、检索和筛选相关信息，适合在 Codex、Claude、Cursor、Gemini CLI 中需要根据关键词、任务场景或来源线索快速定位候选结果时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态，以及是否会触发联网、命令执行或文件读写。