Artifacts Builder

composiohq/awesome-claude-pluginsOfficial

This is what you want when you're building a complex Claude artifact that needs React, state management, or shadcn/ui components. It scaffolds a full TypeScript + Vite + Tailwind project, lets you develop normally, then bundles everything into a single HTML file that works as a Claude artifact. The workflow is straightforward: run the init script, build your multi-component app, run the bundle script, and share the resulting file. It comes with 40+ shadcn/ui components pre-installed and handles all the path alias configuration. Skip this for simple single-file artifacts, but it's the right tool when you need proper routing or component libraries.

GitHub stars: 1.7K
last updated: May 1, 2026

View on GitHub

Install

$ npx -y skills add composiohq/awesome-claude-plugins --skill artifacts-builder --agent claude-code

Installs into .claude/skills of the current project.

Files

Artifacts Builder

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

Initialize the frontend repo using scripts/init-artifact.sh
Develop your artifact by editing the generated code
Bundle all code into a single HTML file using scripts/bundle-artifact.sh
Display artifact to user
(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)

SKILL.md on GitHub

Details

Repository: github.com/composiohq/awesome-claude-plugins
Category: Frontend Development
First seen: Jun 11, 2026

web-designcountbot-ai/countbot网页设计与部署。生成精美的单页 HTML 网页（报告、落地页、数据可视化等），支持一键部署到 Cloudflare Pages。使用 Tailwind CSS + Chart.js + Font Awesome 技术栈。当用户要求制作网页、生成报告页面、创建落地页、数据可视化展示、部署网页到线上时使用。0skills.sh installs

plugin-structuredavila7/claude-code-templatesThis skill should be used when the user asks to "create a plugin", "scaffold a plugin", "understand plugin structure", "organize plugin components", "set up plu0skills.sh installs

sap-extension-creatorheshengtao/super-agent-partyCreate Super Agent Party (SAP) extensions. This skill should be used when users want to create, build, or scaffold a new extension for Super Agent Party - inclu0skills.sh installs

yuv-viral-videohoodini/ai-agents-skillsEdit any selfie or screen-share footage into a viral short-form video in YUV.AI's signature style — Apple-style liquid-glass cards (real CSS backdrop-filter), d0skills.sh installs

OpenAI Apps MCPjezweb/claude-skillsBuild ChatGPT apps with MCP servers on Cloudflare Workers. Extend ChatGPT with custom tools and interactive widgets (HTML/JS UI). Use when: developing ChatGPT e0skills.sh installs

artifacts-builderPrat011/awesome-llm-skillsSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for0skills.sh installs

Artifacts Builder

Install

Files

Artifacts Builder

Design & Style Guidelines

Quick Start

Step 1: Initialize Project

Details

More from composiohq/awesome-claude-plugins

Recommended