skills.rest
calcom
calcomOFFICIAL
Explore all skills by this author →
Website𝕏@calcomGitHub

web-design-guidelines

Evaluate HTML, CSS, and JS code against Web Interface Guidelines.

47.4k|14.7k|Updated Mar 22, 2021
Search Tags:#accessibility#frontend#UI#compliance#review#guidelines#web-design
One-click install
npx skills add https://github.com/calcom/cal.com --skill web-design-guidelines-calcom
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/calcom/cal.com/tree/main/.opencode/skill/web-design-guidelines
Command: npx skills add https://github.com/calcom/cal.com --skill web-design-guidelines-calcom

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams verify that UI code adheres to Web Interface Guidelines, catching accessibility and UX issues early in the development cycle.

Core Features & Use Cases

  • Automated UI conformity checks against established Web Interface Guidelines.
  • Accessibility auditing for keyboard navigation, color contrast, semantic markup, and ARIA usage.
  • Use Case: Review a PR containing HTML/CSS/JS to identify accessibility violations before merging.

Quick Start

Use the web-design-guidelines skill to review UI files such as src/index.html or components/**/*.tsx for guideline compliance.

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 UI code for accessibility and UX quality?▼

To audit UI code for accessibility and UX quality, you can automatically evaluate HTML, CSS, and JS files against established Web Interface Guidelines to catch keyboard navigation, color contrast, and ARIA usage violations early in development.

Can I review a pull request for web accessibility compliance?▼

Yes, you can review a pull request for web accessibility compliance by evaluating the HTML, CSS, and JS codebase against trusted interface guidelines to identify semantic markup and UX issues before merging.

What is automated UI conformity checking against web interface guidelines?▼

Automated UI conformity checking is the process of parsing target web files to evaluate HTML, CSS, and JS code against trusted Web Interface Guidelines, reporting accessibility violations in a concise, actionable format.

Does this accessibility review work with individual frontend files?▼

Yes, this accessibility review works with individual frontend files across web projects, successfully parsing target HTML, CSS, and JS files to fetch the latest guidelines and report conformity findings.

When do I need to check frontend code for ARIA and semantic markup?▼

You need to check frontend code for ARIA and semantic markup when preparing a pull request or modifying UI files, ensuring keyboard navigation and color contrast meet accessibility standards before merging.

Related Skills

Explore More Design & Creative Skills→
allthingslinuxallthingslinux
4

web-design-guidelines

Evaluate UI files against Web Interface Guidelines and report violations.

Official
Basic
jaem1n207jaem1n207
18

accessibility-auditor

Audit web pages and UI components against WCAG 2.2 accessibility standards.

Community
Advanced
knowletknowlet
2

code-reviewer

Automate code reviews for architecture, coding standards, and spec conformance.

Community
Advanced
Bonny94ITABonny94ITA

accessibility

Automate WCAG 2.2 accessibility audits using Lighthouse and manual checks.

Community
Advanced