allbeingsfuture/skills@web-artifacts-builder
CommunityCreate single-file interactive React artifacts
AuthorAllBeingsFuture
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Provides a repeatable, automated workflow to scaffold, develop, and bundle complex multi-component frontend artifacts into a single self-contained HTML file that can be shared in conversational AI contexts, eliminating manual bundling and dependency inlining for demos or interactive prototypes.
Core Features & Use Cases
- Project bootstrap: Initializes a React + TypeScript + Vite project preconfigured with Tailwind CSS and shadcn/ui components and path aliases.
- Single-file bundling: Uses Parcel and html-inline to produce bundle.html with all JS, CSS, and assets inlined for easy sharing.
- Opinionated tooling: Installs and configures Parcel, Tailwind, PostCSS, Radix/shadcn components and many UI dependencies to accelerate building interactive Claude-compatible artifacts.
- Use Case: Rapidly produce an interactive demo or assistant-facing frontend (routing, state, UI components) and share it as one HTML artifact in a Claude conversation.
Quick Start
Run the initialization script to scaffold a shadcn-enabled React project and then run the bundling script to produce a single bundle.html ready for sharing.
Dependency Matrix
Required Modules
parcel@parcel/config-defaultparcel-resolver-tspathshtml-inlinevitetailwindcsspostcssautoprefixer@types/nodetailwindcss-animateclass-variance-authorityclsxtailwind-mergelucide-reactnext-themes@radix-ui/react-accordion@radix-ui/react-aspect-ratio@radix-ui/react-avatar@radix-ui/react-checkbox@radix-ui/react-collapsible@radix-ui/react-context-menu@radix-ui/react-dialog@radix-ui/react-dropdown-menu@radix-ui/react-hover-card@radix-ui/react-label@radix-ui/react-menubar@radix-ui/react-navigation-menu@radix-ui/react-popover@radix-ui/react-progress@radix-ui/react-radio-group@radix-ui/react-scroll-area@radix-ui/react-select@radix-ui/react-separator@radix-ui/react-slider@radix-ui/react-slot@radix-ui/react-switch@radix-ui/react-tabs@radix-ui/react-toast@radix-ui/react-toggle@radix-ui/react-toggle-group@radix-ui/react-tooltipsonnercmdkvaulembla-carousel-reactreact-day-pickerreact-resizable-panelsdate-fnsreact-hook-form@hookform/resolverszod
Components
scripts
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: allbeingsfuture/skills@web-artifacts-builder Download link: https://github.com/AllBeingsFuture/AllBeingsFuture/archive/main.zip#allbeingsfuture-skills-web-artifacts-builder Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.