Habilidades web-design-guidelines
🎨

web-design-guidelines

Seguro

واجهة مراجعة إرشادات التصميم

Também disponível em: ZhanlinCui,antfu,vercel-labs,antfu

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

Suporta: Claude Codex Code(CC)
🥉 74 Bronze
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "web-design-guidelines". Use web-design-guidelines to review src/components/Button.jsx

Resultado esperado:

Button component review complete:

✓ Passed: Button has proper semantic HTML structure
✓ Passed: Sufficient color contrast (4.5:1 ratio)
⚠ Warning: Missing aria-label for icon-only buttons at line 23
⚠ Warning: Focus states could be more visible at line 45

Recommendation: Add aria-label="Submit" to icon-only button elements for screen reader support.

A utilizar "web-design-guidelines". Check index.html for accessibility compliance using web-design-guidelines

Resultado esperado:

Accessibility audit for index.html:

✓ Passed: Valid document structure with semantic elements
✓ Passed: Lang attribute present
⚠ Warning: Image at line 15 missing alt attribute
⚠ Warning: Form labels missing at lines 30-35
⚠ Warning: Skip navigation link recommended

Action required: Add alt text to all images and associate labels with form inputs.

Auditoria de Segurança

Seguro
v1 • 2/25/2026

All static findings are false positives. The backticks flagged as 'Ruby/shell backtick execution' are markdown code formatting. The 'weak cryptographic algorithm' detections are scanner errors on random markdown text. The network URL is a legitimate public GitHub resource (vercel-labs/web-interface-guidelines) intentionally fetched to get current guidelines. This is a simple skill that fetches public guidelines and reviews UI code for compliance.

1
Arquivos analisados
42
Linhas analisadas
2
achados
1
Total de auditorias
Problemas de Risco Médio (1)
SKILL.md:18SKILL.md:24-26
Backtick Detection - False Positive
Scanner flagged markdown backticks as Ruby/shell execution. These are code formatting in markdown documentation.
Problemas de Baixo Risco (1)
SKILL.md:25
Hardcoded URL - Intentional Design
URL to fetch web interface guidelines from public GitHub repository
Auditado por: claude

Pontuação de qualidade

38
Arquitetura
100
Manutenibilidade
85
Conteúdo
50
Comunidade
98
Segurança
100
Conformidade com especificações

O Que Você Pode Construir

مراجعة رمز مطور الويب

يريد مطور الويب التأكد من أن مكونات واجهة المستخدم الخاصة به تتبع أفضل ممارسات إمكانية الوصول والتصميم قبل النشر.

تدقيق إمكانية الوصول

يحتاج مصمم UX للتحقق من أن جميع الصفحات تل معايير إمكانية الوصول وإرشادات WCAG.

الامتثال لنظام التصميم

يريد قائد الفريق التأكد من أن جميع أعضاء الفريق يتبعون أنماط تصميم متسقة في تطبيقاتهم.

Tente Estes Prompts

مراجعة واجهة المستخدم الأساسية 
Use the web-design-guidelines skill to review my UI code in [filename] for compliance with web interface guidelines.
فحص إمكانية الوصول 
Use web-design-guidelines to check [file or pattern] for accessibility compliance and suggest improvements.
تدقيق التصميم الكامل 
Use web-design-guidelines to perform a comprehensive review of [directory or pattern]. Check all files for web interface guidelines compliance, accessibility, and UX best practices.
المراجعة القائمة على الأنماط 
Use web-design-guidelines skill to review all [*.jsx or specific pattern] files in [directory] for web interface guidelines compliance.

Melhores Práticas

  • جلب أحدث الإرشادات قبل كل مراجعة لضمان أفضل الممارسات الحالية
  • مراجعة الملفات الكاملة بدلاً من المقتطفات للحصول على سياق دقيق
  • معالجة تحذيرات إمكانية الوصول أولاً لأنها تؤثر على أكبر جمهور

Evitar

  • لا تستخدم هذه المهارة لمراجعة منطق الواجهة الخلفية أو رمز API
  • تجنب مراجعة الرمز المولد أو المصغر - تحتاج المهامة إلى مصدر قابل للقراءة
  • لا تتوقع عرضاً مرئياً - هذا تحليل رمز فقط

Perguntas Frequentes

ما هي الإرشادات التي تفحصها هذه المهارة؟
تسترجع أحدث إرشادات واجهة الويب من مستودع vercel-labs web-interface-guidelines على GitHub.
هل يمكن لهذه المهامة فحص موقعي المباشر؟
لا، هذه المهامة تراجع ملفات رمز المصدر فقط. لا يمكنها الوصول إلى مواقع الويب الحية أو عرض الصفحات.
هل تفحص لأطر عمل محددة مثل React أو Vue؟
نعم، تراجع بنية الرمز وتطبق إرشادات الويب العامة. تعتمد الفحوصات الخاصة بإطار العمل على محتوى الإرشادات المسترجعة.
كيف أقوم بتوفير الملفات للمراجعة؟
مرر مسار ملف أو دليل أو نمط glob كحجة للمهارة.
ماذا لو لم يتم تحديد ملفات؟
ستطلب منك المهامة توفير الملفات أو الأنماط التي تريد مراجعتها.
هل تعدل هذه المهامة رمزي؟
لا، هذه المهامة تقرأ وتحلل رمزك فقط. توفر توصيات ولكنها لا تقوم بتغييرات.

Detalhes do Desenvolvedor

Autor

sickn33

Licença

MIT

Repositório

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/web-design-guidelines

Referência

main

Estrutura de arquivos

📄 SKILL.md