skills.rest
limaon
limaonCOMMUNITY
Explore all skills by this author →
GitHub

artifacts-builder

Build a React + Vite project and inline assets into a single HTML file.

Updated Jul 8, 2022
Search Tags:#React#single-file#Claude.ai#artifact#bundle#Parcel
One-click install
npx skills add https://github.com/limaon/dotfiles --skill artifacts-builder-limaon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: artifacts-builder
Source: https://github.com/limaon/dotfiles/tree/main/.config/opencode/skills/artifacts-builder
Command: npx skills add https://github.com/limaon/dotfiles --skill artifacts-builder-limaon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline.

What problem does it solve?

This Skill automates the creation of self-contained Claude.ai artifacts by building a React-based project and inlining assets into a single HTML file for easy sharing in Claude conversations.

Core Features & Use Cases

  • Build a portable React + Vite project into a single, self-contained HTML artifact suitable for Claude interactions.
  • Initialize, develop, bundle, and test artifacts with the provided scripts to streamline artifact production.
  • Use Case: Rapidly generate a Claude-ready artifact from a project and share a single HTML file in a chat.

Quick Start

Run the script to create a new artifact project: bash scripts/init-artifact.sh <project-name>, then navigate to the new folder and run bash scripts/bundle-artifact.sh to produce bundle.html ready for sharing.

Frequently Asked Questions about artifacts-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I bundle a React project into a single HTML file for Claude.ai?▼

To bundle a React project into a single HTML file for Claude.ai, the Skill uses Parcel to compile the project and inline all assets, producing a self-contained bundle.html ready for sharing.

What is a self-contained Claude.ai artifact?▼

A self-contained Claude.ai artifact is a single HTML file with all React components and assets inlined, allowing portable, dependency-free sharing directly within Claude conversations.

Do I need pnpm installed to build Claude artifacts?▼

Yes, pnpm is required to install the dev dependencies needed for building Claude artifacts, which include Parcel, parcel-resolver-tspaths, and html-inline for bundling.

How do I initialize and build an artifact from a React project?▼

To initialize and build an artifact, run scripts/init-artifact.sh to create the project, then run scripts/bundle-artifact.sh to compile the React code into a bundle.html file.

Why does my React artifact bundle require an index.html at the project root?▼

An index.html at the project root is required because it serves as the entry point for Parcel to resolve the React application structure and inline assets during bundling.

Can I use Vite instead of Parcel for inlining React assets into one file?▼

This Skill specifically configures Parcel with html-inline to handle the inlining of React assets into a single file, rather than relying on Vite's native build processes.

Related Skills

Explore More Software Engineering Skills→
michaeldubumichaeldubu

artifacts-builder

Bundle React/TypeScript projects into single HTML artifacts for Claude.ai.

Community
Advanced
YrzheYrzhe
10

web-artifacts-builder

Bundle React-based Claude artifacts into a single HTML file.

Community
Advanced
archubbuckarchubbuck
17

web-artifacts-builder

Bundle React and Vite projects into a single HTML artifact.

Community
Advanced
underPressueunderPressue

artifacts-builder

Bundle frontend projects into a single self-contained HTML artifact.

Community
Advanced