skills.rest
underPressue
underPressueCOMMUNITY
Explore all skills by this author →
GitHub

artifacts-builder

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

Updated Jul 9, 2025
Search Tags:#React#frontend#Claude#Tailwind#artifact#bundle
One-click install
npx skills add https://github.com/underPressue/dotfiles --skill artifacts-builder-underpressue
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: artifacts-builder
Source: https://github.com/underPressue/dotfiles/tree/main/.claude/skills/artifacts-builder
Command: npx skills add https://github.com/underPressue/dotfiles --skill artifacts-builder-underpressue

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pnpm, parcel, html-inline, vite, and includes scripts (resource) components.

What problem does it solve?

This Skill bundles frontend projects into a single, self-contained HTML artifact suitable for Claude conversations, eliminating the need for distributing multiple assets.

Core Features & Use Cases

  • Single-file artifact: Bundles React/TypeScript frontends (including Tailwind styles) into one HTML file for easy sharing in Claude.
  • Deterministic bundling: Uses a repeatable process (init, build, inline) to produce an artifact with all dependencies inlined.
  • Use Case: Imagine sharing a complex UI prototype with a client via Claude; this Skill outputs bundle.html ready for preview without external assets.

Quick Start

From the Skill context, run the provided scripts to initialize a project, build, and inline into bundle.html. For example:

  • Initialize a project: bash scripts/init-artifact.sh <project-name>
  • Bundle to a single HTML: bash scripts/bundle-artifact.sh
  • Output: bundle.html

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 and Tailwind frontend into a single HTML file for Claude?▼

Bundling a React and Tailwind frontend into a single HTML file for Claude requires running initialization and build scripts that use Parcel and html-inline to output a portable, self-contained bundle.html.

Can I share a UI component prototype in Claude without external assets?▼

Sharing a UI component prototype in Claude without external assets is possible by processing the project to inline all dependencies and styles into a single, self-contained deterministic HTML file ready for preview.

What dependencies do I need to inline frontend projects into an HTML artifact?▼

Inlining frontend projects into an HTML artifact requires Node.js 18+, pnpm for package management, and Parcel plus html-inline for executing the deterministic build and generating the inlined output.

Does the single-file HTML artifact bundling process support Vite?▼

The single-file HTML artifact bundling process supports Vite as a listed dependency, alongside Parcel and html-inline, to execute the build and deliver a self-contained bundle for Claude workflows.

How do I initialize a frontend project before generating a bundle.html?▼

Initializing a frontend project before generating bundle.html involves running the init-artifact script with your project name to establish the required file structure for the subsequent bundling process.

Related Skills

Explore More Software Engineering Skills→
polyuiislabpolyuiislab
1.2k

web-artifacts-builder

Bundle a multi-file React+TypeScript frontend into a single self-contained HTML artifact.

Community
Intermediate
Speirsy11Speirsy11

web-artifacts-builder

Bundle React, Tailwind, and shadcn/ui projects into a self-contained HTML artifact.

Community
Advanced
andebet07-ossandebet07-oss

web-artifacts-builder

Bundle React, Tailwind, and shadcn/ui projects into a single HTML artifact.

Community
Advanced
GrupoUSGrupoUS
1

web-artifacts-builder

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

Community
Intermediate