📦

web-artifacts-builder

Name: web-artifacts-builder
Author: ZhanlinCui

مخاطر منخفضة ⚡ يحتوي على سكربتات📁 الوصول إلى نظام الملفات⚙️ الأوامر الخارجية

بناء عناصر React مع مكونات shadcn/ui

متاح أيضًا من: davila7,Azeem-2,anthropics

يتطلب إنشاء عناصر React متعددة المكونات لمحادثات Claude تجميعًا وتكوينًا معقدًا. يقوم هذا الأتمتة بأتمتة إعداد المشروع باستخدام React 18 وTypeScript وTailwind CSS وأكثر من 40 مكونًا من shadcn/ui، ثم تجميع كل شيء في ملف HTML واحد.

يدعم: Claude Codex Code(CC)

🥉 73 برونزي

تنزيل ZIP المهارة

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

فعّل وابدأ الاستخدام

اختبرها

استخدام "web-artifacts-builder". Initialize a project called "task-board" with kanban board layout

النتيجة المتوقعة:

Project 'task-board' created successfully with React 18, TypeScript, Vite, Tailwind CSS 3.4.1, and 40+ shadcn/ui components. Path aliases (@/) configured. Run 'cd task-board && pnpm dev' to start development server.

استخدام "web-artifacts-builder". Bundle the current React project into a single HTML artifact

النتيجة المتوقعة:

Bundle complete! Output: bundle.html (487 KB). All JavaScript, CSS, and assets inlined. Open bundle.html in browser to preview, or share directly in Claude conversations.

التدقيق الأمني

مخاطر منخفضة

v1 • 2/24/2026

Static analysis flagged 39 patterns across 3 files (451 lines). All findings evaluated as false positives: shell commands are legitimate build tooling with hardcoded arguments, filesystem operations modify only project-local configuration files, network references are documentation URLs only, and weak crypto detections are false matches on CSS color values. The skill is a frontend scaffolding tool with no malicious patterns detected.

الملفات التي تم فحصها

451

الأسطر التي تم تحليلها

النتائج

إجمالي عمليات التدقيق

مشكلات منخفضة المخاطر (2)

scripts/bundle-artifact.sh:1-54 scripts/init-artifact.sh:1-323

Shell Script Execution

Build scripts execute shell commands for project scaffolding. All commands use hardcoded arguments with no user input injection vectors. Standard pattern for development tooling.

scripts/init-artifact.sh:228-251

Filesystem Modification

Scripts modify project configuration files (tsconfig.json, tailwind.config.js) using Node.js fs module. Operations are scoped to the created project directory only.

عوامل الخطر

⚡ يحتوي على سكربتات (1)

scripts/init-artifact.sh:93

📁 الوصول إلى نظام الملفات (1)

scripts/init-artifact.sh:230-250

⚙️ الأوامر الخارجية (2)

scripts/bundle-artifact.sh:1-54 scripts/init-artifact.sh:1-323

تم تدقيقه بواسطة: claude

درجة الجودة

الهندسة المعمارية

100

قابلية الصيانة

المحتوى

المجتمع

الأمان

الامتثال للمواصفات

ماذا يمكنك بناءه

مكونات لوحة المعلومات التفاعلية

بناء لوحات معلومات تصور البيانات المعقدة مع مكونات متعددة من shadcn/ui مثل الجداول والبطاقات والرسوم البيانية والفلاتر التي تعمل مباشرة في محادثات Claude.

تطبيقات النموذج متعدد الخطوات

إنشاء تدفقات نماذج متطورة مع التحقق من الصحة وإدارة الحالة ومكونات واجهة المستخدم مثل مربعات الحوار والعلامات تبويب والأكورديون لتجنيات تسجيل المستخدمين.

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

إنشاء مكتبات مكونات شاملة تعرض نظام主题 من shadcn/ui ودعم الوضع الداكن والتصميمات المتجاوبة لتوثيق التصميم.

جرّب هذه الموجهات

البدء السريع - تهيئة المشروع

تهيئة مشروع عنصر ويب جديد называется "dashboard-demo" مع تكوين جميع مكونات shadcn/ui.

بناء جدول بيانات مع فلاتر

إنشاء لوحة إدارة عملاء مع جدول بيانات يعرض الاسم والبريد الإلكتروني والحالة. إضافة عناصر تحكم في التصفية باستخدام مكونات التحديد ومدخلات الصفوف. تضمين ترقيم الصفوف والإجراءات عبر قائمة منسدلة.

نموذج متعدد الخطوات مع التحقق

بناء نموذج تسجيل من 3 خطوات باستخدام مكونات النموذج والتحديد والزر. استخدام react-hook-form مع التحقق من zod. الخطوة الأولى تجمع المعلومات الشخصية، والخطوة الثانية تتعامل مع التفضيلات، والخطوة الثالثة تعرض التأكيد. تضمين مؤشر التقدم.

لوحة معلومات التحليلات مع الوضع الداكن

لوحة معلومات تحليلية مع تبديل الوضع الداكن باستخدام next-themes. تضمين بطاقات المقاييس ومخطط خطي-placeholder وجدول النشاط الأخير ومربع حوار الإعدادات. استخدام مكونات البطاقة والجدول ومربع الحوار والزر والمفتاح مع نظام主题 المناسب من shadcn/ui.

أفضل الممارسات

قم دائمًا بتشغيل init-artifact.sh قبل بدء التطوير للتأكد من تكوين جميع التبعيات والإعدادات بشكل صحيح
استخدم أسماء المسارات المستعارة المقدمة (@/components, @/lib) لاستيرادادات أنظف متسقة مع اتفاقيات shadcn/ui
قم بتشغيل bundle-artifact.sh فقط بعد اكتمال التطوير لتقليل وقت البناء وحجم الإخراج

تجنب

لا تستخدم هذا المهارة لمقتطفات React البسيطة المكونة من ملف واحد - فهي مصممة للتطبيقات متعددة المكونات
تجنب تعديل نصوص البناء ما لم تفهم تكوين تجميع Parcel وحل أسماء المسارات المستعارة
لا تقم بتنفيذ commit لـ bundle.html في التحكم بالإصدار - قم بإنشاء الجديد لكل جلسة مشاركة عنصر

الأسئلة المتكررة

ما هو الفرق بين هذا المهارة وتوليد العناصر البسيطة من React؟

يؤدي هذا المهارة إلى إنشاء تطبيقات React كاملة متعددة المكونات مع أدوات البناء المناسبة، بينما العناصر البسيطة هي مقتطفات JSX مكونة من ملف واحد. استخدم هذا لواجهات المستخدم المعقدة التي تتطلب إدارة الحالة أو التوجيه أو العديد من مكونات shadcn/ui.

هل يمكنني استخدام npm أو yarn بدلاً من pnpm؟

النصوص مكتوبة لـ pnpm. يمكنك يدويًا تكييف الأوامر لـ npm أو yarn، لكن يُنصح بـ pnpm للتوافق مع النصوص المقدمة وتثبيت التبعيات الأسرع.

لماذا ملف HTML المجمّع كبير جدًا؟

يتضمن التجميع مكتبة React بالكامل وجميع مكونات shadcn/ui وTailwind CSS مضمّنة في ملف واحد. يتيح لك هذا الخيار المشاركة كعنصر مستقل بدون تبعيات خارجية.

هل يمكنني إضافة مكونات shadcn/ui مخصصة بعد التهيئة؟

نعم. تكوين components.json معد لإعداد CLI من shadcn/ui. قم بتشغيل 'pnpm dlx shadcn-ui@latest add <component>' لإضافة المزيد من المكونات إلى مشروعك.

هل يعمل هذا المهارة مع وضع مساحة عمل Claude Code؟

نعم. تعمل النصوص ضمن دليل المشروع الحالي. عند استخدام Claude Code، تأكد من تشغيل الأوامر من جذر مشروع العنصر حيث يوجد package.json.

كيف أخصص موضوع Tailwindbeyond ألوان shadcn الافتراضية؟

قم بتحرير tailwind.config.js لإضافة ألوان مخصصة أو خطوط أو توسيع الموضوع. تم تكوينه مسبقًا مع متغيرات CSS من shadcn التي يمكنك تعديلها أو توسيعها.