skills.rest
gotar
gotarCOMMUNITY
Explore all skills by this author →
Website𝕏@oskarszrajerGitHub

web-artifacts-builder

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

26|1|Updated Jan 6, 2026
Search Tags:#React#frontend#Claude#shadcn/ui#Tailwind#artifact#bundle
One-click install
npx skills add https://github.com/gotar/opencode-config --skill web-artifacts-builder-gotar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-artifacts-builder
Source: https://github.com/gotar/opencode-config/tree/main/skills/web-artifacts-builder
Command: npx skills add https://github.com/gotar/opencode-config --skill web-artifacts-builder-gotar

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill enables building and bundling complex Claude AI artifacts built with React, Tailwind, and shadcn/ui into a portable single HTML artifact.

Core Features & Use Cases

  • Artifact scaffolding and initialization via scripts/init-artifact.sh
  • Bundle to a single HTML using scripts/bundle-artifact.sh
  • Tailwind + shadcn/ui integration with path aliases and Vite-based workflow
  • Use Case: share self-contained Claude artifacts in conversations as standalone HTMLs

Quick Start

Initialize a new artifact project with scripts/init-artifact.sh <project-name>. Then navigate into the project, develop your artifact, and run scripts/bundle-artifact.sh to generate bundle.html. Use the resulting bundle.html to share a self-contained Claude artifact.

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

To bundle a React and Tailwind project into a single HTML file, run scripts/bundle-artifact.sh. This script compiles the Vite-based project and inlines all assets to produce a portable bundle.html file for standalone sharing.

Can I use shadcn/ui components in a self-contained HTML artifact?▼

Yes, you can use shadcn/ui components in a self-contained HTML artifact. The skill scaffolds projects with Tailwind and shadcn/ui integration, supporting path aliases and rich UI components before bundling everything into one HTML.

What is the best way to share complex frontend Claude artifacts in a conversation?▼

The best way to share complex frontend Claude artifacts is to compile them into a single portable HTML. This skill bundles React, Tailwind, and state management features into one standalone bundle.html file for direct conversational sharing.

Does this bundling process require a specific Node.js project setup?▼

Yes, the bundling process requires a Node.js tooling setup with an existing index.html file. You must first initialize the project environment using scripts/init-artifact.sh before developing and bundling the artifact.

Why do I need Vite and Parcel dependencies for HTML bundling?▼

You need Vite and Parcel dependencies for HTML bundling because Vite manages the development workflow and path aliases, while Parcel and html-inline compile the React build into a single self-contained HTML file.

Can I include state management and routing in a bundled HTML artifact?▼

Yes, you can include state management and routing in a bundled HTML artifact. The skill targets complex React-based projects, allowing you to develop rich applications with routing and then bundle them into one portable file.

Related Skills

Explore More Software Engineering Skills→
daxiangnaoyangdaxiangnaoyang
1

web-artifacts-builder

Bundle React-based HTML artifacts with Tailwind CSS and shadcn/ui into a single file.

Community
Advanced
zmrezmre
1

web-artifacts-builder

Bundle React and TypeScript frontend projects into a single HTML artifact.

Community
Intermediate
riethmayerriethmayer
2

web-artifacts-builder

Bundle React and shadcn/ui projects into single HTML artifacts.

Community
Advanced
zircotezircote
3

artifacts-builder

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

Community
Advanced