Compétences web-design-guidelines
🎨

web-design-guidelines

Sûr

Review UI for Design Guidelines

Également disponible depuis: ZhanlinCui,antfu,vercel-labs,antfu

This skill automatically reviews UI code against web interface guidelines to ensure accessibility, usability, and design consistency. It fetches the latest guidelines and provides actionable feedback.

Prend en charge: Claude Codex Code(CC)
🥉 74 Bronze
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez Ă  utiliser

Tester

Utilisation de "web-design-guidelines". Use web-design-guidelines to review src/components/Button.jsx

RĂ©sultat attendu:

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.

Utilisation de "web-design-guidelines". Check index.html for accessibility compliance using web-design-guidelines

RĂ©sultat attendu:

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.

Audit de sécurité

Sûr
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
Fichiers analysés
42
Lignes analysées
2
résultats
1
Total des audits
Problèmes à risque moyen (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.
Problèmes à risque faible (1)
SKILL.md:25
Hardcoded URL - Intentional Design
URL to fetch web interface guidelines from public GitHub repository
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
85
Contenu
50
Communauté
98
Sécurité
100
Conformité aux spécifications

Ce que vous pouvez construire

Web Developer Code Review

A web developer wants to ensure their UI components follow accessibility and design best practices before deployment.

Accessibility Audit

A UX designer needs to verify that all pages meet accessibility standards and WCAG guidelines.

Design System Compliance

A team lead wants to ensure all team members follow consistent design patterns in their implementations.

Essayez ces prompts

Basic UI Review 
Use the web-design-guidelines skill to review my UI code in [filename] for compliance with web interface guidelines.
Accessibility Check 
Use web-design-guidelines to check [file or pattern] for accessibility compliance and suggest improvements.
Full Design Audit 
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.
Pattern-Based Review 
Use web-design-guidelines skill to review all [*.jsx or specific pattern] files in [directory] for web interface guidelines compliance.

Bonnes pratiques

  • Fetch the latest guidelines before each review to ensure current best practices
  • Review complete files rather than snippets for accurate context
  • Address accessibility warnings first as they impact the widest audience

Éviter

  • Do not use this skill for backend logic or API code review
  • Avoid reviewing generated or minified code - the skill needs readable source
  • Do not expect visual rendering - this is code analysis only

Foire aux questions

What guidelines does this skill check against?
It fetches the latest web interface guidelines from vercel-labs web-interface-guidelines repository on GitHub.
Can this skill check my live website?
No, this skill reviews source code files only. It cannot access live websites or render pages.
Does it check for specific frameworks like React or Vue?
Yes, it reviews the code structure and applies generic web guidelines. Framework-specific checks depend on the fetched guidelines content.
How do I provide files for review?
Pass a file path, directory, or glob pattern as an argument to the skill.
What if no files are specified?
The skill will ask you to provide which files or patterns you want reviewed.
Does this skill modify my code?
No, this skill only reads and analyzes your code. It provides recommendations but does not make changes.

Détails du développeur

Auteur

sickn33

Licence

MIT

DĂ©pĂ´t

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

RĂ©f

main

Structure de fichiers

đź“„ SKILL.md