How does this help avoid 'AI slop' in designs?

The skill includes specific design guidelines to avoid overused AI patterns like centered layouts, purple gradients, and uniform rounded corners, focusing instead on professional UI/UX.

Does it support shadcn/ui components?

Yes, it comes with over 40 shadcn/ui components pre-installed and configured with Tailwind CSS and path aliases.

What is the primary tech stack used?

The builder uses React 18, TypeScript, Vite for the development environment, and Parcel for final bundling.

How do I share the final result with a user?

The bundling script generates a single 'bundle.html' file. Once generated, you share this file in the conversation so Claude can render it as a rich artifact.

What makes this different from standard Claude artifacts?

Standard artifacts are usually simple single-file HTML or JSX. This skill allows for full React projects with multiple files, state management, and professional libraries to be bundled into a single file for the Claude interface.

Advanced Web Artifacts Builder

Name: Advanced Web Artifacts Builder
Author: claudiodearaujo

byclaudiodearaujo

デザインツール

Builds sophisticated, multi-component React artifacts for Claude.ai using modern frontend stacks like shadcn/ui and Tailwind CSS.

概要

The Web Artifacts Builder is a comprehensive suite designed to elevate the creation of interactive content within Claude.ai. Unlike basic single-file outputs, this skill enables developers to build production-grade React applications complete with state management, routing, and a pre-configured shadcn/ui component library. It automates the entire lifecycle—from project initialization and development to bundling everything into a single, self-contained HTML artifact—enabling the creation of high-performance web experiences that avoid common AI-generated design tropes.

主な機能

Pre-configured shadcn/ui library with 40+ components and Radix UI
Built-in anti-'AI slop' design guidelines for professional aesthetics
Smart bundling into a single, portable HTML file using Parcel and html-inline
Automatic project initialization with React 18, TypeScript, and Vite
Support for complex application features like state management and routing
0 GitHub stars

ユースケース

Creating high-fidelity UI prototypes using standardized design systems and modern CSS frameworks
Developing data-heavy web applications that require modular component structures and professional styling
Building complex interactive dashboards with nested state and routing for Claude conversations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/izacenter web-artifacts-builder

For use in Claude.ai and ChatGPT

Download Skill

GitHub

概要