技能 web-artifacts-builder
📦

web-artifacts-builder

安全 ⚡ 包含脚本⚙️ 外部命令📁 文件系统访问

إنشاء عناصر ويب باستخدام React

也可从以下获取: ZhanlinCui,davila7,Azeem-2,anthropics

يتطلب إنشاء عناصر ويب معقدة في Claude Code إعداد مشروع React، وتثبيت التبعيات، وتجميعها في ملف HTML واحد. تعمل هذه المهارة على أتمتة سير العمل بالكامل sehingga يمكنك التركيز على إنشاء العنصر.

支持: Claude Codex Code(CC)
🥉 74 青铜
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“web-artifacts-builder”。 إنشاء مشروع عنصر React جديد باسم 'analytics-dashboard'

预期结果:

مشروع React + Vite مُهيأ بالكامل مع Tailwind CSS وأكثر من 40 مكون shadcn/ui جاهز للتطوير

正在使用“web-artifacts-builder”。 تجميع المشروع الحالي إلى HTML

预期结果:

ملف bundle.html واحد يحتوي على جميع JavaScript وCSS والتبعيات - جاهز للصق مباشرة في Claude كعنصر

安全审计

安全
v1 • 2/25/2026

Static analysis flagged 48 potential issues, but all are false positives or benign patterns. The skill uses legitimate build tooling (pnpm, Vite, Parcel) for creating React projects with Tailwind CSS. Network URLs point to official documentation (shadcn/ui). Shell commands and filesystem operations are standard development scripts with hardcoded arguments. No malicious intent detected.

4
已扫描文件
659
分析行数
7
发现项
1
审计总数

高风险问题 (1)

LICENSE.txt:61LICENSE.txt:107LICENSE.txt:141LICENSE.txt:145-146LICENSE.txt:186
Static Finding: Weak Cryptographic Algorithm References
Static analyzer flagged 'weak cryptographic algorithm' patterns in LICENSE.txt. These are FALSE POSITIVES - the Apache License 2.0 contains standard legal text about cryptographic patents. No actual cryptographic code exists.
中风险问题 (2)
scripts/init-artifact.sh:7scripts/init-artifact.sh:13scripts/init-artifact.sh:46
Shell Command Execution in Build Scripts
Scripts execute shell commands (pnpm, node, sed, tar). All commands use hardcoded arguments with no user input injection. Standard build tooling.
scripts/init-artifact.sh:230scripts/init-artifact.sh:234scripts/init-artifact.sh:242scripts/init-artifact.sh:250
Node.js Filesystem Operations
Scripts use Node.js fs module to read/write config files (tsconfig.json). Standard project setup pattern.
低风险问题 (1)
LICENSE.txt:4LICENSE.txt:196scripts/init-artifact.sh:283SKILL.md:76
Hardcoded URLs in Documentation
URLs point to official shadcn/ui documentation (ui.shadcn.com) and Apache license (apache.org). Legitimate references.

风险因素

⚡ 包含脚本 (1)
scripts/init-artifact.sh:93
⚙️ 外部命令 (15)
scripts/bundle-artifact.sh:47 scripts/bundle-artifact.sh:1 scripts/init-artifact.sh:7 scripts/init-artifact.sh:13 scripts/init-artifact.sh:46 scripts/init-artifact.sh:1 SKILL.md:12 SKILL.md:14 SKILL.md:29-32 SKILL.md:32-37 SKILL.md:37-50 SKILL.md:50-52 SKILL.md:52-54 SKILL.md:54-56 SKILL.md:56-60
📁 文件系统访问 (5)
scripts/init-artifact.sh:230 scripts/init-artifact.sh:234 scripts/init-artifact.sh:242 scripts/init-artifact.sh:250 scripts/init-artifact.sh:34
审计者: claude

质量评分

45
架构
100
可维护性
87
内容
50
社区
83
安全
100
规范符合性

你能构建什么

إنشاء تصورات بيانات تفاعلية

إنشاء مخططات ورسوم بيانية ولوحات بيانات معقدة باستخدام React ومكونات shadcn/ui. تجميع إلى عنصر HTML للمشاركة.

بناء سير عمل متعدد النماذج

إنشاء نماذج متعددة الخطوات مع إدارة الحالة والتحقق وواجهة مستخدم احترافية باستخدام React وTailwind CSS.

تطوير عروض أنظمة التصميم

إنشاء عروض شاملة لمكونات ووثائق نظام التصميم مع متغيرات متعددة.

试试这些提示

تهيئة مشروع عنصر جديد 
استخدم مهارة web-artifacts-builder لتهيئة مشروع React جديد باسم 'my-dashboard'. إعداد Tailwind CSS ومكونات shadcn/ui.
بناء مكون تفاعلي 
باستخدام مهارة web-artifacts-builder، أنشئ لوحة بيانات تفاعلية مع مخططات وأدوات تصفية وجدول بيانات باستخدام مكونات shadcn/ui.
تجميع ومشاركة العنصر 
استخدم برنامج bundle-artifact.sh النصي لتجميع مشروع React الحالي في ملف HTML واحد يمكنني مشاركته كعنصر.
إضافة مكونات جديدة 
أضف مكون dialogue ونموذج مع التحقق باستخدام react-hook-form وzod إلى المشروع الحالي. تكوين النموذج للتعامل مع إدخال المستخدم.

最佳实践

  • استخدم aliases للمسارات (@/) لاستيراد أنظف عبر المكونات
  • استخدم مكونات shadcn/ui لواجهة مستخدم متسقة ومتسعة
  • اختبر العنصر في المتصفح قبل التجميع للمشاركة النهائية
  • حافظ على منطق المكونات بسيطًا - الحالة المعقدة قد تنتفخ الحزمة

避免

  • تجنب تثبيت حزم npm إضافية بعد الإعداد الأولي - كل واحدة تضيف إلى حجم الحزمة
  • لا تتخطى خطوة اختبار المتصفح - بعض ميزات React تتصرف بشكل مختلف
  • تجنب التبعيات الخارجية المفرطة التي لا يمكن تجميعها في HTML واحد

常见问题

ما هو الحد الأدنى لإصدار Node.js المطلوب؟
مطلوب Node.js 18 أو أعلى. تكتشف المهارة إصدار Node تلقائيًا وتُعدّل توافق Vite.
هل يمكنني استخدام هذه المهارة مع npm أو yarn بدلاً من pnpm؟
تتطلب المهارة حاليًا pnpm. يمكنك تعديل البرامج النصية لاستخدام npm أو yarn إذا لزم الأمر.
ما هو الحد الأقصى لحجم ملف HTML المجموع؟
لا يوجد حد صارم، لكن العناصر التي يزيد حجمها عن 2 ميغابايت قد تكون بطيئة في التحميل في Claude. تعمل المشاريع المعقدة مع العديد من المكونات بشكل أفضل.
هل هذا يعمل مع Claude Code وCodex؟
نعم، تدعم المهارة أدوات claude وcodex وclaude-code.
هل يمكنني إضافة خطوط مخصصة إلى العنصر؟
نعم، أضف استيراد الخطوط إلى index.css قبل التجميع. ملاحظة: الخطوط الخارجية تزيد من حجم الحزمة.
كيف أختبر العنصر قبل مشاركته؟
افتح bundle.html مباشرة في متصفحك بعد تشغيل نص التجميع للتحقق من أنه يعمل بشكل صحيح.

开发者详情

作者

sickn33

许可证

Apache-2.0

仓库

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/web-artifacts-builder

引用

main

文件结构

📁 scripts/

📄 bundle-artifact.sh

📄 init-artifact.sh

📄 shadcn-components.tar.gz

📄 LICENSE.txt

📄 SKILL.md