Skills
.Work. You
Rest

tools-artifacts

Community

Craft Claude artifacts with frontend tooling.

Software Engineering#frontend#react#tailwind#bundling#artifact#claude-ai
Authoraussiegingersnap
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill enables developers to create complex Claude.ai HTML artifacts using a modern frontend stack (React, Tailwind, shadcn/ui), bridging from project initialization to a bundled, shareable artifact.

Core Features & Use Cases

  • Initialize a new artifact project with a standardized starter using scripts/init-artifact.sh.
  • Develop and iterate on artifacts by editing generated source files.
  • Bundle the artifact into a single HTML file with scripts/bundle-artifact.sh for easy sharing in Claude.
  • Test and verify the artifact locally before distribution.

Quick Start

Initialize a new artifact project with bash scripts/init-artifact.sh <project-name>, then bundle it with scripts/bundle-artifact.sh and share bundle.html.

Dependency Matrix

Required Modules

parcel@parcel/config-defaultparcel-resolver-tspathshtml-inline

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: tools-artifacts
Download link: https://github.com/aussiegingersnap/cursor-skills/archive/main.zip#tools-artifacts

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.