一个构建复杂 HTML artifact 的 skill：React + Tailwind + shadcn/ui
装好之后怎么用
什么时候会用上它：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.
怎么用：在 AI 工具里直接描述任务即可自动触发。显式调用的写法各端不同：Claude Code / Cursor 等用 /web-artifacts-builder，Codex 用 $web-artifacts-builder，Kimi Code 用 /skill:web-artifacts-builder，ZCODE 用 $web-artifacts-builder，Gemini CLI 以自动激活为主。
一个构建复杂 HTML artifact 的 skill。
它解决的是：要构建复杂的、多组件的 claude.ai HTML artifact，但不知道怎么初始化项目、开发、打包成单文件。
它的 5 步流程：
- 用 scripts/init-artifact.sh 初始化前端仓库
- 编辑生成的代码开发 artifact
- 用 scripts/bundle-artifact.sh 打包成单个 HTML 文件
- 展示给用户
- （可选）测试
它的技术栈：React 18 + TypeScript + Vite + Parcel + Tailwind CSS + shadcn/ui。
一个很重要的设计提醒：避免"AI slop"——避免过度居中布局、紫色渐变、统一圆角、Inter 字体。
它支持：
- React + TypeScript（via Vite）
- Tailwind CSS 3.4.1 with shadcn/ui theming system
- 路径别名（@/）配置
- 40+ shadcn/ui 组件预装
- 所有 Radix UI 依赖
- Parcel 配置
- Node 18+ 兼容
适合谁：
- 做 Web 开发、交互式展示、数据可视化的科研小组成员
- 需要构建复杂 artifact 的人
- 想要 React + Tailwind + shadcn/ui 技术栈的人
用法： 把 SKILL.md 内容复制到你的 AI 工具里，按 5 步流程走就行。
技能内容
SKILL.md版本与文件 ›Web Artifacts Builder
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
- (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.shThis 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
.parcelrcconfig 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
评论 0
更多
登录后可点赞、收藏、评论和举报。
还没有评论，先发起一个具体问题。