Suite of tools for creating elaborate, multi-component interactive 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.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
To build powerful frontend claude.ai artifacts, follow these steps:
scripts/init-artifact.shscripts/bundle-artifact.shStack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
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.
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:
@/) configuredTo build the artifact, edit the generated files. See Common Development Tasks below for guidance.
To bundle the React app into a single HTML artifact:
bash scripts/bundle-artifact.sh
This creates bundle.html - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.
Requirements: Your project must have an index.html in the root directory.
What the script does:
.parcelrc config with path alias supportFinally, share the bundled HTML file in conversation with the user so they can view it as an artifact.
Note: This is a completely optional step. Only perform if necessary or requested.
To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Record important information to long-term memory for learning user preferences, successful patterns, and error lessons. When you need to remember user preferences, save successful patterns, or record lessons from errors.
日本語の概要は準備中です。原文の説明を表示しています。
Click page elements by CSS selector or text content. When you need to click buttons, links, or select options. PREREQUISITE - must use browser_navigate to open target page first.
日本語の概要は準備中です。原文の説明を表示しています。
Extract page content and element text from current webpage. When you need to read page information, get element values, scrape data, or verify page content.
日本語の概要は準備中です。原文の説明を表示しています。
List all open browser tabs with their index, URL and title. When you need to check what pages are open, manage multiple tabs, or find a specific tab to switch to.
日本語の概要は準備中です。原文の説明を表示しています。
Navigate browser to specified URL to open a webpage. When you need to open webpages or start web automation. PREREQUISITE - must call before browser_click/type operations. Auto-starts browser if not running.
日本語の概要は準備中です。原文の説明を表示しています。
Open new browser tab and navigate to URL (keeps current page open). When you need to open additional page without closing current, or multi-task across pages. PREREQUISITE - must confirm browser is running first.
日本語の概要は準備中です。原文の説明を表示しています。