web-design-guidelines

Compare UI files against Web Interface Guidelines and report compliance gaps.

1|Updated Jan 13, 2026
One-click install
npx skills add https://github.com/velcrafting/codex-skills --skill web-design-guidelines-velcrafting
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/velcrafting/codex-skills/tree/main/skills/vercel/web-design-guidelines
Command: npx skills add https://github.com/velcrafting/codex-skills --skill web-design-guidelines-velcrafting

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams ensure web interfaces conform to established design and accessibility guidelines, reducing usability risks and rework.

Core Features & Use Cases

  • Guideline conformance checks: Automatically assess UI files against the latest Web Interface Guidelines.
  • Accessibility and UX review: Identify issues related to color contrast, semantics, and interaction patterns.
  • Use Case: Take a UI component library and audit it for guideline violations to prepare a compliance report.

Quick Start

Provide the UI files or patterns to audit and I will return concrete guideline-based findings.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit my UI code for accessibility and UX compliance?

To audit UI code for accessibility compliance, provide UI files or patterns to compare against Web Interface Guidelines. The process identifies color contrast, semantics, and interaction issues, returning concise file:line style notes for each violation found.

What web design guidelines are checked during a UI accessibility audit?

A UI accessibility audit checks web design guidelines for color contrast, semantics, and interaction patterns. It validates provided UI files against the latest fetched Web Interface Guidelines to identify specific compliance gaps.

Can I audit a UI component library for guideline violations?

Yes, you can audit a UI component library for guideline violations by providing the component files. The audit compares each pattern against Web Interface Guidelines to produce a compliance report with concrete file:line findings.

How do I find accessibility and UX issues in my web interface files?

To find accessibility and UX issues in web interface files, submit the files for a conformance check. The review validates code against established design guidelines and responds with concise file:line style notes detailing the violations.

What is the best way to check web interface guideline conformance across projects?

The best way to check web interface guideline conformance across projects is to apply automated checks to provided UI files. This compares patterns against the latest Web Interface Guidelines, producing concise file:line style notes for all compliance gaps.

Why does my UI accessibility audit return file:line style notes?

UI accessibility audits return file:line style notes to provide concise, actionable feedback. This format validates results against fetched guidelines, pinpointing exact locations of color contrast, semantic, or interaction pattern violations for quick resolution.