Are there specific system requirements?

The skill requires Node 18 or higher to manage the Vite and Parcel build processes effectively.

What is 'AI slop' and how does this skill avoid it?

AI slop refers to repetitive design patterns like purple gradients and centered layouts. This skill provides specific design guidelines to ensure artifacts look unique and professional.

How does this differ from standard Claude artifacts?

Standard artifacts are typically single-file HTML/JSX; this skill enables a full local development workflow with React, TypeScript, and professional components that are then bundled into a single file.

Does this skill include pre-installed UI components?

Yes, the initialization script automatically sets up over 40 shadcn/ui components and all necessary Radix UI dependencies.

Which bundling technology does it use?

It uses Parcel for building and html-inline to inject all JavaScript and CSS directly into a single HTML file for easy sharing.

React Web Artifacts Builder

Name: React Web Artifacts Builder
Author: Daisuke134

byDaisuke134

•

디자인 도구

Builds sophisticated, multi-component React artifacts for Claude.ai using modern frontend frameworks and shadcn/ui.

This skill provides a specialized workflow for creating production-quality Claude.ai HTML artifacts that transcend basic scripts. It automates the initialization of a modern React and TypeScript environment, integrates over 40 pre-installed shadcn/ui components, and manages a complex Parcel-based bundling process to produce a single, self-contained HTML file. It is specifically designed for developers needing robust state management, routing, and professional design systems while following strict guidelines to avoid generic 'AI-generated' aesthetics.

주요 기능

01Single-file HTML bundling using Parcel and html-inline

023 GitHub stars

03Pre-integrated library of 40+ shadcn/ui components and Radix UI

04Anti-AI-slop design guidelines for professional UI aesthetics

05Built-in support for Tailwind CSS and advanced path aliasing

06Automated initialization of React 18 + TypeScript environments

사용 사례

01Building interactive dashboards with complex state and data visualization

02Creating multi-page prototypes with internal routing inside a single artifact

03Developing high-fidelity UI components that require professional design systems

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add daisuke134/anicca.ai web-artifacts-builder

For use in Claude.ai and ChatGPT

Download Skill