Build complex interactive artifacts for claude.ai with React, Tailwind CSS, and shadcn/ui. Start from a configured project, develop interfaces with state management or navigation, and bundle the result into one shareable HTML file.
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.
Review the instructions the agent will receive before you install.
To build powerful frontend claude.ai artifacts, follow these steps:
scripts/init-artifact.shscripts/bundle-artifact.shStack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
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.
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:
@/) configuredTo build the artifact, edit the generated files. See Common Development Tasks below for guidance.
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:
.parcelrc config with path alias supportFinally, share the bundled HTML file in conversation with the user so they can view it as an artifact.
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.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Find Claude Academy learning resources that closely match questions about using Claude, its features, or team adoption. It supplements direct answers with a small selection of relevant courses, tutorials, worked examples, or product learning hubs.
Create original generative art with p5.js, using particles, mathematical rules, and controlled randomness. Explore variations through interactive controls, reproduce results with a seed value, and save the artwork as a PNG.
Apply Anthropic's brand colors and typography to visual materials. The skill specifies heading and body fonts, background-aware text colors, and accents for shapes, with fallback fonts when Poppins and Lora are unavailable.
Create original posters and static artwork by first defining a visual direction, then expressing it through color, shapes, spacing, and restrained text. Deliverables include PNG or PDF artwork and a Markdown document explaining the design philosophy.
Guides implementation and maintenance of Claude applications using language-specific references and official SDKs, the libraries used to call the API. Covers tool integration, streaming responses, model migration, cost reviews, prompt audits, and evaluation workflows.
Add two or three specific follow-up questions after actionable advice, plans, estimates, or analysis. The questions help users examine facts, reasoning, and missing context before acting, with clear exclusions and a limit of once per conversation.