web-design-guidelines
مراجعة كود واجهة المستخدم مقابل إرشادات التصميم
متاح أيضًا من: antfu,antfu,vercel-labs
تقوم هذه المهارة تلقائياً بالتدقيق في واجهات الويب وفقاً لإرشادات واجهة مستخدم Vercel، وتحديد مشاكل إمكانية الوصول ومشاكل تجربة المستخدم وانتهاكات الامتثال للتصميم في كود واجهة المستخدم الخاص بك.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "web-design-guidelines". Use web-design-guidelines to review src/components/Header.tsx
النتيجة المتوقعة:
- src/components/Header.tsx:15 - Missing ARIA label on navigation element
- src/components/Header.tsx:23 - Color contrast ratio below 4.5:1 for link text
- src/components/Header.tsx:31 - Use semantic <button> instead of <div> for actions
استخدام "web-design-guidelines". Use web-design-guidelines to audit **/*.html
النتيجة المتوقعة:
- index.html:42 - Form labels must be associated with inputs via for attribute
- index.html:58 - Images require alt text for accessibility
- about.html:12 - Heading levels should not skip (h1 -> h3)
التدقيق الأمني
آمنStatic analysis flagged 7 potential issues (external_commands, network, weak cryptographic algorithms). Manual review confirms all findings are false positives. The 'external_commands' detections are markdown backticks for code formatting, not shell execution. The 'network' detection is an intentional hardcoded URL to Vercel's official GitHub guidelines repository. The 'weak cryptographic algorithm' detections are triggered by YAML frontmatter content with no actual cryptographic code. This skill is a safe design review tool that fetches official Vercel guidelines and applies them to audit UI code.
درجة الجودة
ماذا يمكنك بناءه
تدقيق إمكانية الوصول
مراجعة مكون React أو ملف HTML للامتثال لـ WCAG واستخدام ARIA ومشاكل تباين الألوان
الامتثال لنظام التصميم
التحقق مما إذا كانت مكونات واجهة المستخدم تتبع أنماط التصميم المعتمدة وإرشادات واجهة Vercel
مراجعة الكود قبل الإطلاق
تشغيل تدقيق نهائي على جميع ملفات واجهة المستخدم قبل النشر untuk menangkap أي مشاكل في إمكانية الوصول أو تجربة المستخدم
جرّب هذه الموجهات
Use the web-design-guidelines skill to review my UI code in src/components/Button.tsx for accessibility and design compliance.
Use web-design-guidelines to audit all files matching **/*.tsx in the components directory for interface guideline violations.
Run web-design-guidelines on the entire src directory to check all UI code against Vercel's Web Interface Guidelines.
I want to review my UI code. Use web-design-guidelines and ask me which files to review.
أفضل الممارسات
- تحديد مسارات الملفات الدقيقة أو أنماط glob لتركيز المراجعة على الملفات ذات الصلة
- مراجعة النتائج بتنسيق ملف:سطر وإصلاح المشاكل بترتيب الخطورة
- جلب إرشادات جديدة قبل كل مراجعة للحصول على أحدث القواعد
تجنب
- تشغيل المهارة دون تحديد الملفات المراد مراجعتها
- تجاهل نتائج إمكانية الوصول - تؤثر على المستخدمين ذوي الإعاقات
- افتراض أن المهارة تلتقط جميع المشاكل - إنها مساعد وليس بديلاً للاختبار اليدوي