← Back to Skills Marketplace
hsuyungfeng

Artifacts Builder Pro

by hsuyungfeng · GitHub ↗ · v1.0.0 · MIT-0
cross-platform ⚠ suspicious
278
Downloads
0
Stars
0
Active Installs
1
Versions
Install in OpenClaw
/install artifacts-builder-pro
Description
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use...
README (SKILL.md)

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 \x3Cproject-name>
cd \x3Cproject-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.

Reference

Usage Guidance
What to check before running or installing: 1) The init script expects scripts/shadcn-components.tar.gz (40+ components). That tarball is not present in the skill manifest — ask the author or supply a trusted tarball; otherwise the init script will fail. 2) The scripts install many npm/pnpm packages (including a global pnpm install). Only run them in an isolated environment (a disposable VM, container, or dedicated dev machine) and avoid running as root. 3) Verify the contents of any tarball you provide or that the author supplies; a tarball could contain arbitrary code. 4) Review package.json and lockfiles created during scaffold to inspect third-party dependencies before executing build steps. 5) This skill does not request secrets, but it will download and execute third-party packages at runtime — if you need higher assurance, request the missing tarball source or a reproducible list of package versions (lockfile).
Capability Analysis
Type: OpenClaw Skill Name: artifacts-builder-pro Version: 1.0.0 The skill bundle provides a functional environment for building React artifacts but employs high-risk behaviors such as global package installation ('npm install -g pnpm'), arbitrary shell script execution, and local archive extraction ('tar -xzf') within 'scripts/init-artifact.sh' and 'scripts/bundle-artifact.sh'. While these actions are plausibly necessary for the stated purpose of setting up a frontend development environment, the broad system access and potential for supply chain risks via the opaque 'shadcn-components.tar.gz' meet the threshold for a suspicious classification.
Capability Assessment
⚠ Purpose & Capability
The name/description match the scripts and SKILL.md: this is a project initializer + bundler for React/Tailwind/shadcn. However the init script expects a local tarball (scripts/shadcn-components.tar.gz) with 40+ components to be present; that tarball is not listed in the file manifest. The SKILL.md also claims '40+ shadcn/ui components pre-installed' which is only true if that tarball exists. This mismatch is unexplained and will cause the init script to fail or require the user to supply a missing archive.
ℹ Instruction Scope
SKILL.md instructs the agent/user to run the provided scripts to scaffold and bundle projects. The instructions do not ask for unrelated system files or credentials and limit actions to project setup, editing, bundling, and optional testing. They do, however, instruct using other tools/skills (Playwright/Puppeteer) for testing — that is optional but gives the agent latitude to invoke other tooling. The scripts will run network installs and modify project files (tsconfig, vite.config, .parcelrc).
ℹ Install Mechanism
There is no install spec (instruction-only), so nothing is written by a package installer at skill install time. At runtime the scripts perform many network package operations (npm -g pnpm, pnpm create vite, pnpm install and multiple pnpm installs/add). These are standard for scaffolding a JS project but do result in arbitrary third-party packages being downloaded and executed in the environment. No direct downloads from unknown servers are used in the scripts (aside from package registries), but the missing components tarball would be a local archive expected at runtime.
✓ Credentials
The skill declares no required environment variables, credentials, or config paths. The scripts do not attempt to read secrets or external credentials. Their network actions are limited to package installations from standard registries and extracting a local tarball. No disproportionate credential access is requested.
✓ Persistence & Privilege
The skill is not force-enabled (always: false) and does not request persistent system-wide configuration changes beyond creating/modifying files inside the project it scaffolds. It does install packages into the project and may install pnpm globally; that is normal for a scaffold tool but changes the environment. Autonomous invocation is allowed (platform default) but is not combined with other high privileges here.
How to Use
  1. Make sure OpenClaw is installed (local or Docker)
  2. Run the install command in chat: /install artifacts-builder-pro
  3. After installation, invoke the skill by name or use /artifacts-builder-pro
  4. Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.0
Initial release of artifacts-builder-pro: a toolkit for building advanced claude.ai HTML artifacts with modern frontend technologies. - Provides scripts to initialize, develop, and bundle React + Tailwind + shadcn/ui projects into single HTML artifacts - Includes 40+ shadcn/ui components and full Radix UI support - Uses Vite (React 18 + TypeScript) for development and Parcel for bundling - Ensures projects follow design guidelines to avoid common layout/style issues - Instructions for artifact creation, bundling, and optional testing provided in SKILL.md
Metadata
Slug artifacts-builder-pro
Version 1.0.0
License MIT-0
All-time Installs 1
Active Installs 0
Total Versions 1
Frequently Asked Questions

What is Artifacts Builder Pro?

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use... It is an AI Agent Skill for Claude Code / OpenClaw, with 278 downloads so far.

How do I install Artifacts Builder Pro?

Run "/install artifacts-builder-pro" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is Artifacts Builder Pro free?

Yes, Artifacts Builder Pro is completely free, licensed under MIT-0. You can download, install and use it at no cost.

Which platforms does Artifacts Builder Pro support?

Artifacts Builder Pro is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created Artifacts Builder Pro?

It is built and maintained by hsuyungfeng (@hsuyungfeng); the current version is v1.0.0.

More Skills
self-improving agent
Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Clau...
⬇ 463283 · by pskoett
Skill Vetter
Security-first skill vetting for AI agents. Use before installing any skill from ClawdHub, GitHub, or other sources. Checks for red flags, permission scope, and suspicious patterns.
⬇ 259410 · by spclaudehome
Polymarket
Query Polymarket prediction markets. Check odds, find trending markets, search events, track price movements.
⬇ 232503 · by joelchance
Self-Improving + Proactive Agent
Self-reflection + Self-criticism + Self-learning + Self-organizing memory. Agent evaluates its own work, catches mistakes, and improves permanently. Use when...
⬇ 200423 · by ivangdavila
Github
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
⬇ 191113 · by steipete
ontology
Typed knowledge graph for structured agent memory and composable skills. Use when creating/querying entities (Person, Project, Task, Event, Document), linkin...
⬇ 190156 · by oswalpalash

💬 Comments