web-artifacts-builder suits small frontend prototypes with multiple views, filters, state changes, and component interactions. It creates a React project and packages the result as bundle.html for sharing or display in an environment that supports HTML artifacts. A simple static fragment usually does not need this entire toolchain.
Install and invoke
Send these two commands in the Claude Code chat input, one at a time. They are plugin commands, not shell commands for your operating system. The second installs the official collection containing web-artifacts-builder.
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
In your project conversation, ask Claude to “use web-artifacts-builder” and supply the task or files. The prompt below is an editable starting example. Installing the collection supplies instructions and resources; it does not supply your source material or guarantee that every runtime dependency is installed locally. If the skill is missing, check that its plugin is installed, enabled, and loaded in the current session. Do that before troubleshooting the requested output.
Start without a backend dependency
Use web-artifacts-builder to make a meeting-agenda scheduling prototype.
Include a topic list, owner filter, status changes, and a detail panel.
Use local example data and explain which changes last only for the current page.
Create the project, keep its source, and produce bundle.html.
Do not connect real accounts, deploy a site, or describe sample data as live.
Specify views, state, data sources, and delivery format. Local example data lets you check the information structure first. Shared data and permanent storage require separate design. Say whether state must survive a refresh; bundling a file does not automatically provide persistence.
The initialization script creates a project using React, TypeScript, Vite, Tailwind, and shadcn/ui. Have the agent locate scripts/init-artifact.sh in the installed skill and create a new project rather than overwrite an existing app. Relative script paths in the guide refer to the skill directory, so the same command may fail from an unrelated working directory.
Keep the source and the deliverable distinct
Develop in the generated source files and check the filters, status transitions, and details panel. Then run the bundled build workflow. The project needs a root index.html; scripts/bundle-artifact.sh produces the single HTML deliverable with frontend assets inlined. Keep the source project for future changes and rebuild instead of treating generated HTML as the only maintainable source.
Open the actual bundle before sharing it. Check whether controls change state, how an empty result appears, and whether a narrow screen leaves the main content usable. If the development server works but the bundle fails, inspect asset dependencies, aliases, and build logs instead of repeatedly sharing the same broken output.
Give concrete visual feedback, such as a denser scheduling layout or secondary actions inside the detail view. The skill's chosen stack is a creation workflow, not a reason to replace an existing application's framework. Deliver the HTML, source location, and any remaining network dependencies. If the prototype later connects to an API, design credential handling separately rather than embedding private secrets in a file meant to be shared.
Test the prototype through real actions
For the agenda-planning example, filter by owner and watch the list change, update a status and check the filtered view, then open a detail panel and return. Refresh the page to confirm whether state persists as requested or deliberately returns to sample data. For colleagues outside the development environment, open the generated bundle.html rather than relying only on the Vite server.
If images or fonts disappear after bundling, inspect what the build script embedded and which external URLs still need a network connection. A single HTML file is not a backend or permanent database. If the demo requires real accounts, collaboration, or persistence, separate that product work from the prototype request. Deliver both source project and bundle, and make later changes in source before rebuilding.
Label what is simulated and what is real
An agenda prototype may demonstrate filtering and status changes with local sample data, but “Saved successfully” is misleading without persistence. Ask the agent to state whether data lives only in the current session, browser storage, or a remote service. Show a success state only for the action actually completed. Prepare one full walkthrough for colleagues and explain which controls model an interaction and which preserve data. That makes the prototype useful for design discussion without presenting it as a launched product.
Open the standalone file offline before sharing
“Bundled” does not automatically mean self-contained. One user found that a newer pnpm check failed before Parcel ran, an outdated favicon path could break the build, and font files could remain outside the HTML. Read the build log to separate package-manager, asset-path, and app-code failures. After a successful build, move bundle.html alone to an empty folder, disconnect the network, and check fonts, icons, and interactions.