مجموعة أدوات لإنشاء عناصر HTML معقدة ومتعددة المكونات claude.ai باستخدام تقنيات الويب الأمامية الحديثة (React وTailwind CSS وshadcn/ui). مناسب للعناصر المعقدة التي تتطلب إدارة الحالة، أو التوجيه، أو مكونات shadcn/ui - وليس لعناصر HTML/JSX البسيطة ذات الملف الواحد.
ثبّت مهارة الذكاء الاصطناعي web-artifacts-builder بسرعة في بيئة التطوير لديك عبر سطر الأوامر
المصدر: leastbit/claude_skills_zh-cn.
技术栈: React 18 + TypeScript + Vite + Parcel (打包) + Tailwind CSS + shadcn/ui
这将创建 bundle.html —— 一个包含所有内联 JavaScript、CSS 和依赖项的自包含 artifact。此文件可以直接作为 artifact 在 Claude 对话中分享。
要测试/预览 artifact，请使用可用工具（包括其他 Skill 或内置工具如 Playwright 或 Puppeteer）。通常情况下，避免预先测试 artifact，因为这会增加请求与看到成品 artifact 之间的延迟。如果用户要求或出现问题，请在展示 artifact 后再进行测试。
مجموعة أدوات لإنشاء عناصر HTML معقدة ومتعددة المكونات claude.ai باستخدام تقنيات الويب الأمامية الحديثة (React وTailwind CSS وshadcn/ui). مناسب للعناصر المعقدة التي تتطلب إدارة الحالة، أو التوجيه، أو مكونات shadcn/ui - وليس لعناصر HTML/JSX البسيطة ذات الملف الواحد. المصدر: leastbit/claude_skills_zh-cn.
حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.
npx skills add https://github.com/leastbit/claude_skills_zh-cn --skill web-artifacts-builderمجموعة أدوات لإنشاء عناصر HTML معقدة ومتعددة المكونات claude.ai باستخدام تقنيات الويب الأمامية الحديثة (React وTailwind CSS وshadcn/ui). مناسب للعناصر المعقدة التي تتطلب إدارة الحالة، أو التوجيه، أو مكونات shadcn/ui - وليس لعناصر HTML/JSX البسيطة ذات الملف الواحد. المصدر: leastbit/claude_skills_zh-cn.
افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/leastbit/claude_skills_zh-cn --skill web-artifacts-builder بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw
https://github.com/leastbit/claude_skills_zh-cn