Does it support TypeScript?

Yes, it initializes a full React + TypeScript environment via Vite for a professional, type-safe development workflow.

How do I share the final result with Claude?

Use the included bundling script to generate a single 'bundle.html' file, which can be shared directly in any Claude conversation.

What makes this different from regular Claude artifacts?

Standard artifacts are often single-file; this skill allows for complex multi-file React development with full component libraries, later bundled into one file.

Do I need to manually install shadcn/ui components?

No, the initialization script comes pre-configured with over 40 shadcn/ui components and their Radix UI dependencies.

Can I use this for simple HTML pages?

While possible, this skill is specifically optimized for complex artifacts requiring state management, routing, or advanced UI components.

Claude Artifacts Builder

Name: Claude Artifacts Builder
Author: ttmouse

byttmouse

•

デザインツール

Builds sophisticated, multi-component Claude.ai artifacts using React, Tailwind CSS, and shadcn/ui for high-quality frontend experiences.

The Artifacts Builder skill streamlines the creation of complex, production-grade frontend interfaces within the Claude.ai ecosystem. It provides a robust workflow for initializing React projects with TypeScript, styling with Tailwind CSS, and integrating over 40 pre-installed shadcn/ui components. Unlike standard single-file generation, this skill manages state, routing, and asset bundling, resulting in a single self-contained HTML file that follows specific design guidelines to avoid generic 'AI-generated' aesthetics for a more professional look.

主な機能

01Single-file HTML bundling using Parcel for easy sharing in conversations

0225 GitHub stars

03Strict design guidelines to prevent repetitive 'AI slop' aesthetics

04Full shadcn/ui integration with 40+ pre-installed components and Radix UI

05Support for complex state management and multi-component architectures

06Automated React + TypeScript + Vite project initialization

ユースケース

01Developing interactive dashboards or data visualization tools within Claude

02Creating multi-step forms or complex UI prototypes using shadcn/ui

03Building self-contained, shareable HTML web applications directly through Claude

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ttmouse/skills artifacts-builder

For use in Claude.ai and ChatGPT

Download Skill