shadcn-ui
79ابنِ واجهات shadcn/ui بسرعة أكبر
تحتاج فرق React الحديثة إلى مكونات shadcn/ui متسقة من دون تكرار البحث في الإعداد. ترشد هذه المهارة اختيار المكونات، والتثبيت، وتخصيص السمات، والترحيل، وفحوصات الجودة.
إنشاء أدلة DESIGN.md من مشاريع Stitch
تحتاج فرق التصميم إلى مصدر حقيقة واضح لشاشات متسقة مولّدة بالذكاء الاصطناعي. تحوّل هذه المهارة شاشات Stitch والبيانات الوصفية والأصول المرئية إلى دليل DESIGN.md منظّم.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "design-md" from https://skillstore.io/skills/google-labs-code-design-md.md and its manifest at https://skillstore.io/api/skills/google-labs-code-design-md/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "design-md". حلّل شاشة مجموعة أثاث.
النتيجة المتوقعة:
جارٍ استخدام "design-md". أنشئ إرشادات مطالبات لشاشات Stitch المستقبلية.
النتيجة المتوقعة:
جارٍ استخدام "design-md". لخّص سمة تصميم مشروع.
النتيجة المتوقعة:
Static findings for shell execution, reconnaissance, hardcoded URLs, and screen capture upload are false positives caused by markdown examples, Stitch MCP tool references, design terminology, and a public documentation link. The main security concern is semantic: the skill can enumerate owned Stitch projects and retrieve private HTML and screenshots unless the user scopes the project explicitly.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/google-labs-code-design-md/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/google-labs-code-design-md?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/google-labs-code-design-md?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/google-labs-code-design-md/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/google-labs-code-design-md.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>google-labs-code. (2026). design-md security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/google-labs-code-design-md/audits/6@techreport{google-labs-code-google-labs-code-design-md-2026,
author = {google-labs-code},
title = {design-md security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/google-labs-code-design-md/audits/6},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "design-md security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
- name: "google-labs-code"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/google-labs-code-design-md/audits/6"
identifiers:
- type: other
value: "skillstore:google-labs-code-design-md:audit:6"
description: "Skillstore immutable audit report identifier"
تبقى مهارة كل مؤلف عنصراً مستقلاً قابلاً للتثبيت. يُرتب المتغير الموصى به وفق أدلة Skillstore.
سبب تصدر هذا المتغير
sickn33-design-md
2026-09-09
google-labs-code-design-md
2026-09-09
أنشئ DESIGN.md قابلًا لإعادة الاستخدام من شاشة Stitch موجودة حتى تحافظ الشاشات المستقبلية على النمط نفسه.
امنح Claude أو Codex أو Claude Code مرجع تصميم دقيقًا قبل طلب شاشات واجهة مستخدم جديدة.
لخّص الألوان والطباعة والتباعد وسلوك المكوّنات للفرق التي تحتاج إلى سياق تصميم مشترك.
استخدم design-md لتحليل مشروع Stitch الخاص بي وإنشاء ملف DESIGN.md للشاشة الرئيسية.
استخدم design-md على المشروع [project ID] والشاشة [screen ID]. ركّز على الألوان والطباعة والمكوّنات وقواعد التخطيط.
حلّل شاشة Stitch المحددة واكتب DESIGN.md يمكن للمطالبات المستقبلية استخدامه لإنشاء صفحات متطابقة.
استخدم design-md لاسترجاع HTML شاشة Stitch ولقطة الشاشة وسمة المشروع. أنشئ DESIGN.md مفصلًا يتضمن الأجواء والرموز والمكوّنات والتخطيط وإرشادات المطالبات.
المؤلف
google-labs-codeالترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
1ffa7643651792ccb4bd3b15d924d2c97edff755
حداثة الصيانة
٢٥/٧/٢٠٢٦
الاستخدام
9 تنزيلات · 201 مشاهدات
ابنِ واجهات shadcn/ui بسرعة أكبر
تحتاج فرق React الحديثة إلى مكونات shadcn/ui متسقة من دون تكرار البحث في الإعداد. ترشد هذه المهارة اختيار المكونات، والتثبيت، وتخصيص السمات، والترحيل، وفحوصات الجودة.
بناء مواقع Stitch بشكل تكراري
غالبا ما تفقد عمليات بناء المواقع الكبيرة السياق بين الصفحات والتكرارات. تمنح هذه المهارة Claude وCodex وClaude Code سير عمل قائم على التتابع لإنشاء أعمال المواقع المستندة إلى Stitch ودمجها ومتابعتها.
تحسين مطالبات واجهة مستخدم Stitch
غالبا ما تنتج مطالبات واجهة المستخدم الغامضة شاشات Stitch غير متسقة. تحول هذه المهارة الأفكار الأولية إلى مطالبات منظمة تتضمن سياق نظام التصميم، ومفردات واجهة المستخدم، وأقساما واضحة للصفحات.
إنشاء تصاميم UI باستخدام Stitch
غالبًا ما تفتقر مطالبات التصميم إلى التفاصيل اللازمة للحصول على مخرجات UI متسقة وبجودة إنتاجية. تحوّل هذه المهارة الطلبات التقريبية إلى workflows منظمة لـ Stitch MCP، وملاحظات قابلة لإعادة الاستخدام لنظام التصميم، وأصول تصميم محفوظة.
إنشاء فيديوهات شرح تفصيلي باستخدام Remotion
تحتاج الفرق إلى فيديوهات شرح سريعة لشاشات التطبيقات، لكن التحرير اليدوي بطيء. تحوّل هذه المهارة شاشات Stitch إلى تركيبات Remotion مع انتقالات وطبقات تراكب.
تحويل تصميمات Stitch إلى مكونات React
قد يكون تحويل تصميمات Stitch إلى كود React قابل للصيانة بطيئًا وغير متسق. ترشد هذه المهارة Claude أو Codex أو Claude Code خلال الاسترجاع، وبنية المكونات، وربط الرموز، والتحقق.
إنشاء ميمات باستخدام Memegen
بواسطة softaworks
غالبًا ما تحتاج الفرق إلى فكاهة بصرية سريعة دون فتح أدوات التصميم. تبني هذه المهارة عناوين URL للميمات، وتضمينات Markdown، وتنسيقات الميمات النصية من مطالبة.
Build Accessible Tailwind Interfaces
بواسطة nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
تخطيط تجربة المستخدم قبل البناء
بواسطة pbakaus
غالبًا ما تبني الفرق الواجهات قبل توضيح أهداف المستخدمين والحالات والقيود. توجه هذه المهارة عملية الاكتشاف وتنتج موجز تصميم للتنفيذ.
تصميم نماذج أولية مميزة لواجهات المستخدم
بواسطة tencentcloudbase
غالبا ما تفتقر واجهات الذكاء الاصطناعي العامة إلى اتجاه بصري وتفاصيل واعية بالمنصة. ترشد هذه المهارة Claude وCodex وClaude Code إلى تحديد نية التصميم قبل بناء النماذج الأولية.
تصميم واجهات منتجات ميسّرة الوصول
بواسطة sickn33
غالبًا ما تواجه الفرق صعوبة في تحويل احتياجات المستخدمين إلى واجهات متسقة وميسّرة الوصول. ترشد هذه المهارة البحث، والتدفقات، وأنظمة التصميم، ورموز التصميم، والتسليم.
إنشاء مطالبات أفضل لواجهات Google Stitch
بواسطة sickn33
يمكن أن ينتج Google Stitch تصاميم عامة عندما تفتقر المطالبات إلى التفاصيل. توفر هذه المهارة إرشادات منظمة للمطالبات حول الشاشات، والتدفقات، والأسلوب البصري، وإمكانية الوصول، والتسليم.