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.
The English summary is being prepared. Showing the original description.
See how to installReview 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.
Use Cursor's browser aria snapshots to audit a page for accessibility issues — missing labels, broken tab order, contrast, and ARIA misuse.
The English summary is being prepared. Showing the original description.
Add PostHog analytics to a web application, including event tracking, page views, feature flags, and session replay.
The English summary is being prepared. Showing the original description.
Generate OpenAPI/Swagger documentation for an API, including endpoint schemas, request/response types, and interactive docs UI.
The English summary is being prepared. Showing the original description.
Add authentication to a web application using NextAuth.js (Auth.js), including OAuth providers, session management, and protected routes.
The English summary is being prepared. Showing the original description.
Dockerize an application with a production-ready Dockerfile, docker-compose setup, and .dockerignore.
The English summary is being prepared. Showing the original description.
Set up Playwright end-to-end testing in a project, including test configuration, example tests, and CI integration.
The English summary is being prepared. Showing the original description.