Source profileQuality 71/100Review permissions

anthropics/skills/skills/web-artifacts-builder/SKILL.md

web-artifacts-builder

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.

Source repository stars
171,412
Declared platforms
0
Static risk flags
1
Last source update
2026-08-21
Source checked
2026-08-25
DecisionCompatibilityInstallWorkflowPermissionsEvidenceSourceFAQ

Decision brief

What it does: where it fits

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 artifa…

Best for

    Not for

    • Tasks that require unconfirmed production actions or broad system permissions.
    • Environments where the pinned source and install steps cannot be inspected.

    Compatibility matrix

    Platform support, with evidence labels

    PlatformStatusEvidenceWhat to check
    CodexNot declaredNo explicit evidencePortability before use
    Claude CodeNot declaredNo explicit evidencePortability before use
    CursorNot declaredNo explicit evidencePortability before use
    Gemini CLINot declaredNo explicit evidencePortability before use
    Open the compatibility checker

    Installation

    Inspect first. Install second.

    The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

    Source-detected install commandSource
    npx skills add https://github.com/anthropics/skills --skill "skills/web-artifacts-builder"
    Safe inspection promptEditorial

    Inspect the Agent Skill "web-artifacts-builder" from https://github.com/anthropics/skills/blob/3b3fad96af16a10759d930941b4520ba0c40edae/skills/web-artifacts-builder/SKILL.md at commit 3b3fad96af16a10759d930941b4520ba0c40edae. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

    Workflow

    What the source asks the agent to do

    1. 01

      Quick Start

      Run the initialization script to create a new React project:

      ✅ React + TypeScript (via Vite)✅ Tailwind CSS 3.4.1 with shadcn/ui theming system✅ Path aliases (@/) configured
    2. 02

      Step 1: Initialize Project

      Run the initialization script to create a new React project:

      ✅ React + TypeScript (via Vite)✅ Tailwind CSS 3.4.1 with shadcn/ui theming system✅ Path aliases (@/) configured
    3. 03

      Step 2: Develop Your Artifact

      To build the artifact, edit the generated files. See Common Development Tasks below for guidance.

      To build the artifact, edit the generated files. See Common Development Tasks below for guidance.
    4. 04

      Step 3: Bundle to Single HTML File

      To bundle the React app into a single HTML artifact:

      Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)Creates .parcelrc config with path alias supportBuilds with Parcel (no source maps)

    Permission review

    Static risk signals and limitations

    Runs scripts

    medium · line 20

    The documentation asks the agent to run terminal commands or scripts.

    Run the initialization script to create a new React project:

    Runs scripts

    medium · line 22

    The documentation asks the agent to run terminal commands or scripts.

    bash scripts/init-artifact.sh <project-name>

    Evidence record

    Why each signal appears

    EvidenceSourceComputedTestedEditorial
    SignalValueEvidence typeMeaning
    Quality score71/100ComputedDocumentation, specificity, maintenance, and trust rules
    Repository stars171,412SourceRepository attention, not individual Skill quality
    Compatibility0 platformsSourceDeclared in the catalog source record
    Usage guideautomated source guideEditorialGenerated or reviewed according to the visible evidence level

    Pinned source

    Provenance and original SKILL.md

    Repository
    anthropics/skills
    Skill path
    skills/web-artifacts-builder/SKILL.md
    Commit
    3b3fad96af16a10759d930941b4520ba0c40edae
    License
    Not declared
    Collected
    2026-08-25
    Default branch
    main
    View the original SKILL.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 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

    Frequently asked questions

    What to verify before installation and use

    What does the web-artifacts-builder source document cover?

    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 artifa…

    How do I install web-artifacts-builder?

    The source record exposes this install command: npx skills add https://github.com/anthropics/skills --skill "skills/web-artifacts-builder". Inspect the command and pinned source before running it.

    Which permission-related actions were detected?

    Static rules flagged exec-script in the source; the page lists the matching lines and excerpts.

    Alternatives

    Compare before choosing

    Computed 90223

    yonatangross/orchestkit

    expect

    Diff-aware AI browser testing — reads the git diff, maps changes to affected pages via the route map, generates a targeted test plan, and executes it via agent-browser (Rust daemon + CDP, ARIA-tree-first) with pass/fail reporting. Use when testing UI changes, verifying PRs before merge, or running regression checks on changed components.

    2026-08-241 platforms
    Computed 10045,511

    coreyhaines31/marketingskills

    ab-testing

    When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program

    2026-08-240 platforms
    Computed 1008

    narrative-io/narrative-skills-marketplace

    design-analysis

    Translate a fuzzy analytical question into a rigorous investigation plan. Interrogates the ask, grounds the plan in the available data dictionary, applies analytical best practices, and produces a structured brief of query specifications for a downstream query-writing skill. Plans, does not write SQL. Use when: "why did X drop", "is there a relationship between A and B", "who are our highest-value customers", "what's driving the change in Y", "investigate this trend", "design an analysis for", "

    2026-08-241 platforms
    Computed 9980

    vasilyu1983/AI-Agents-public

    qa-testing-ios

    Guides iOS testing with XCTest, XCUITest, Swift Testing, simctl, and xcresult. Use when choosing destinations, controlling flakes, or parsing test artifacts for native apps.

    2026-08-212 platforms