$ ~/registry/skill/composiohq-artifacts-builder

SKILL

artifacts-builder

Name: artifacts-builder
Author: Composio

Build complex multi-component web artifacts with React, Tailwind, and shadcn/ui.

Stars

★ 67,763

Source

GitHub

Updated

2026-07-15

// securityCaution

Prompt only, no code
Open source
Community-trusted· 64.9k

Summary

The materials indicate this Skill is fundamentally a prompt/documentation-style workflow for building frontend artifacts, with no declared secrets or remote endpoints. While the README mentions running local scripts and installing frontend dependencies, the overall risk remains low with minor caution due to prompt-only nature, open-source source, and strong community adoption.

CredentialsLow risk

The materials explicitly state that no keys or environment variables are required. There is no request for API tokens, account credentials, or other long-lived secrets, so credential exposure and abuse risk appears low.

Network egressLow risk

No remote endpoints are declared, and the system flags it as prompt-only. Although the README references external docs and mentions installing dependencies, there is no indication that the Skill itself sends user data to third-party services.

Code executionCaution

The README instructs running local shell scripts such as init-artifact.sh and bundle-artifact.sh and performing build/install steps, which is standard local process execution for this type of tool. No system permissions beyond frontend project setup/build are indicated, but actual use should still occur in a controlled environment.

Data accessCaution

Its expected operations include creating a project directory, editing generated code, reading index.html, and writing bundle.html, which are normal read/write actions on local project files. There is no visible request for unrelated directories, sensitive system files, or extra resources, so signs of overbroad access are limited.

Supply chainCaution

The source is an open GitHub repository with strong community adoption (about 64.9k stars), which materially lowers supply-chain risk. However, the license is unspecified, maintenance status is unknown, and the README mentions installing multiple frontend dependencies, so dependency and script review is still advisable.

Recommendations

Review the exact contents of scripts/init-artifact.sh and scripts/bundle-artifact.sh before use.
Run the initialization and bundling workflow in an isolated dev environment or container.
Pin and review npm dependency versions, preferably using reproducible builds.
Before sharing bundle.html, verify that no sensitive data or debug content was accidentally inlined.

Audited by: gpt-5.4 · 2026-06-17

// install

Copy the install command and let the AI configure it · recommended for beginners

Please install the "artifacts-builder" skill from askskill:
1. Download https://raw.githubusercontent.com/ComposioHQ/awesome-claude-skills/master/artifacts-builder/SKILL.md
2. Save it as ~/.claude/skills/artifacts-builder/SKILL.md
3. Reload skills and tell me it's ready

// download

Download SKILL.mdInstall manifest ↗

// docs

Artifacts Builder

To build powerful frontend claude.ai artifacts, follow these steps:

Initialize the frontend repo using scripts/init-artifact.sh
Develop your artifact by editing the generated code
Bundle all code into a single HTML file using scripts/bundle-artifact.sh
Display artifact to user
(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 <project-name>
cd <project-name>

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.