skills.rest
do-ob-io
do-ob-ioOFFICIAL
Explore all skills by this author →
GitHub

web-design-guidelines

Analyze HTML, CSS, and JavaScript UI code against Web Interface Guidelines.

Updated Jun 14, 2024
Search Tags:#accessibility#frontend#UI#review#design-review#web-design-guidelines
One-click install
npx skills add https://github.com/do-ob-io/workspace --skill web-design-guidelines-do-ob-io
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/do-ob-io/workspace/tree/main/.code/skills/web-design-guidelines
Command: npx skills add https://github.com/do-ob-io/workspace --skill web-design-guidelines-do-ob-io

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure UI code adheres to Web Interface Guidelines, catching accessibility and semantic issues before deployment.

Core Features & Use Cases

  • Guideline-driven review: Reads local guidelines and checks UI files (HTML, CSS, JS/JSX) for conformance.
  • Actionable findings: Outputs issues in a concise file:line format to facilitate quick remediation.
  • Use Case: Ideal for audits of web interfaces, style guides compliance, and UX reviews across projects.

Quick Start

Use the web-design-guidelines skill to review your UI files by providing a file path or pattern. The skill will read the local guidelines, analyze the files, and output findings in the file:line format.

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 compliance?▼

To audit UI code for accessibility compliance, provide your HTML, CSS, or JS/JSX file paths to the skill. It reads local Web Interface Guidelines and reports semantic and accessibility violations in a concise file:line format.

What is a guideline-driven design review for web interfaces?▼

A guideline-driven design review checks UI code against local Web Interface Guidelines to catch accessibility and semantic issues. It analyzes HTML, CSS, and JavaScript projects to ensure UX QA and design consistency before deployment.

Can I review JSX files for web design guideline violations?▼

Yes, you can review JSX files for web design guideline violations. The skill analyzes UI files across HTML, CSS, and JS/JSX projects, reading local guidelines to output conformance issues in a file:line format.

What is the best way to check HTML and CSS for semantic issues?▼

The best way to check HTML and CSS for semantic issues is running an automated review against local Web Interface Guidelines. This process catches accessibility problems early and outputs actionable findings for quick remediation.

How are accessibility violations reported during a UX QA review?▼

Accessibility violations during a UX QA review are reported in a concise file:line format. This actionable output pinpoints exact locations of non-conformance in your UI code to facilitate quick remediation.

Related Skills

Explore More Design & Creative Skills→
sulthonuladibsulthonuladib

web-design-guidelines

Identify UI conformance issues against Web Interface Guidelines in HTML/CSS/JS codebases.

Community
Intermediate
noartemnoartem

web-design-guidelines

Audit HTML/CSS/JS files against Web Interface Guidelines and report violations.

Community
Intermediate
lord-vinayaklord-vinayak

a11y-test-plan

Generate accessibility test plans with manual and automated WCAG test cases.

Community
Advanced
ReefBytes-OwnerReefBytes-Owner
1

a11y-audit

Audits web content for WCAG 2.2 AA conformance and outputs an Accessibility Audit Report.

Community
Advanced