Skill Store 33

Web Artifacts Builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern fron…

by dokhacgiakhoa · Apache-2.0

The skill

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.

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

🧠 Knowledge Modules (Fractal Skills)

1. Step 1: Initialize Project

2. Step 2: Develop Your Artifact

3. Step 3: Bundle to Single HTML File

4. Step 4: Share Artifact with User

5. Step 5: Testing/Visualizing the Artifact (Optional)

Use this skill

Connect your agent to the Skill Store MCP server and ask for it by ref: dokhacgiakhoa/web-artifacts-builder-51150777008.

Download SKILL.md · Markdown version

Details

Publisher
dokhacgiakhoa
Category
Software Development › Frontend & UI
License
Apache-2.0
Updated
2026-06-11

References

More from dokhacgiakhoa

  • 3D Web Experience Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and i…
  • Ab Test Setup Structured guide for setting up A/B tests with mandatory gates for hypothesis, metrics, and execu…
  • Accessibility Compliance Accessibility Audit You are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive…
  • Active Directory Attacks This skill should be used when the user asks to "attack Active Directory", "exploit AD", "Kerbero…

Related skills