artifacts-builder — for Claude Code artifacts-builder, token-monitor, community, for Claude Code, ide skills, mcp-feedback-enhanced, ask_followup_question, This creates, index.html, parcelrc

v1.0.0

关于此技能

适用场景: Ideal for AI agents that need to build powerful frontend claude.ai artifacts, follow these steps:. 本地化技能摘要: See Common Development Tasks below for guidance. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

功能特性

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

# 核心主题

figulazmi figulazmi
[0]
[0]
更新于: 4/13/2026

Killer-Skills Review

Decision support comes first. Repository text comes second.

Reference-Only Page Review Score: 8/11

This page remains useful for operators, but Killer-Skills treats it as reference material instead of a primary organic landing page.

Original recommendation layer Concrete use-case guidance Explicit limitations and caution
Review Score
8/11
Quality Score
46
Canonical Locale
en
Detected Body Locale
en

适用场景: Ideal for AI agents that need to build powerful frontend claude.ai artifacts, follow these steps:. 本地化技能摘要: See Common Development Tasks below for guidance. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

核心价值

推荐说明: artifacts-builder helps agents to build powerful frontend claude.ai artifacts, follow these steps:. See Common Development Tasks below for guidance. This AI agent skill supports Claude Code, Cursor, and Windsurf

适用 Agent 类型

适用场景: Ideal for AI agents that need to build powerful frontend claude.ai artifacts, follow these steps:.

赋予的主要能力 · artifacts-builder

适用任务: Applying To build powerful frontend claude.ai artifacts, follow these steps:
适用任务: Applying Initialize the frontend repo using scripts/init-artifact.sh
适用任务: Applying Develop your artifact by editing the generated code

! 使用限制与门槛

  • 限制说明: Requirements : Your project must have an index.html in the root directory.
  • 限制说明: Note: This is a completely optional step. Only perform if necessary or requested.
  • 限制说明: Requirements : Your project must have an index.html in the root directory

Why this page is reference-only

  • - Current locale does not satisfy the locale-governance contract.
  • - The underlying skill quality score is below the review floor.

Source Boundary

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

评审后的下一步

先决定动作,再继续看上游仓库材料

Killer-Skills 的主价值不应该停在“帮你打开仓库说明”,而是先帮你判断这项技能是否值得安装、是否应该回到可信集合复核,以及是否已经进入工作流落地阶段。

实验室 Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

常见问题与安装步骤

以下问题与步骤与页面结构化数据保持一致,便于搜索引擎理解页面内容。

? FAQ

artifacts-builder 是什么?

适用场景: Ideal for AI agents that need to build powerful frontend claude.ai artifacts, follow these steps:. 本地化技能摘要: See Common Development Tasks below for guidance. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

如何安装 artifacts-builder?

运行命令:npx killer-skills add figulazmi/token-monitor/artifacts-builder。支持 Cursor、Windsurf、VS Code、Claude Code 等 19+ IDE/Agent。

artifacts-builder 适用于哪些场景?

典型场景包括:适用任务: Applying To build powerful frontend claude.ai artifacts, follow these steps:、适用任务: Applying Initialize the frontend repo using scripts/init-artifact.sh、适用任务: Applying Develop your artifact by editing the generated code。

artifacts-builder 支持哪些 IDE 或 Agent?

该技能兼容 Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer。可使用 Killer-Skills CLI 一条命令通用安装。

artifacts-builder 有哪些限制?

限制说明: Requirements : Your project must have an index.html in the root directory.;限制说明: Note: This is a completely optional step. Only perform if necessary or requested.;限制说明: Requirements : Your project must have an index.html in the root directory。

安装步骤

  1. 1. 打开终端

    在你的项目目录中打开终端或命令行。

  2. 2. 执行安装命令

    运行:npx killer-skills add figulazmi/token-monitor/artifacts-builder。CLI 会自动识别 IDE 或 AI Agent 并完成配置。

  3. 3. 开始使用技能

    artifacts-builder 已启用,可立即在当前项目中调用。

! 参考页模式

此页面仍可作为安装与查阅参考,但 Killer-Skills 不再把它视为主要可索引落地页。请优先阅读上方评审结论,再决定是否继续查看上游仓库说明。

Upstream Repository Material

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

Upstream Source

artifacts-builder

See Common Development Tasks below for guidance. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows. To build powerful frontend

SKILL.md
Readonly
Upstream Repository Material
The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.
Supporting Evidence

Artifacts Builder

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

  1. Initialize the frontend repo using scripts/init-artifact.sh
  2. Develop your artifact by editing the generated code
  3. Bundle all code into a single HTML file using scripts/bundle-artifact.sh
  4. Display artifact to user
  5. (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
1bash scripts/init-artifact.sh <project-name> 2cd <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. If you need to confirm design choices or functionality with the user during development, use mcp-feedback-enhanced (e.g., ask_followup_question) if available.

Step 3: Bundle to Single HTML File

To bundle the React app into a single HTML artifact:

bash
1bash 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.

Reference

相关技能

寻找 artifacts-builder 的替代方案 (Alternative) 或可搭配使用的同类 community Skill?探索以下相关开源技能。

查看全部

openclaw-release-maintainer

Logo of openclaw
openclaw

Your own personal AI assistant. Any OS. Any Platform. The lobster way. 🦞

333.8k
0
AI

widget-generator

Logo of f
f

为prompts.chat的信息反馈系统生成可定制的插件小部件

149.6k
0
AI

flags

Logo of vercel
vercel

React 框架

138.4k
0
浏览器

pr-review

Logo of pytorch
pytorch

Python中具有强大GPU加速的张量和动态神经网络

98.6k
0
开发者工具