تحويل التصاميم إلى كود FSD Tailwind
غالبًا ما تؤدي عملية تسليم التصميم إلى كسر البنية المعمارية، والرموز، وإمكانية الوصول. ترشد هذه المهارة Claude وCodex وClaude Code إلى تحويل شاشات Figma أو Pencil المحددة إلى كود Tailwind متعدد الطبقات.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "figma-pencil-fsd-tailwind4" from https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4.md and its manifest at https://skillstore.io/api/skills/johnwayneeee-figma-pencil-fsd-tailwind4/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "figma-pencil-fsd-tailwind4". إطار لوحة معلومات Figma محدد يحتوي على شريط جانبي، وقائمة عناصر، وحالة فارغة، وإجراء أساسي.
النتيجة المتوقعة:
جارٍ استخدام "figma-pencil-fsd-tailwind4". ملف Pencil يحتوي على شاشة دفع واحدة وعدة عناصر تحكم قابلة لإعادة الاستخدام.
النتيجة المتوقعة:
جارٍ استخدام "figma-pencil-fsd-tailwind4". مكون مولد يمزج منطق المسارات، والمكونات الأساسية، وبيانات المجال، والإجراءات التفاعلية.
النتيجة المتوقعة:
The static external-command findings are false positives caused by Markdown inline code, paths, layer names, and HTML examples. The hardcoded URL is not automatic network activity, but the skill includes a low-severity third-party recommendation that can steer users outside the requested task. No prompt injection, credential access, or data exfiltration intent was found.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/johnwayneeee-figma-pencil-fsd-tailwind4/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/johnwayneeee-figma-pencil-fsd-tailwind4.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>JohnWayneeee. (2026). figma-pencil-fsd-tailwind4 security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4/audits/5@techreport{johnwayneeee-johnwayneeee-figma-pencil-fsd-tailwind4-2026,
author = {JohnWayneeee},
title = {figma-pencil-fsd-tailwind4 security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4/audits/5},
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: "figma-pencil-fsd-tailwind4 security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "JohnWayneeee"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/johnwayneeee-figma-pencil-fsd-tailwind4/audits/5"
identifiers:
- type: other
value: "skillstore:johnwayneeee-figma-pencil-fsd-tailwind4:audit:5"
description: "Skillstore immutable audit report identifier"
حوّل إطار Figma واحدًا محددًا إلى واجهة React متعددة الطبقات باستخدام رموز Tailwind CSS v4 وحالات قابلة للوصول.
قارن متغيرات Figma أو Pencil بنظام الرموز الحالي قبل إضافة أي قيم جديدة.
قسّم مكونًا مولدًا أحادي البنية إلى طبقات shared وentities وfeatures وwidgets وpages وapp.
استخدم هذه المهارة لتحويل إطار Figma المحدد إلى React باستخدام Tailwind CSS v4. أولًا اسرد الرموز، والمكونات، وطبقات FSD، وحالات إمكانية الوصول. ثم نفّذ الإطار المحدد فقط واشرح أي افتراضات.
استخدم هذه المهارة مع ملف Pencil المحلي لشاشة واحدة. افحص المتغيرات، والمكونات القابلة لإعادة الاستخدام، واتجاه التخطيط، والأصول. أنتج خطة قصيرة، ثم أنشئ كود Tailwind متعدد الطبقات يتبع عقد المشروع.
راجع واجهة المستخدم المولدة وفقًا لهذه المهارة. تحقق من اتجاه استيراد FSD، واستخدام الرموز، وحدود Server وClient، وافتراضات الاستجابة، وحالات إمكانية الوصول. أرجع فقط المشكلات والإصلاحات الملموسة.
خذ التنفيذ الحالي ذي المكون الواحد وأعد هيكلته ضمن بنية FSD في المستودع. أعد استخدام المكونات الأساسية المحلية، وحافظ على السلوك، واعزل تفاعلية العميل، واسرد أي أوامر مطلوبة للتحقق.
المؤلف
JohnWayneeeeالترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
المستودع
https://github.com/JohnWayneeee/ai-agent-skills/tree/main/skills/figma-pencil-fsd-tailwind4مرجع
b8ca75d2c0a7e7102978993058777d82b8ab2610
حداثة الصيانة
١٨/٧/٢٠٢٦
الاستخدام
1 تنزيلات · 20 مشاهدات
إجراءات واجهة المستخدم بعد نتيجة النموذج
غالبا ما تفرط فرق المنتجات في تحميل حالات النجاح بخطوات تالية غير واضحة. تحوّل هذه المهارة نية المستخدم إلى إجراءات واجهة مستخدم محددة النطاق ومرتبة الأولوية بعد نتيجة ذات معنى.
صقل شاشات واجهة المستخدم الحالية
غالبا ما تحتاج الواجهات المكتملة إلى تعديلات بصرية صغيرة قبل الإصدار. ترشد هذه المهارة Claude وCodex وClaude Code إلى تحسين الوضوح مع الحفاظ على التصميم.
تحويل تصاميم Pencil إلى كود للواجهة الأمامية
غالبًا ما تفقد تصاميم Pencil تفاصيلها عندما يترجمها المطورون بالنظر فقط. ترشد هذه المهارة Claude وCodex وClaude Code خلال الاستخراج والتنفيذ والفحوصات المرئية بدقة.
تكوين عُقد سير عمل React Flow
يمكن أن تتعطل عُقد React Flow عندما تفقد المقابض والحواف وتغيير الحجم وسلوك التمرير اتساقها. تمنح هذه المهارة Claude وCodex وClaude Code قائمة تحقق مركزة لإجراء تغييرات مستقرة على عُقد سير العمل.
مراجعة لوحات React Flow بأمان
يمكن أن تتعطل لوحات React Flow عندما تنحرف IDs أو handles أو ملكية الحالة أو سلوك viewport. ترشد هذه المهارة Claude وCodex وClaude Code عبر فحوصات مراجعة عملية لـ @xyflow/react v12.
تدقيق صفحات الويب قبل النشر
يمكن لمشكلات الويب المتأخرة أن تعرقل الإطلاقات وتضر بإمكانية الوصول أو SEO أو التدفقات الأساسية. ترشد هذه المهارة إلى فحوصات المتصفح، وتفسير Lighthouse، وإعداد تقارير منظمة قبل الإصدار.
تنفيذ تصاميم Figma كواجهة مستخدم جاهزة للإنتاج
بواسطة figma
غالبًا ما تفقد عملية تسليم التصميم المسافات والأصول وقصد المكوّنات. تمنح هذه المهارة Claude وCodex وClaude Code سير عمل Figma MCP قابلًا للتكرار لتنفيذ واجهات المستخدم بدقة.
تحويل متغيرات Figma إلى Tailwind CSS
بواسطة Crearize
قد تحتوي مخرجات Figma MCP على متغيرات تصميم وأنماط مضمنة يصعب صيانتها. تربط هذه المهارة تلك القيم بفئات Tailwind CSS القياسية ورموز المشروع.
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.
بناء واجهات أمامية مصقولة
بواسطة leonxlnx
غالبا ما تبدو الواجهات التي ينشئها الذكاء الاصطناعي عامة أو تفتقد تفاصيل الإنتاج. تمنح هذه المهارة Claude وCodex وClaude Code ضوابط صارمة للتصميم والواجهة الأمامية.
تحسين الذائقة في تصميم الواجهات الأمامية
بواسطة leonxlnx
قد تبدو أعمال الواجهات الأمامية التي يولدها الذكاء الاصطناعي عامة وتفتقر إلى حالات الاستجابة المختلفة. تمنح هذه المهارة Claude وCodex وClaude Code قواعد واجهة مستخدم ذات توجه واضح لإنتاج مخرجات React وTailwind أكثر دقة.
فرض معايير متسقة لواجهة المستخدم الأمامية
بواسطة ibelick
يمكن أن تنحرف الواجهات التي ينشئها الذكاء الاصطناعي نحو أنماط غير متسقة، وضعف في إمكانية الوصول، وخيارات رسوم متحركة مكلفة. تطبق هذه المهارة قواعد واضحة للواجهة الأمامية من أجل عمل واجهات مستخدم مستقرة، وقابلة للوصول، وقابلة للصيانة.