artifacts-builder
CommunityBuild advanced Claude UI artifacts.
AuthorAizenvoltPrime
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This skill helps teams create sophisticated frontend artifacts (HTML/CSS/JS) using modern stacks like React, Tailwind, and shadcn/ui, and bundle them into a single HTML artifact.
Core Features & Use Cases
- Frontend scaffolding: boilerplate setup for React + TypeScript projects
- End-to-end bundling: bundle code into a single HTML artifact with inline assets
- Design guidelines: guidance on visuals and avoiding AI slop
- Deployment-ready outputs: ready-to-share artifacts for Claude conversations
Quick Start
Initialize a new artifact project named 'my-artifact', then bundle to bundle.html.
Dependency Matrix
Required Modules
pnpmnodevitetailwindcssparcelhtml-inlinereacttypescriptplaywrightsharp
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: artifacts-builder Download link: https://github.com/AizenvoltPrime/claude-compass/archive/main.zip#artifacts-builder Please download this .zip file, extract it, and install it in the .claude/skills/ directory.