Skip to content
Apiara

Search design skills

Start here
Design & build a websitefrontend-design · Website codeRefine an existing interfaceimpeccable · UI review & refinementsReview web interface guidelinesweb-design-guidelines · Findings with file referencesCreate posters & static artworkcanvas-design · PNG / PDFDesign a presentationpptx · Editable PPTXChoose colors & typographytheme-factory · A theme applied to your workExplore generative artalgorithmic-art · Interactive p5.js artworkCreate video & motionremotion-best-practices · Remotion project & rendered videoImplement a Figma designfigma · UI code in your projectDocument a Stitch design systemdesign-md · DESIGN.mdBuild an interactive web prototypeweb-artifacts-builder · React prototype & bundled HTMLMake a Slack GIF reactionslack-gif-creator · Looping GIF
↑ ↓ Select   ↵ OpenEsc Close
Back to skills

Build an interactive web prototype

web-artifacts-builder · Anthropic

Build React prototypes with multiple components, routing, or state, then bundle the result into a single HTML artifact.

Output
React prototype & bundled HTML
Needs
Node.js 18+, Bash and project dependencies
Download skill

ZIP · 33 KB · Apache-2.0

Install folder: .claude/skills/web-artifacts-builder/

Setup & example
Illustration, not a tested output.

What it does

What to bring
The prototype's screens, interaction flow, sample content, and visual direction.
Requirements
An agent with terminal and file access, Node.js 18 or later, Bash, and network access to install the frontend dependencies.
Keep in mind
The upstream workflow targets Claude HTML artifacts. It is a prototype builder, not a deployed service, backend, or live payment system. Its scripts initialize a project and install dependencies.

Try a design task

Once the skill is loaded, copy the task and adapt it to your brief.

Use web-artifacts-builder in a new prototype folder to build a three-step workshop booking demo: choose a workshop, choose a date, and review the selection. Use sample data and no real payments or submissions. Include back navigation, disabled and empty states, and a mobile layout. Bundle it into one HTML file and show how to open it.
Installation instructions

For Claude's Code / project entry; manage chat and Cowork skills in account settings.

  1. Copy the skill folder, or use the installer

    Extract the ZIP and copy the complete web-artifacts-builder folder into .claude/skills/ in your project.

    Or run this command in your project terminal with Node.js / npx. It gets the author's latest version, which may differ from the download.

    npx skills add anthropics/skills --skill web-artifacts-builder --agent claude-code
    Read the installation docs

  2. Confirm the skill is loaded

    Reopen your tool and check that web-artifacts-builder is available. If it is missing, check the installation location in the upstream docs.

Review the result

  • The bundled HTML opens with the required styles and scripts.
  • The main flow, back navigation, and empty states work.
  • Sample data is clearly marked and no live transactions occur.

Did you complete the task?

Next steps

web-artifacts-builder — Apiara