web-artifacts-builder – skill Thiết kế & UI cho agent AI

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: version-selected React/TypeScript/Vite scaffold plus Parcel, Tailwind 3.x and a bundled shadcn-style component snapshot. Mixed snapshot/dependency versions require build verification.

Catalog modification notice: repaired initialization path/version handling, preserved existing outputs, and added explicit checks for the bundled component snapshot. The Apache-2.0 license text is retained. Archive members have no per-file upstream notices/pinned source in this tree; their full provenance/license compatibility is unresolved, so do not claim a complete third-party license audit.

Resolve scripts from the installed skill directory and run initialization in a disposable output parent. Install/build commands fetch packages and may run lifecycle scripts; review selected versions and preserve the lockfile. Supply an explicitly reviewed CREATE_VITE_VERSION and a compatible supported Node/pnpm toolchain. Never embed credentials/private data in client bundles; self-contained HTML still executes JavaScript and may request external resources.

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:

CREATE_VITE_VERSION=<reviewed-version> bash "$SKILL_DIR/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)
• Requires a supported Node toolchain compatible with the explicitly selected scaffold; no blanket Node 18 compatibility

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 "$SKILL_DIR/scripts/bundle-artifact.sh"

This creates bundle.html with bundleable JavaScript/CSS/assets inlined. Verify dynamic URLs, fonts, images, worker chunks and runtime requests before describing it as self-contained or offline. 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)

Run the generated project's type/build checks and a representative browser check before describing it as working. Verify main interactions, keyboard/focus behavior, responsive layout and the final bundled file (not only Vite development mode). If a check cannot run, state that limitation when sharing the artifact. Publication or external uploads require the requested authorization.

Bundled snapshot caveats: calendar styles include newer Tailwind syntax that may not work with Tailwind 3.4.1; resizable-panel APIs are version-sensitive; the initializer patches a missing Progress value forwarding and a Menubar displayName typo. Form helpers require FormProvider/FormField/FormItem composition, and dialogs/command dialogs need accessible titles/descriptions. These are starting components, not a certified accessible component suite.

Reference

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

When to Use

This skill is applicable to execute the workflow or actions described in the overview.

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.