skills.rest
polaris-dxz
polaris-dxzCOMMUNITY
Explore all skills by this author →
𝕏@xizhidevGitHub

web-artifacts-builder

Bundle React projects into a single self-contained HTML artifact with inlined assets.

1|1|Updated Mar 22, 2026
Search Tags:#html#frontend#react#parcel#artifact#bundle
One-click install
npx skills add https://github.com/polaris-dxz/xclaw --skill web-artifacts-builder-polaris-dxz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/polaris-dxz/xclaw/tree/main/apps/desktop/openclaw-runtime/config/skills/web-artifacts-builder
Command: npx skills add https://github.com/polaris-dxz/xclaw --skill web-artifacts-builder-polaris-dxz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline, and includes scripts (resource) components.

What problem does it solve?

Developers spend time wiring and bundling multi-file front-end projects; this skill bundles and inlines all assets into a portable single HTML artifact ready for Claude.

Core Features & Use Cases

  • Initialize React + Vite projects with Tailwind + shadcn/ui configuration.
  • Bundle the project into a single HTML file with all assets inlined using Parcel and html-inline.
  • Generate self-contained artifacts that can be shared in Claude conversations.

Quick Start

Initialize a new React artifact project with the supplied script, then bundle into a single HTML artifact for sharing.

Frequently Asked Questions about web-artifacts-builder

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

FAQPage Schema
How do I bundle a React app into a single HTML file?▼

Yes, you can use Tailwind and shadcn/ui when bundling React artifacts. The skill initializes projects with these UI stacks and supports modular front-end architectures, inlining all associated styles and scripts into the final single HTML file output.

What is the best way to share a front-end React project in a Claude conversation?▼

The best way to share a front-end React project in a Claude conversation is generating a dependency-inlined single HTML artifact. This skill bundles all assets into a portable file, ensuring the project is self-contained and easily shareable without external resource dependencies.

Do I need Parcel to build a self-contained HTML artifact?▼

Yes, Parcel is required to build a self-contained HTML artifact with this skill. It acts as the core bundler alongside the html-inline package to process the multi-file React project and inline all JavaScript and CSS resources into one output file.

How does inlining JavaScript and CSS into one HTML file work?▼

Inlining JavaScript and CSS into one HTML file works by bundling the modular project assets and embedding them directly within the HTML document. The skill uses Parcel for the initial bundling phase and html-inline to inject all dependencies into a single portable artifact.

Can I initialize a new React project with Tailwind before bundling?▼

A known limitation is that an index.html file must be present in the project, as the skill validates its presence before bundling. Projects missing this entry point will fail to bundle into the single self-contained HTML artifact.

Related Skills

Explore More Software Engineering Skills→
Codcyber101Codcyber101

web-artifacts-builder

Bundle React apps into single HTML files for Claude artifacts.

Community
Advanced
XIYBHKXIYBHK
1

web-artifacts-builder Web 产物构建

Bundle React, TypeScript, and Tailwind UI into a single HTML artifact.

Community
Intermediate
digisurfsomedigisurfsome

web-artifacts-builder

Bundle React, Tailwind, and shadcn/ui components into single HTML artifacts.

Community
Advanced
zzafergokzzafergok
1

markdown-to-html-skill

Convert Markdown documents to HTML using marked.js, pandoc, gomarkdown, or static site generators.

Community
Intermediate