varunk130 Web Artifacts Builder
Stack: React 18 + TypeScript + Vite + Parcel + Tailwind CSS + shadcn/ui. Init with init-artifact.sh, develop, bundle to single HTML with bundle-artifact.sh, share as artifact.
Web Artifacts Builder
Build multi-component claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui. For complex artifacts requiring state management or routing.
Web Artifacts Builder by varunk130 · 57cc07c
npx skillmds@latest add varunk130/web-artifacts-builder File contents
---name: web-artifacts-builderdescription: Build multi-component claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui. For complex artifacts requiring state management or routing.---# Web Artifacts BuilderStack: React 18 + TypeScript + Vite + Parcel + Tailwind CSS + shadcn/ui. Init with init-artifact.sh, develop, bundle to single HTML with bundle-artifact.sh, share as artifact.
varunk130/claude-code-skills/tree/main/plugin-skills/document-skills/web-artifacts-builder commit 57cc07c1a8
Frequently asked questions
Run npx skillmds@latest add varunk130/web-artifacts-builder in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Build multi-component claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui. For complex artifacts requiring state management or routing. It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
varunk130 (@varunk130) published this skill. Their other Agent Skills are listed on their SkillMD profile.