web-artifacts-builder
Web Artifacts Builder is a development suite for constructing complex Claude.ai HTML artifacts using React, TypeScript, Tailwind CSS, and shadcn/ui components. Use this skill when building interactive artifacts that require state management, routing, or pre-built UI components, rather than simple single-file HTML projects. The workflow includes initializing a React project, developing components with full TypeScript support, bundling everything into a self-contained HTML file, and displaying the result to users.
git clone --depth 1 https://github.com/UnicomAI/wanwu /tmp/web-artifacts-builder && cp -r /tmp/web-artifacts-builder/configs/microservice/bff-service/configs/agent-skills/anthropics/web-artifacts-builder ~/.claude/skills/web-artifacts-builderSKILL.md
# 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 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 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
万悟平台 SSE 子会话递归嵌套与三明治序列渲染架构指南。涵盖 parentId 领养、order 绝对排序、动静 Chunk 分层及 Vue 2 响应式引用协议。
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Build apps with the Claude API or Anthropic SDK. TRIGGER when: code imports `anthropic`/`@anthropic-ai/sdk`/`claude_agent_sdk`, or user asks to use Claude API, Anthropic SDKs, or Agent SDK. DO NOT TRIGGER when: code imports `openai`/other AI SDK, general programming, or ML/data-science tasks.
Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.
Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files). Triggers include: any mention of 'Word doc', 'word document', '.docx', or requests to produce professional documents with formatting like tables of contents, headings, page numbers, or letterheads. Also use when extracting or reorganizing content from .docx files, inserting or replacing images in documents, performing find-and-replace in Word files, working with tracked changes or comments, or converting content into a polished Word document. If the user asks for a 'report', 'memo', 'letter', 'template', or similar deliverable as a Word or .docx file, use this skill. Do NOT use for PDFs, spreadsheets, Google Docs, or general coding tasks unrelated to document generation.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.