المهارات design-component
🎨

design-component

آمن ⚙️ الأوامر الخارجية🌐 الوصول إلى الشبكة📁 الوصول إلى نظام الملفات

تصميم مكونات واجهة مستخدم حساسة ثقافياً

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

يدعم: Claude Codex Code(CC)
⚠️ 68 ضعيف
1

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

2

رفع في Claude

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

3

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

اختبرها

استخدام "design-component". تصميم بطاقة راوي مميز مع رؤى الذكاء الاصطناعي

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

  • البطاقة تعرض صورة رمزية كبيرة مع شارات الحكيم والمميز
  • كتلة اقتباس مميز مع إسناد القصة
  • شارات خبرة الموضوعات مع مؤشرات العمق
  • مؤشر المُحسّن بالذكاء الاصطناعي مع طابع زمني لآخر تحديث
  • أزرار الإجراء: عرض الملف الشخصي، قراءة القصص، التواصل

استخدام "design-component". إنشاء متغير بطاقة مدمج لاستخدام الشريط الجانبي

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

  • عرض ثابت 280px مع تخطيط أفقي مضمن
  • صورة رمزية أصغر 48px مع احتياطي الأحرف الأولى
  • الاسم فقط مع شارة عدد القصص على اليمين
  • حالة التمرير تُظهر الخلفية الثقافية الكاملة
  • النقر ينتقل إلى صفحة الملف الشخصي الكاملة

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

آمن
v5 • 1/16/2026

Pure documentation skill containing only markdown files with design guidelines and code examples. The static analyzer incorrectly flagged documentation as executable code. Backticks in markdown are for code block syntax, not shell execution. SQL examples are database schema documentation, not system reconnaissance. Interface field names containing words like 'connection' were misidentified as cryptographic algorithms. This skill has no executable code, network calls, filesystem operations, or environment access.

5
الملفات التي تم فحصها
1,937
الأسطر التي تم تحليلها
3
النتائج
5
إجمالي عمليات التدقيق

عوامل الخطر

⚙️ الأوامر الخارجية (226)
ai-enrichment.md:14-33 ai-enrichment.md:33-35 ai-enrichment.md:35-38 ai-enrichment.md:38-52 ai-enrichment.md:52-59 ai-enrichment.md:59-84 ai-enrichment.md:84-86 ai-enrichment.md:86-89 ai-enrichment.md:89-99 ai-enrichment.md:99-106 ai-enrichment.md:106-128 ai-enrichment.md:128-130 ai-enrichment.md:130-133 ai-enrichment.md:133-147 ai-enrichment.md:147-149 ai-enrichment.md:149-154 ai-enrichment.md:154-161 ai-enrichment.md:161-187 ai-enrichment.md:187-189 ai-enrichment.md:189-192 ai-enrichment.md:192-203 ai-enrichment.md:203-217 ai-enrichment.md:217-224 ai-enrichment.md:224-238 ai-enrichment.md:238-240 ai-enrichment.md:240-245 ai-enrichment.md:245-259 ai-enrichment.md:259-262 ai-enrichment.md:262-272 ai-enrichment.md:272-276 ai-enrichment.md:276-313 ai-enrichment.md:313-318 ai-enrichment.md:318-325 ai-enrichment.md:325-328 ai-enrichment.md:328-330 ai-enrichment.md:330-337 ai-enrichment.md:337-340 ai-enrichment.md:340-346 ai-enrichment.md:346-366 ai-enrichment.md:366-380 CARD_AUDIT_REPORT.md:24 CARD_AUDIT_REPORT.md:24 CARD_AUDIT_REPORT.md:25 CARD_AUDIT_REPORT.md:25 CARD_AUDIT_REPORT.md:26 CARD_AUDIT_REPORT.md:26 CARD_AUDIT_REPORT.md:27 CARD_AUDIT_REPORT.md:27 CARD_AUDIT_REPORT.md:28 CARD_AUDIT_REPORT.md:28 CARD_AUDIT_REPORT.md:34 CARD_AUDIT_REPORT.md:34 CARD_AUDIT_REPORT.md:35 CARD_AUDIT_REPORT.md:35 CARD_AUDIT_REPORT.md:36 CARD_AUDIT_REPORT.md:36 CARD_AUDIT_REPORT.md:37 CARD_AUDIT_REPORT.md:37 CARD_AUDIT_REPORT.md:47 CARD_AUDIT_REPORT.md:48 CARD_AUDIT_REPORT.md:49 CARD_AUDIT_REPORT.md:50 CARD_AUDIT_REPORT.md:51 CARD_AUDIT_REPORT.md:52 CARD_AUDIT_REPORT.md:53 CARD_AUDIT_REPORT.md:54 CARD_AUDIT_REPORT.md:55 CARD_AUDIT_REPORT.md:56 CARD_AUDIT_REPORT.md:57 CARD_AUDIT_REPORT.md:58 CARD_AUDIT_REPORT.md:60 CARD_AUDIT_REPORT.md:61 CARD_AUDIT_REPORT.md:62 CARD_AUDIT_REPORT.md:63 CARD_AUDIT_REPORT.md:64 CARD_AUDIT_REPORT.md:70 CARD_AUDIT_REPORT.md:71 CARD_AUDIT_REPORT.md:72 CARD_AUDIT_REPORT.md:73 CARD_AUDIT_REPORT.md:74 CARD_AUDIT_REPORT.md:75 CARD_AUDIT_REPORT.md:76 CARD_AUDIT_REPORT.md:77 CARD_AUDIT_REPORT.md:78 CARD_AUDIT_REPORT.md:88 CARD_AUDIT_REPORT.md:89 CARD_AUDIT_REPORT.md:90 CARD_AUDIT_REPORT.md:91 CARD_AUDIT_REPORT.md:95-125 CARD_AUDIT_REPORT.md:125-135 CARD_AUDIT_REPORT.md:135-136 CARD_AUDIT_REPORT.md:136-141 CARD_AUDIT_REPORT.md:141-170 CARD_AUDIT_REPORT.md:170-181 CARD_AUDIT_REPORT.md:181-200 CARD_AUDIT_REPORT.md:200-206 CARD_AUDIT_REPORT.md:206-222 CARD_AUDIT_REPORT.md:222-226 CARD_AUDIT_REPORT.md:226-236 CARD_AUDIT_REPORT.md:236-240 CARD_AUDIT_REPORT.md:240-249 CARD_AUDIT_REPORT.md:249-255 CARD_AUDIT_REPORT.md:255-274 CARD_AUDIT_REPORT.md:274-281 CARD_AUDIT_REPORT.md:281 CARD_AUDIT_REPORT.md:281-283 CARD_AUDIT_REPORT.md:283-287 CARD_AUDIT_REPORT.md:287-288 CARD_AUDIT_REPORT.md:288-296 CARD_AUDIT_REPORT.md:296-298 CARD_AUDIT_REPORT.md:298-334 CARD_AUDIT_REPORT.md:334-335 CARD_AUDIT_REPORT.md:335-336 CARD_AUDIT_REPORT.md:336-337 CARD_AUDIT_REPORT.md:337-338 CARD_AUDIT_REPORT.md:338-339 CARD_AUDIT_REPORT.md:339-340 CARD_AUDIT_REPORT.md:340-341 card-variants.md:17-34 card-variants.md:34-37 card-variants.md:37-50 card-variants.md:50-53 card-variants.md:53-65 card-variants.md:65-70 card-variants.md:70-93 card-variants.md:93-96 card-variants.md:96-128 card-variants.md:128-131 card-variants.md:131-141 card-variants.md:141-146 card-variants.md:146-151 card-variants.md:151-154 card-variants.md:154-159 card-variants.md:159-162 card-variants.md:162-167 card-variants.md:167-170 card-variants.md:170-175 card-variants.md:175-201 card-variants.md:201-227 card-variants.md:227-232 card-variants.md:232-245 card-variants.md:245-248 card-variants.md:248-255 card-variants.md:255-260 card-variants.md:260-266 card-variants.md:266-269 card-variants.md:269-274 card-variants.md:274-277 card-variants.md:277-281 card-variants.md:281-285 SKILL.md:13-26 SKILL.md:26-40 SKILL.md:40-76 SKILL.md:76-79 SKILL.md:79-105 SKILL.md:105-110 SKILL.md:110-117 SKILL.md:117-125 SKILL.md:125-130 SKILL.md:130-137 SKILL.md:137-142 SKILL.md:142-150 SKILL.md:150-152 SKILL.md:152-161 SKILL.md:161-170 SKILL.md:170-173 SKILL.md:173-184 SKILL.md:184-187 SKILL.md:187-195 SKILL.md:195-198 SKILL.md:198-206 SKILL.md:206-209 SKILL.md:209-217 SKILL.md:217-222 SKILL.md:222-244 SKILL.md:244-247 SKILL.md:247-260 SKILL.md:260-263 SKILL.md:263-281 SKILL.md:281-284 SKILL.md:284-305 SKILL.md:305-308 SKILL.md:308-317 SKILL.md:317-322 SKILL.md:322-325 SKILL.md:325-338 SKILL.md:338-341 SKILL.md:341-351 SKILL.md:351-356 SKILL.md:356-373 SKILL.md:373-376 SKILL.md:376-391 SKILL.md:391-422 SKILL.md:422 SKILL.md:422-423 SKILL.md:423 SKILL.md:423-424 SKILL.md:424 SKILL.md:424-425 SKILL.md:425 SKILL.md:425-426 SKILL.md:426 SKILL.md:426-427 SKILL.md:427 SKILL.md:427-436 SKILL.md:436-445 SKILL.md:445-448 SKILL.md:448-459 SKILL.md:459-468 SKILL.md:468-481 SKILL.md:481-496 SKILL.md:496-508 SKILL.md:508-523 SKILL.md:523-540 SKILL.md:540-543 SKILL.md:543-554 SKILL.md:554-563 SKILL.md:563-609 SKILL.md:609-625 SKILL.md:625-652 SKILL.md:652-655 SKILL.md:655-663 SKILL.md:663-670 SKILL.md:670-687 SKILL.md:687-690 SKILL.md:690-703
🌐 الوصول إلى الشبكة (2)
skill-report.json:6 SKILL.md:325
📁 الوصول إلى نظام الملفات (1)
skill-report.json:6
تم تدقيقه بواسطة: claude عرض سجل التدقيق →

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
85
المحتوى
21
المجتمع
100
الأمان
83
الامتثال للمواصفات

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

بناء بطاقات الرواة

إنشاء مكونات بطاقات لعرض ملفات الرواة الشخصية مع المؤشرات الثقافية ورؤى الذكاء الاصطناعي.

إرشادات نظام التصميم

تطبيق لوحات الألوان ومعايير إمكانية الوصول وأنماط الحساسية الثقافية على تصاميم المكونات.

معايير المكونات

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

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

إنشاء بطاقة راوي 
Design a StorytellerCard component that displays cultural background, elder status, story count, and specialties with proper fallbacks for missing data.
إضافة الإثراء بالذكاء الاصطناعي 
Show me how to implement AI enrichment for storyteller profiles including quote extraction, theme expertise, and connection suggestions.
المؤشرات الثقافية 
How should I display traditional territory, cultural affiliations, and language skills on a storyteller profile card?
لوحة تحكم الموافقة 
Design a consent management dashboard with consent status badges, revocation workflows, and cultural permission indicators.

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

  • إظهار الخلفية الثقافية دائماً مع الاعتراف بالأراضي التقليدية
  • وضع علامة على المحتوى المُنشأ بالذكاء الاصطناعي بوضوح مع مؤشرات بصرية
  • توفير حالات احتياطية للصورة الرمزية والسيرة الذاتية وبيانات التخصص المفقودة
  • تنفيذ الوضع الداكن باستخدام متغيرات CSS الدلالية لجميع الألوان

تجنب

  • ترميز الألوان بشكل ثابت بدلاً من استخدام متغيرات CSS
  • عرض المحتوى المُنشأ بالذكاء الاصطناعي دون الإشارة إلى مصدره
  • حذف حالة الحكيم أو السياق الثقافي من بطاقات الرواة
  • تفويت تسميات إمكانية الوصول على شارات الحالة والعناصر التفاعلية

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

ما المنصات التي تدعمها هذه المهارة؟
يعمل مع Claude و Codex و Claude Code لمهام تصميم المكونات والتوثيق.
ما حقول البيانات المطلوبة لبطاقات الرواة؟
مطلوب: display_name و cultural_background و avatar_url. موصى به: story_count و specialties وحالة elder/featured.
هل يمكنني التكامل مع أنظمة التصميم الخارجية؟
نعم. تستخدم الأنماط اصطلاحات Tailwind CSS ولكن يمكن التكيف مع أي نظام تصميم مع تعيين متغيرات CSS.
هل بيانات المستخدم آمنة مع الإثراء بالذكاء الاصطناعي؟
يتم وضع علامة على محتوى الذكاء الاصطناعي بصرياً. يمكن للرواة تجاوز الاقتراحات. يتم استبعاد المحتوى المقدس من الاستخراج.
لماذا تبدو بطاقاتي مختلفة في الوضع الداكن؟
استخدم الألوان الدلالية مثل --background و --card و --foreground بدلاً من قيم hex الثابتة لدعم السمة الصحيح.
كيف يقارن هذا بمكونات البطاقات العامة؟
يضيف طبقات الحساسية الثقافية ومؤشرات الإثراء بالذكاء الاصطناعي وسياق السرد القصصي للشعوب الأصلية الخاص بالمنصة.

تفاصيل المطور

المؤلف

Acurioustractor

الترخيص

MIT

المستودع

https://github.com/Acurioustractor/empathy-ledger-v2/tree/main/.claude/skills/local/design-component

مرجع

main

بنية الملفات

📄 ai-enrichment.md

📄 CARD_AUDIT_REPORT.md

📄 card-variants.md

📄 SKILL.md