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
164,673
Declared platforms
0
Static risk flags
1
Last source update
2026-07-24
Source checked
2026-07-28
DecisionCompatibilityInstallWorkflowPermissionsEvidenceSource

Decision brief

What it does—and 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/b29e7cf65e5cb78a5ac33d582270551bc74a14eb/skills/web-artifacts-builder/SKILL.md at commit b29e7cf65e5cb78a5ac33d582270551bc74a14eb. 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 stars164,673SourceRepository 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
    b29e7cf65e5cb78a5ac33d582270551bc74a14eb
    License
    Not declared
    Collected
    2026-07-28
    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

    Alternatives

    Compare before choosing

    Computed 88234,327

    affaan-m/ECC

    react-testing

    React component testing with React Testing Library, Vitest/Jest, MSW for network mocking, accessibility assertions with axe, and the decision boundary between component tests and Playwright/Cypress end-to-end runs. Use when writing or fixing tests for React components, hooks, or pages.

    2026-07-270 platforms
    Computed 81234,327

    affaan-m/ECC

    coding-standards

    Baseline cross-project coding conventions for naming, readability, immutability, and code-quality review. Use detailed frontend or backend skills for framework-specific patterns.

    2026-07-270 platforms
    Computed 79234,327

    affaan-m/ECC

    coding-standards

    Baseline cross-project coding conventions for naming, readability, immutability, and code-quality review. Use detailed frontend or backend skills for framework-specific patterns.

    2026-07-270 platforms
    Computed 75234,327

    affaan-m/ECC

    coding-standards

    Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.

    2026-07-270 platforms