skills.rest
dthompsonfl
dthompsonflCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Audit HTML, CSS, and ARIA against Web Interface Guidelines and report violations.

Updated Dec 26, 2025
Search Tags:#ui#accessibility#frontend#audit#component#design-review#web-guidelines
One-click install
npx skills add https://github.com/dthompsonfl/crispy-fishstick --skill web-design-guidelines-dthompsonfl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/dthompsonfl/crispy-fishstick/tree/main/docs/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/dthompsonfl/crispy-fishstick --skill web-design-guidelines-dthompsonfl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web UI guidelines ensure accessibility, consistency, and usable interfaces across a project.

Core Features & Use Cases

  • Component-level auditing for semantics, color contrast, focus management, and responsive behavior across breakpoints.
  • Automated checks against the latest Web Interface Guidelines for HTML/CSS/ARIA to catch accessibility issues and UX deviations.
  • Use Case: A developer wants to verify a new page or component against guidelines before deployment to avoid accessibility regressions.

Quick Start

Inspect the project files for guideline compliance and generate a report of violations.

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 frontend project for UI guideline compliance?▼

To audit frontend UI compliance, inspect HTML, CSS, and ARIA attributes against Web Interface Guidelines to identify accessibility and usability violations, reporting them in a concise file:line format.

What is the best way to check component accessibility before deployment?▼

Checking component accessibility involves auditing semantics, color contrast, focus management, and responsive behavior across breakpoints to catch accessibility issues and UX deviations before deployment.

Can I use this to verify ARIA attributes across a design system?▼

Yes, you can apply it to design systems and component libraries to audit ARIA attributes and UX conformance, ensuring consistent accessibility and usability across multiple pages and components.

Does the audit work on existing frontend codebases?▼

Yes, the audit works on existing frontend projects by fetching the latest guidelines, parsing project files, and reporting violations to prevent accessibility regressions.

Why do I need to audit HTML and CSS for web interface guidelines?▼

Auditing HTML and CSS for web interface guidelines ensures accessibility, consistency, and usable interfaces across your project by enforcing compliance with established standards.

What limitations should I expect when auditing responsive behavior across breakpoints?▼

When auditing responsive behavior across breakpoints, expect limitations requiring manual review of complex dynamic states, as the audit primarily parses project files to report static code violations.

Related Skills

Explore More Design & Creative Skills→
hotriluanhotriluan

ck:web-design-guidelines

Validate UI code against the latest Web Interface Guidelines.

Community
Intermediate
WASD6570WASD6570
1

web-design-guidelines

Audits frontend source files for accessibility, UX, and web guideline violations.

Community
Intermediate
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic
JhabbigJhabbig

wcag-audit-patterns

Audit web interfaces for WCAG 2.2 accessibility violations.

Community
Advanced