Is shadcn/ui included by default?

Yes, the skill comes pre-configured with the shadcn/ui theming system and over 40 components, including Radix UI dependencies.

How do I share the finished artifact with a user?

After development, you run the provided bundling script which generates a self-contained 'bundle.html' file that can be displayed directly in the Claude conversation.

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

'AI slop' refers to generic design choices like purple gradients and excessive centering; this skill includes specific CSS and layout guidelines to ensure a professional, unique look.

How does this differ from standard Claude artifacts?

While standard artifacts are often simple single-file scripts, this skill enables a full React/TypeScript ecosystem, allowing for complex dependencies and professional UI libraries to be bundled into a single file.

Does it require manual configuration for bundling?

No, the skill uses Parcel and custom scripts to automatically handle path aliases, dependency inlining, and asset optimization into a single HTML file.

Professional Artifacts Builder

Name: Professional Artifacts Builder
Author: micsapp

bymicsapp

0•

デザインツール

Builds sophisticated, multi-component React artifacts for Claude.ai using modern frontend stacks and professional design systems.

The Artifacts Builder skill provides a robust framework for creating high-fidelity, single-file web applications within the Claude.ai environment. It moves beyond simple HTML snippets by offering a complete development workflow including automated project initialization, TypeScript support, and pre-configured access to over 40 shadcn/ui components. This skill is specifically designed to handle complex state management and routing while enforcing professional design guidelines that avoid generic AI-generated aesthetics, ensuring the final output looks like a production-grade product.

主な機能

01Pre-integrated shadcn/ui component library and Tailwind CSS styling

02One-click bundling of all dependencies into a single, portable HTML file

03Automated initialization of React 18 and TypeScript projects via Vite

04Built-in design guidelines to prevent common AI-generated UI patterns

05Support for complex application logic including state management and routing

060 GitHub stars

ユースケース

01Developing professional prototypes and internal tools directly within Claude

02Creating interactive data dashboards with complex UI controls and state

03Building feature-rich educational simulations or interactive documentation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add micsapp/micstec-skills artifacts-builder

For use in Claude.ai and ChatGPT

主な機能

01Pre-integrated shadcn/ui component library and Tailwind CSS styling

02One-click bundling of all dependencies into a single, portable HTML file

03Automated initialization of React 18 and TypeScript projects via Vite

04Built-in design guidelines to prevent common AI-generated UI patterns

05Support for complex application logic including state management and routing

060 GitHub stars

ユースケース

01Developing professional prototypes and internal tools directly within Claude

02Creating interactive data dashboards with complex UI controls and state

03Building feature-rich educational simulations or interactive documentation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add micsapp/micstec-skills artifacts-builder

For use in Claude.ai and ChatGPT