visual-reviewer
مراجعة وإصلاح مشاكل الجودة البصرية في مخرجات واجهة المستخدم الخاصة بك
غالباً ما تعاني المخرجات البصرية من الذكاء الاصطناعي من مشاكل في التخطيط والتباعد والمحاذاة يصعب اكتشافها يدوياً. تقوم هذه المهارة تلقائياً بالتقاط لقطات شاشة لنتائجك، وتحليلها بحثاً عن العيوب البصرية، وإصلاح المشاكل التي تجدها.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「visual-reviewer」を使用しています。 تحقق من تخطيط لوحة التحكم الخاصة بي
期待される結果:
- تم العثور على 3 مشاكل:
- 1. [متوسط] تجاوز حاوية المخطط في الجانب الأيمن - تم الإصلاح باستخدام overflow: hidden
- 2. [طفيف] محاذاة مجموعة الأزرار غير صحيحة بمقدار 4px - تم الإصلاح باستخدام flex alignment
- 3. [منخفض] حجم خط الرأس 14px - يُوصى بـ 16px لتحسين القراءة
- أعيد التحقق: المشكلتان 1 و 2 تم تأكيد إصلاحهما. المشكلة 3 بانتظار موافقة المستخدم.
「visual-reviewer」を使用しています。 قم بإجراء مراجعة بصرية كاملة على هذا التقرير
期待される結果:
- تقرير المراجعة البصرية
- التخطيط: 3/3 - لم يتم العثور على مشاكل
- التباعد: 2/3 - تباعد خلايا الجدول غير متساو (تم الإصلاح)
- الطباعة: 3/3 - التسلسل الهرمي مناسب
- الألوان: 3/3 - اجتاز WCAG AA (نسبة التباين 5.2:1)
- التفاعل: غير قابل للتطبيق (مستند ثابت)
- عرض البيانات: 2/3 - أعمدة الأرقام أصبحت محاذاة لليمين (تم الإصلاح)
- الحالات الحدودية: 3/3 - عنصر نائب للحالة الفارغة موجود
「visual-reviewer」を使用しています。 تحقق مما إذا كان النموذج الخاص بي متاحاً
期待される結果:
- مراجعة إمكانية الوصول:
- تباين الأزرار: فشل (3.1:1، يجب 4.5:1) - تم تغيير لون الزر من #999 إلى #666 (4.8:1)
- حالات التركيز: فشل - لم يكن للتنقل عبر Tab مؤشر مرئي - تمت إضافة outline: 2px solid blue
- ارتباطات التسميات: نجاح - جميع مدخلات النموذج تحتوي على تسميات مناسبة
- أهداف اللمس: نجاح - جميع العناصر التفاعلية بحجم 44x44px على الأقل
セキュリティ監査
中リスクThe visual-reviewer skill captures screenshots of user screens and enumerates running processes for window targeting. After evaluating all 64 static findings: all are FALSE POSITIVES. The external_commands patterns are documentation code examples in SKILL.md and legitimate screenshot scripts. The weak cryptographic algorithm flags are misidentifications of comments and Chinese text. The high entropy flags are caused by bilingual Chinese/English content. The skill has a legitimate purpose of visual quality review with no evidence of data exfiltration or malicious intent. However, screen capture and process enumeration are inherently sensitive operations that require user awareness.
中リスクの問題 (3)
低リスクの問題 (1)
リスク要因
⚙️ 外部コマンド (6)
📁 ファイルシステムへのアクセス (2)
🌐 ネットワークアクセス (1)
検出されたパターン
品質スコア
作れるもの
مراجعة واجهة تطبيق ويب
بعد إنشاء صفحة ويب، قم تلقائياً بالتقاط لقطة شاشة لنافذة المتصفح وفحصها بحثاً عن مشاكل التخطيط والتباعد وأخطاء المحاذاة
التحقق من تنسيق المستندات
مراجعة المستندات والتقارير المُنشأة للتأكد من اتساق التنسيق ومحاذاة الجداول بشكل صحيح واللمسة البصرية النهائية قبل المشاركة مع أصحاب المصلحة
فحص تنفيذ التصميم
التحقق من أن تنفيذ واجهة المستخدم يطابق مواصفات التصميم من خلال تحليل لقطات الشاشة بحثاً عن التباعد والألوان والطباعة الصحيحة
これらのプロンプトを試す
قم بإجراء مراجعة بصرية على الصفحة التي أنشأتها للتو. تحقق من مشاكل المحاذاة والعناصر المتداخلة واتساق التباعد.
قم بإجراء مراجعة بصرية كاملة باستخدام قائمة التحقق في references/visual_checklist.md. صنف كل بُعد من 0 إلى 3 وأنشئ تقريراً مع لقطات شاشة لكل نتيجة.
تحقق من تباين الألوان لجميع عناصر النص في صفحتي. تأكد من أن النص الأساسي يحقق نسبة WCAG AA 4.5:1 والنص الكبير يحقق 3:1. أبلغ عن أي إخفاقات.
راجع صفحتي عند عرض 768px و 1024px و 1440px. لكل نقطة قطع، التقط لقطة شاشة، وحدد مشاكل التخطيط، وأصلح CSS، وأعد التحقق بلقطة شاشة جديدة. أخرج مقارنة قبل وبعد.
ベストプラクティス
- استخدم لقطات شاشة مستهدفة للنوافذ باستخدام --title أو --process بدلاً من ملء الشاشة لالتقاط المخرجات ذات الصلة فقط
- أصلح المشاكل عالية الخطورة أولاً، ثم أعد التحقق قبل الانتقال إلى المشاكل الطفيفة
- حدد دورات الإصلاح وإعادة التحقق إلى 3 تكرارات لتجنب الحلقات اللانهائية
回避
- إجراء تغييرات بصرية بناءً على مراجعة الكود فقط دون التقاط لقطة شاشة أولاً
- تجاهل متطلبات تباين الألوان في WCAG لصالح التفضيل البصري
- تعديل التخطيط عند نقطة قطع واحدة دون التحقق من أحجام الشاشات الأخرى