AI LineAiline Skillhub
技能市场/web-artifacts-builder

web-artifacts-builder

web-artifacts-builder

使用现代前端Web技术（ React、Tailwind CSS、shadcn/ui ）创建精心设计的多组件claude.ai HTML工件的工具套件。用于需要状态管理、路由或shadcn/ui组件的复杂工件-不适用于简单的单文件HTML/JSX工件。

查看原文简介

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

Web 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 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.

Reference

  • shadcn/ui components: https://ui.shadcn.com/docs/components

安装中心

可直接安装到 9 个框架（另有 Cursor / Windsurf 需转换为 rules 格式）。悬停可查看各框架的技能目录。

方式一 · 复制提示词（推荐）

粘贴给你的 Claude Code，它会自己完成下载和安装（安装文件直接取自原始仓库）

请帮我安装技能「web-artifacts-builder」：
1. 从原始仓库下载技能文件：https://raw.githubusercontent.com/anthropics/skills/main/skills/web-artifacts-builder/SKILL.md（GitHub 上的 SKILL.md 原始文件）
2. 保存为 ~/.claude/skills/web-artifacts-builder/SKILL.md（目录不存在则创建）
3. 确认文件存在后，告诉我安装结果

方式二 · 命令行安装

npx CLI 跨平台可用（自动检测本机 Agent）；PowerShell 方式无需安装任何东西

npx ailine-skills add web-artifacts-builder
New-Item -ItemType Directory -Force "$HOME\.claude\skills\web-artifacts-builder" | Out-Null; curl.exe -fsSL "https://raw.githubusercontent.com/anthropics/skills/main/skills/web-artifacts-builder/SKILL.md" -o "$HOME\.claude\skills\web-artifacts-builder\SKILL.md"

方式三 · 前往原始仓库

第三方技能不由本站分发安装文件，请从原始仓库获取（上方命令/提示词已直连原始文件）

前往 GitHub 仓库 ↗查看 SKILL.md 原文件