Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
The artifacts-builder skill is designed to facilitate the creation of sophisticated, multi-component HTML artifacts for claude.ai, leveraging modern frontend technologies such as React, Tailwind CSS, and shadcn/ui. This skill addresses the complexities involved in developing intricate artifacts that require advanced features like state management and routing, making it unsuitable for simpler, single-file HTML/JSX artifacts. By providing a structured approach to artifact creation, it streamlines the development process and enhances the overall user experience in claude.ai environments.
You can initialize a new project by running the command `bash scripts/init-artifact.sh <project-name>` followed by `cd <project-name>`.
The skill utilizes React 18, TypeScript, Vite for development, and Parcel for bundling, along with Tailwind CSS and shadcn/ui components.
Your project must contain an `index.html` file in the root directory to successfully bundle the artifact.
Testing the artifact is optional and can be done using tools like Playwright or Puppeteer if necessary.
Yes, to avoid 'AI slop', it's important to steer clear of excessive centered layouts, uniform rounded corners, purple gradients, and the Inter font.
Quick Setup:
.claude/skills/Repository
ComposioHQ/awesome-claude-skills