סקיל Web Artifacts

פקודת התקנה

ההתקנה מתבצעת דרך מנהל החבילות הרשמי של הסקילים בפקודה אחת. הסקיל הוא חבילה פתוחה מהמאגר הרשמי של Anthropic, וכוללת סקריפטי בנייה מקומיים. אפשר להוריד ולבדוק את הקוד דרך הכפתורים שבראש העמוד.

מה הסקיל כולל?

הסקיל מתעד זרימת עבודה לבניית artifact מתקדם: אתחול פרויקט פרונטאנד, פיתוח הרכיבים, אריזה לקובץ HTML יחיד, והצגה למשתמש, עם הנחיות עיצוב לאיכות גבוהה.

קוד הסקיל המלא

---
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
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)

### Step 2: Develop Your Artifact

To build the artifact, edit the generated files. See **Common Development Tasks** below for guidance.

### Step 3: Bundle to Single HTML File

To bundle the React app into a single HTML artifact:
```bash
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**:
- Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
- Creates `.parcelrc` config with path alias support
- Builds with Parcel (no source maps)
- Inlines all assets into single HTML using html-inline

### Step 4: Share Artifact with User

Finally, share the bundled HTML file in conversation with the user so they can view it as an artifact.

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

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.

## Reference

- **shadcn/ui components**: https://ui.shadcn.com/docs/components

מה זה web-artifacts-builder ולמה הסקיל הזה שונה?

web-artifacts-builder פותר מגבלה מוכרת: artifacts ב-claude.ai מצוינים לדברים פשוטים, אבל כשרוצים אפליקציה אמיתית עם כמה מסכים, ניהול מצב ורכיבים מתקדמים, קובץ בודד כבר לא מספיק. הסקיל מאפשר לבנות פרויקט פרונטאנד שלם ואז לארוז אותו בחזרה לקובץ אחד שאפשר להציג כ-artifact.

מה שמייחד אותו הוא הסטאק המלא והאריזה. הסקיל בונה על React ו-TypeScript עם Tailwind ו-shadcn, מה שמאפשר ניהול מצב, ניתוב ורכיבים איכותיים, בדיוק כמו באפליקציה אמיתית. אחר כך הוא אורז את הכול לקובץ HTML יחיד באמצעות סקריפט בנייה מקומי, כך שהתוצאה עדיין מתפקדת כ-artifact בודד. הוא גם כולל הנחיות עיצוב מפורשות שמרחיקות מהמראה הגנרי, כדי שהתוצאה תיראה מקצועית.

ההבדל מורגש ביכולת. במקום הדגמה סטטית, מקבלים כלי אינטראקטיבי מלא בתוך שיחה אחת. בשילוב עם סקיל react-view-transitions אפשר אפילו להוסיף מעברים חלקים, כך שה-artifact מרגיש כמו אפליקציה מלוטשת ולא כמו אבטיפוס.

מה web-artifacts-builder נותן לקלוד קוד?

הסקיל מוסיף לקלוד יכולת להפיק אפליקציות אינטראקטיביות מלאות כ-artifacts, לא רק הדגמות סטטיות, עם סטאק מודרני ואריזה חכמה.

ארבע היכולות הופכות את קלוד למי שמפיק כלים אינטראקטיביים מלאים בתוך שיחה. בעבודות שלי, יצירת artifact מתקדם היא דרך מהירה להדגים רעיון מוצר חי ללקוח, בלי להקים פרויקט שלם.

למי הסקיל הזה מתאים?

מפתחי פרונטאנד: זה הקהל המובהק. הסקיל מאפשר להפיק אפליקציות אינטראקטיביות מלאות כ-artifacts, עם סטאק מוכר ורכיבים איכותיים. השילוב עם סקיל UI/UX Pro Max מבטיח שגם העיצוב ברמה גבוהה.

יזמים ואנשי מוצר: artifact אינטראקטיבי הוא דרך מצוינת להדגים רעיון מוצר חי, בלי להקים פרויקט. הסקיל מאפשר להציג זרימה מלאה ללקוח או למשקיע בתוך שיחה אחת.

יוצרי כלים פנימיים: צוותים שצריכים כלי קטן ואינטראקטיבי, כמו מחשבון או דשבורד מהיר, יכולים להפיק אותו כ-artifact מלא ולשתף בקלות, בלי תהליך פריסה.

מורים ומדגימים: artifact אינטראקטיבי ממחיש רעיון הרבה יותר טוב מתמונה סטטית. גם בעבודות אוטומציה שלי, הדגמה חיה של זרימה עוזרת ללקוח להבין את הערך מיד.

מעצבים שעובדים עם קוד: הסקיל מאפשר להפוך מוקאפ לאפליקציה אינטראקטיבית אמיתית, כך שאפשר לבדוק את חוויית המשתמש ולא רק את המראה הסטטי.

מי שפחות יתאים: artifact פשוט של קובץ בודד או רכיב JSX קטן לא צריך את כל המנגנון הזה. הסקיל מבריק דווקא ב-artifacts מורכבים שדורשים מצב, ניתוב או כמה רכיבים.

איך web-artifacts-builder עזר לי בפרויקטים אמיתיים

ארבעת המקרים מראים שהסקיל מרחיב את מה ש-artifact יכול להיות: לא רק הדגמה סטטית, אלא כלי אינטראקטיבי מלא. היכולת להפיק אפליקציה חיה בתוך שיחה אחת היא דרך מהירה ומשכנעת להדגים רעיונות מוצר.

סיכום

סקיל web-artifacts-builder הוא כלי חזק לכל מי שרוצה להפיק artifacts מתקדמים ב-claude.ai. הוא מאפשר לבנות אפליקציה אמיתית עם React, מצב, ניתוב ורכיבי shadcn, ולארוז אותה לקובץ HTML יחיד, עם הנחיות עיצוב שמבטיחות מראה מקצועי.

אם אתם מתחילים, בקשו מקלוד לבנות artifact אינטראקטיבי עם הסקיל, למשל דשבורד קטן עם כמה תצוגות. תראו איך הוא הופך משיחה אחת לכלי חי שאפשר לשתף. משם, כל רעיון מוצר יכול להפוך להדגמה חיה.

בפוסטים הבאים אמשיך לסקור סקילים שמשדרגים פיתוח פרונטאנד. האתר של דביר נעמן מרכז את כל הכלים, השיטות והליווי שאני מציע לעסקים שרוצים לבנות מוצרים דיגיטליים עם בינה מלאכותית.