Skills
.Work. You
Rest

anthropic-web-artifacts-builder

Community

Build complex web artifacts for Claude.

Software Engineering#web development#frontend#react#shadcn/ui#tailwind css#artifact builder
Authordavekilleen
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a robust framework for creating sophisticated, multi-component web artifacts within Claude, enabling rich user interfaces and interactive experiences beyond simple text or single HTML files.

Core Features & Use Cases

  • Project Initialization: Quickly set up a new React project with TypeScript, Vite, Tailwind CSS, and shadcn/ui.
  • Component Integration: Seamlessly use over 40 pre-installed shadcn/ui components.
  • Bundling: Consolidate the entire frontend application into a single, self-contained HTML file for easy sharing.
  • Use Case: Develop an interactive dashboard for project management, complete with data visualization charts, user input forms, and dynamic content updates, all packaged as a single artifact.

Quick Start

Initialize a new artifact project named 'my-dashboard' by running the command bash scripts/init-artifact.sh my-dashboard.

Dependency Matrix

Required Modules

parcel@parcel/config-defaultparcel-resolver-tspathshtml-inline@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/resolvers/zod

Components

scriptsreferences

💻 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: anthropic-web-artifacts-builder
Download link: https://github.com/davekilleen/Dex/archive/main.zip#anthropic-web-artifacts-builder

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.