web-design-guidelines

Audit frontend HTML/CSS/JS code for Web Interface Guidelines compliance and accessibility issues.

2|Updated Jan 9, 2026
One-click install
npx skills add https://github.com/NammDev/Goads-Krea --skill web-design-guidelines-nammdev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/NammDev/Goads-Krea/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/NammDev/Goads-Krea --skill web-design-guidelines-nammdev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure their user interfaces comply with current Web Interface Guidelines, reducing accessibility issues and design inconsistencies.

Core Features & Use Cases

  • Guideline-driven reviews: Audit HTML/CSS/JS for conformance to the latest Web Interface Guidelines.
  • Accessibility checks: Identify and suggest fixes for common accessibility gaps (contrast, focus order, semantic markup).
  • UX & visual consistency: Flag deviations from design systems and style guides to maintain cohesive interfaces.
  • Use Case: Imagine a design audit of a new product page; run this Skill to surface accessibility gaps and guideline violations for remediation.

Quick Start

Provide the UI files or patterns to review, and I will assess them against the latest Web Interface Guidelines.

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 frontend HTML and CSS for accessibility and web guidelines compliance?

To audit frontend HTML and CSS for accessibility and web guidelines compliance, provide your UI files to the Skill. It fetches official guidelines and reports violations in a specific file:line format to remediate contrast, focus order, and semantic markup issues.

What is a UX audit for web interface design quality and consistency?

A UX audit for web interface design quality evaluates frontend code against official web guidelines to identify visual deviations and accessibility gaps. It checks semantic markup, contrast, and consistency to ensure cohesive interfaces and reduce design inconsistencies.

Can I review JavaScript UI patterns for semantic markup and focus order issues?

Yes, you can review JavaScript UI patterns for semantic markup and focus order issues. The Skill audits frontend HTML, CSS, and JS code to verify accessibility conformance and flag deviations from current web guidelines, reporting exact file and line numbers.

Does this web guidelines checker work without external dependencies or components?

Yes, this web guidelines checker works without external dependencies or components. It operates independently by fetching the latest web interface guidelines directly from the official source URL to audit your provided design assets and frontend code.

What is the best way to check design assets for web interface guideline violations?

The best way to check design assets for web interface guideline violations is to run an automated audit. This Skill assesses your provided web project assets against official guidelines, surfacing accessibility gaps and visual conformity issues for remediation.

Why does my UI audit report show file and line numbers for accessibility gaps?

Your UI audit report shows file and line numbers to pinpoint exact locations of accessibility gaps and web guideline violations. This prescribed format helps developers quickly locate and remediate issues in frontend HTML, CSS, and JS code.