--- title: "artifacts-builder by composiohq · skilld" canonical_url: "https://skilld.dev/gh/composiohq/awesome-claude-skills" meta: description: "Builds multi-component React artifacts for claude.ai using React 18, TypeScript, Tailwind CSS, and shadcn/ui, then bundles them into a single HTML file.… From composiohq/awesome-claude-skills." "og:description": "Builds multi-component React artifacts for claude.ai using React 18, TypeScript, Tailwind CSS, and shadcn/ui, then bundles them into a single HTML file.… From composiohq/awesome-claude-skills." "og:title": "artifacts-builder by composiohq" "twitter:description": "Builds multi-component React artifacts for claude.ai using React 18, TypeScript, Tailwind CSS, and shadcn/ui, then bundles them into a single HTML file.… From composiohq/awesome-claude-skills." "twitter:title": "artifacts-builder by composiohq" --- ` [All skills](https://skilld.dev/skills) [![composiohq avatar](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fcomposiohq.png%3Fsize%3D96)](https://skilld.dev/gh/composiohq) # **/artifacts-builder** [@12730bf](https://github.com/ComposioHQ/awesome-claude-skills/commit/12730bfb9f50d30db811732949b82e260f6ac25a "Your agent reads SKILL.md at commit 12730bf") by [Composio](https://skilld.dev/gh/composiohq)· [composiohq](https://skilld.dev/gh/composiohq)/ [awesome-claude-skills](https://skilld.dev/gh/composiohq/awesome-claude-skills)·76k stars 8,879 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. - 4 files - 33.7 KB - License - Updated last year - [GitHub](https://github.com/ComposioHQ/awesome-claude-skills/blob/12730bfb9f50d30db811732949b82e260f6ac25a/artifacts-builder/SKILL.md "View SKILL.md on GitHub") - [2 warnings](#third-party-checks "Third-party checks: 2 warnings · 5 checks · Risk SAFE") ## SKILL.md 3 KB **≈77** tokens always: the name and description. **≈677** when used: this file. ## 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 cd ``` 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 - **shadcn/ui components**: https://ui.shadcn.com/docs/components Source: [SKILL.md on GitHub](https://github.com/ComposioHQ/awesome-claude-skills/blob/12730bfb9f50d30db811732949b82e260f6ac25a/artifacts-builder/SKILL.md) ## Third-party checks
2 warnings16d5 checks · Risk SAFE - Gen Agent Trust Hub16d The skill provides a set of automation helper scripts designed to initialize and bundle complex React frontend codebases using modern standard web development utilities like Vite, Tailwind CSS, shadcn/ui, and Parcel. No critical malicious behaviors, exfiltration, prompt injections, or unsafe dynamic commands were identified. - Socket16d 2 alerts: gptAnomaly - Snyk16d Risk: LOW · No issues - Runlayer7mo 4/4 files flagged - ZeroLeaks5mo Score: 93/100 · 2 sections analyzed
## Provenance [Signed by skilld at 12730bf.](https://github.com/ComposioHQ/awesome-claude-skills/commit/12730bfb9f50d30db811732949b82e260f6ac25a "12730bfb9f50d30db811732949b82e260f6ac25a") This ties the file your Agent reads to that commit on GitHub. It does not review the instructions. Last checked against GitHub 2 months ago. Activeupdated last year ## Topics - [React](https://skilld.dev/frameworks/react "React components, hooks, state mgmt") - [TypeScript](https://skilld.dev/skills/tag/typescript "Type-heavy workflows, generics, type audits") - [Frontend](https://skilld.dev/skills/tag/frontend "UI frameworks, component work, CSS, design systems") - tailwind - shadcn-ui - vite - artifacts - bundling - parcel ## README badge ![README badge for composiohq/awesome-claude-skills](https://skilld.dev/b/composiohq/awesome-claude-skills?theme=light&label=0) ## What it does Builds multi-component React artifacts for claude.ai using React 18, TypeScript, Tailwind CSS, and shadcn/ui, then bundles them into a single HTML file. Targets complex interactive UIs with state management or component libraries, not simple single-file HTML artifacts. Generated from the current SKILL.md. ## Frequently asked
What frontend frameworks and libraries does this skill support? React 18 with TypeScript, Vite, Tailwind CSS, and shadcn/ui. The skill bundles these into a single HTML file for use as a Claude artifact.
Can I use this for simple HTML or single-file artifacts? No. This skill is designed for complex artifacts that require state management, routing, or shadcn/ui components. Simple single-file HTML/JSX artifacts do not need this workflow.
Does the bundled artifact require a build step to run? No. The \`bundle-artifact.sh\` script outputs a self-contained \`bundle.html\` file with all JavaScript, CSS, and dependencies inlined — it runs directly in the browser without additional setup.
What happens if I don't have Node 18 or higher? The initialization script auto-detects your Node version and pins the appropriate Vite version for compatibility.
Can I test the artifact before sharing it? Yes, but it is optional. The skill supports testing with tools like Playwright or Puppeteer if needed, though the documentation recommends sharing the artifact first and testing later if issues arise.
Generated from the current SKILL.md. These answers refresh after source changes. ## Related skills - - - - - -