📦

ckm:design-system

Name: ckm:design-system
Author: nextlevelbuilder

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

إنشاء رموز التصميم، التحقق من الاستخدام، وإنشاء شرائح عرض ذات علامة تجارية

غالبًا ما تتعطل أنظمة التصميم عندما لا يتم تطبيق الرموز بشكل متسق عبر الطبقات البدائية والدلالية والمكونات. تقوم هذه المهارة بإنشاء متغيرات CSS من تعريفات رموز JSON، والتحقق من استخدام الرموز في الكود، وإنشاء عروض شرائح متوافقة مع العلامة التجارية مع تكامل Chart.js.

يدعم: Claude Codex Code(CC)

🥉 72 برونزي

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

رفع في Claude

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

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

اختبرها

استخدام "ckm:design-system". قم بإنشاء رموز تصميم CSS من ملف tokens.json الخاص بي وأنشئ إعدادات Tailwind لمشروع Next.js الخاص بي.

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

مخرجات CSS بهيكل ثلاثي الطبقات من الرموز منظمة ككتل :root مع الرموز البدائية والدلالية ورموز المكونات
ملف إعدادات Tailwind مع تعيينات ألوان تشير إلى متغيرات CSS لاستخدامها في tailwind.config.js

استخدام "ckm:design-system". أنشئ عرضًا تقديميًا من 5 شرائح لشركة ناشئة في مجال التكنولوجيا المالية. يتضمن مخطط إيرادات.

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

ملف HTML مع عرض شرائح ذي علامة تجارية يتضمن العنوان والمشكلة والحل مع بطاقات ومخطط أعمدة لنمو الإيرادات وشرائح دعوة للإجراء
مراجع CSS لرموز التصميم لجميع الألوان والخطوط والمسافات لضمان الامتثال للعلامة التجارية

استخدام "ckm:design-system". ابحث عن أفضل نوع مخطط لعرض نمو الإيرادات الربعية عبر أربعة خطوط إنتاج.

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

توصية المخطط: مخطط أعمدة مجمعة لمقارنة خطوط إنتاج متعددة عبر الأرباع
إرشادات خاصة بالسياق حول متى يجب استخدامه ومتى يجب تجنبه وملاحظات تنفيذ Chart.js

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

مخاطر منخفضة

v1 • 5/26/2026

Static analysis flagged 561 potential issues (risk score 100/100), but AI evaluation confirms nearly all are false positives. Over 400 'Weak cryptographic algorithm' detections are hex color codes in design token CSV data and CSS examples (e.g. #2563EB). Over 150 'Shell backtick execution' detections are shell command examples in Markdown documentation and legitimate build tool invocations. The only true positive is subprocess.run in slide-token-validator.py which delegates to an internal validation script with low risk. The skill is a legitimate design system toolkit with no malicious intent, no credential exfiltration, and no command injection vulnerabilities.

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

4,805

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

النتائج

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

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

data/slide-backgrounds.csv:7 data/slide-charts.csv:22-26 data/slide-copy.csv:2-26 SKILL.md:42-48

Hex color values in design token data flagged as cryptographic algorithms

FALSE POSITIVE: Over 400 'Weak cryptographic algorithm' detections. The static analyzer matched hex color codes (e.g. #2563EB, #F59E0B, #0D0D0D) in CSV design data files and CSS documentation examples. These are design token color values, not cryptographic material. Design system data and CSS documentation legitimately contain hex color codes for brand colors, UI colors, and CSS examples.

references/component-specs.md:40-46 SKILL.md:54-61 references/token-architecture.md:7-18

Shell command examples in Markdown documentation

FALSE POSITIVE: Over 150 'Ruby/shell backtick execution' detections in Markdown reference files. These are code examples showing users how to run commands like 'node scripts/generate-tokens.cjs' or 'python scripts/search-slides.py'. They are documentation, not executable code being injected at runtime. No dynamic command construction from user input.

scripts/fetch-background.py:144-184

Hardcoded image URLs in fetch-background.py

FALSE POSITIVE: Curated Pexels stock photo URLs hardcoded in fetch-background.py. These are pre-selected, free-to-use images for slide backgrounds. URLs point to images.pexels.com, a legitimate stock photography platform. No credential exfiltration or malicious network activity.

scripts/slide-token-validator.py:30

subprocess.run delegation in slide-token-validator.py

TRUE POSITIVE (low risk): Script uses subprocess.run to delegate validation to html-token-validator.py with sys.argv[1:] forwarded as arguments. This is a standard wrapper pattern. Risk is low because it only calls a known internal validator script.

scripts/generate-slide.py:632

Path traversal sequence in generate-slide.py

FALSE POSITIVE: The string '../../../assets/design-tokens.css' on line 632 is a computed relative path from the slide output directory to the shared design tokens CSS file. This is a hardcoded constant, not user-controlled input. No path traversal vulnerability exists.

scripts/embed-tokens.cjs:86 scripts/generate-tokens.cjs:184

Standard filesystem operations in build and validation scripts

FALSE POSITIVE: Node.js fs operations detected in embed-tokens.cjs, generate-tokens.cjs, and validate-tokens.cjs. These are standard file I/O operations for reading design token files, writing CSS output, and scanning codebases for token compliance. All operations are local to the project directory.

SKILL.md:190

Chart.js CDN URL in SKILL.md

FALSE POSITIVE: Hardcoded URL 'https://cdn.jsdelivr.net/npm/chart.js@4.4.1/...' in SKILL.md line 190. This is a legitimate CDN URL for the Chart.js library used in slide HTML generation. It is a static reference, not dynamically constructed.

scripts/search-slides.py:10

Dynamic import pattern in search-slides.py

FALSE POSITIVE: 'Dynamic import() expression' detected at line 10. This is actually a standard Python 'from slide_search_core import ...' statement. The static analyzer misidentified the Python import syntax as a dynamic JavaScript import expression.

multiple:1

Heuristic dangerous combination warning

FALSE POSITIVE: The heuristic analyzer flagged a 'dangerous combination' of code execution, network, and credential access across the codebase. Evaluation confirms all operations are legitimate: subprocess calls run internal build tools, network requests go to stock photo CDNs and Chart.js CDN, and 'credential' matches are false positives on CSV config lookups and hardcoded hex colors. No data exfiltration path exists.

عوامل الخطر

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

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

scripts/embed-tokens.cjs:86 scripts/embed-tokens.cjs:20 scripts/embed-tokens.cjs:86 scripts/generate-slide.py:632 scripts/generate-slide.py:632 scripts/generate-slide.py:632 scripts/generate-tokens.cjs:184 scripts/generate-tokens.cjs:197 scripts/generate-tokens.cjs:198 scripts/generate-tokens.cjs:178 scripts/generate-tokens.cjs:184 scripts/generate-tokens.cjs:198 scripts/validate-tokens.cjs:99 scripts/validate-tokens.cjs:130 scripts/validate-tokens.cjs:226 scripts/validate-tokens.cjs:130 scripts/validate-tokens.cjs:231

🌐 الوصول إلى الشبكة (28)

🔑 متغيرات البيئة (7)

scripts/fetch-background.py:208 scripts/fetch-background.py:213 scripts/fetch-background.py:213 scripts/fetch-background.py:214 scripts/slide_search_core.py:430 scripts/slide_search_core.py:431 scripts/slide_search_core.py:432

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

scripts/search-slides.py:10-14

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

درجة الجودة

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

100

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

المحتوى

المجتمع

الأمان

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

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

مطور واجهات أمامية ينشئ نظام تصميم

مطور واجهات أمامية يحتاج إلى إنشاء نظام رموز تصميم متسق لمشروع جديد. تقوم هذه المهارة بإنشاء متغيرات CSS من تعريف JSON للرموز، والتحقق من أن المكونات تستخدم الرموز بدلاً من القيم المكتوبة بشكل ثابت، وإنتاج إعدادات Tailwind للتكامل.

مصمم يبني عروض تقديمية ذات علامة تجارية

مصمم يحتاج إلى إنشاء عرض تقديمي يتبع إرشادات العلامة التجارية. تقوم هذه المهارة بإنشاء شرائح HTML تستخدم رموز التصميم للألوان والخطوط والمسافات. تتضمن خيارات مخططات عبر Chart.js وصور خلفية منسقة من Pexels.

مهندس DevOps يعمل على أتمتة خطوط أنابيب رموز التصميم

مهندس DevOps يقوم بإعداد إنشاء آلي للرموز والتحقق منها في خطوط CI. توفر المهارة نصوص CLI لتوليد CSS، والتحقق من قواعد الأكواد مقابل قواعد استخدام الرموز، وتضمين الرموز في ملفات HTML مستقلة.

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

إنشاء رموز من إعدادات JSON

قم بإنشاء رموز تصميم CSS من ملف tokens.json الخاص بي باستخدام الهيكل ثلاثي الطبقات. استخدم نمط البدائي إلى الدلالي إلى المكون.

التحقق من استخدام الرموز في قاعدة الأكواد

تحقق من مجلد src/ لدي بحثًا عن ألوان hex المكتوبة بشكل ثابت وقيم البكسل. أبلغ عن جميع المخالفات واقترح رموز التصميم التي يجب استخدامها بدلاً من ذلك.

إنشاء عرض تقديمي مع مخططات

أنشئ عرضًا تقديميًا مستثمريًا من 8 شرائح لمنصة تحليلات SaaS. يتضمن شريحة عنوان، شريحة مشكلة، شريحة حل مع شبكة ميزات، شريحة مقاييس، شريحة مخطط إيرادات، شريحة شهادة، شريحة جدول مقارنة، وشريحة ختامية مع دعوة للإجراء. استخدم رموز التصميم الخاصة بعلامتنا التجارية.

تطبيق تقنية Duarte sparkline

أنشئ عرضًا من 9 شرائح باستخدام هيكل سرد Duarte sparkline. تناوب بين إيقاعات ما هو كائن (إحباط) وما يمكن أن يكون (أمل). استخدم كسر النمط في الموضعين 3 و6. ابحث عن استراتيجيات الشرائح لـ 'عرض استثماري' وأوصِ بتخطيطات لكل شريحة.

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

قم بتعريف الرموز البدائية أولاً بقيم خام، ثم قم بتعيينها عبر الرموز الدلالية، وأخيراً إلى الرموز الخاصة بالمكونات لتحقيق أقصى مرونة وتبديل السمات.
تحقق دائمًا من شرائح HTML المنشأة باستخدام مدقق الرموز لاكتشاف الألوان أو الخطوط المكتوبة بشكل ثابت قبل المشاركة.
استخدم البحث السياقي مع معلمات موضع الشريحة والعاطفة لإنشاء عروض تحتوي على كسر النمط والتباين العاطفي لتحسين تفاعل الجمهور.

تجنب

لا تستخدم ألوان hex الخام في ملفات CSS للمكونات. ارجع دائمًا إلى رموز التصميم من خلال var() لاتساق السمة.
لا تنشئ شرائح دون استيراد ملف design-tokens.css. يجب أن تستخدم جميع الخصائص المرئية متغيرات الرموز.
لا تتجاوز طبقة الرمز الدلالي. تعيين المكونات مباشرة إلى البدائيات يجعل تبديل السمة والصيانة أكثر صعوبة.

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

ما تنسيق الملف الذي يجب أن يتبعه JSON لرموز التصميم؟

يجب أن يتبع JSON هيكلاً ثلاثي الطبقات: بدائي (قيم الألوان والمسافات والطباعة الخام)، دلالي (أسماء مستعارة قائمة على الغرض مثل --color-primary)، ومكون (رموز خاصة بالمكونات مثل --button-bg). كل رمز يحتوي على حقل $value وحقل $type.

هل يمكن لهذه المهارة إنشاء ملفات PowerPoint أو Google Slides؟

لا. تقوم هذه المهارة بإنشاء شرائح HTML مع رموز تصميم CSS مضمنة. المخرج هو ملف HTML قائم بذاته يمكن فتحه في أي متصفح ولكن لا يمكن استيراده مباشرة إلى PowerPoint أو Google Slides.

كيف يمكنني إضافة صورة خلفية جديدة إلى شرائحي؟

يتم اختيار صور الخلفية من مجموعة منسقة من صور Pexels المجانية منظمة حسب نوع الشريحة (رئيسية، فريق، شهادة، إلخ). يمكنك توسيع قاموس CURATED_IMAGES في ملف scripts/fetch-background.py بإضافة روابط صور Pexels إضافية.

ما الذي يتحقق منه مدقق الرموز؟

يقوم المدقق بفحص ملفات CSS وJSX وTSX وملفات المصدر الأخرى بحثًا عن ألوان hex مكتوبة بشكل ثابت وألوان RGB وقيم البكسل وقيم rem. يقترح استبدالها بمراجع var() لرموز التصميم. يتجاوز ملفات تعريف الرموز والاستثناءات الشائعة.

كيف يمكنني إنشاء سمة Tailwind من رموز التصميم الخاصة بي؟

استخدم script generate-tokens.cjs مع العلم --format tailwind. يؤدي ذلك إلى إنشاء كائن إعدادات ألوان يعين رموز الألوان الدلالية الخاصة بك إلى أسماء ألوان Tailwind باستخدام مراجع متغيرات CSS.

هل يدعم إنشاء الشرائح الرسوم المتحركة؟

نعم. يشمل نظام الشرائح فئات رسوم متحركة CSS مثل animate-fade-up وanimate-stagger وanimate-scale وanimate-chart وanimate-count وanimate-pulse. يوصي البحث السياقي بفئات الرسوم المتحركة بناءً على هدف الشريحة والعاطفة.