Claude Code Plugins

Community-maintained marketplace

Feedback

web-artifacts-builder

@defnotwig/My-Portfolioo-
0
0

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.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name web-artifacts-builder
description 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.
license Complete terms in LICENSE.txt

Web Artifacts Builder

To build powerful frontend claude.ai artifacts, follow these steps:

  1. Initialize the frontend repo using scripts/init-artifact.sh
  2. Develop your artifact by editing the generated code
  3. Bundle all code into a single HTML file using scripts/bundle-artifact.sh
  4. Display artifact to user
  5. (Optional) Test the artifact

Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui

Design & Style Guidelines

VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.

Quick Start

Step 1: Initialize Project

Run the initialization script to create a new React project:

bash scripts/init-artifact.sh <project-name>
cd <project-name>

This creates a fully configured project with:

  • ✅ React + TypeScript (via Vite)
  • ✅ Tailwind CSS 3.4.1 with shadcn/ui theming system
  • ✅ Path aliases (@/) configured
  • ✅ 40+ shadcn/ui components pre-installed
  • ✅ All Radix UI dependencies included
  • ✅ Parcel configured for bundling (via .parcelrc)
  • ✅ Node 18+ compatibility (auto-detects and pins Vite version)