web-design-guidelines

Analyze UI files against Web Interface Guidelines and report issues in file:line format.

78|18|Updated Feb 20, 2025
One-click install
npx skills add https://github.com/nakafaai/nakafa.com --skill web-design-guidelines-nakafaai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/nakafaai/nakafa.com/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/nakafaai/nakafa.com --skill web-design-guidelines-nakafaai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams verify that UI designs and implementation comply with current Web Interface Guidelines, reducing accessibility issues and UX gaps.

Core Features & Use Cases

  • Guideline-based Review: Compare UI code and assets against the latest guidelines to surface violations.
  • Guidance-Driven Audit: Focus checks on accessibility, semantic structure, color contrast, responsive behavior, and usability best practices.
  • Use Case: A QA engineer runs a UI review across a new app module to identify accessibility issues and adherence to design standards.

Quick Start

Use this Skill to review the UI files of your project against the latest Web Interface Guidelines; provide the UI files or a path/pattern for evaluation. The Skill will fetch guidelines, evaluate the files, and report issues in a concise 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 my UI code for accessibility and web guidelines compliance?

To audit UI code for accessibility and web guidelines compliance, provide your front-end files or a path to this Skill. It fetches the latest rules, evaluates the files against them, and outputs issues in a file:line format.

What is a UI review against web interface guidelines?

A UI review against web interface guidelines is an evaluation of front-end code and design assets to identify accessibility issues, semantic structure errors, and UX gaps based on current standards.

Can I check design assets and documentation for accessibility issues?

Yes, you can check design assets and documentation for accessibility issues. This Skill evaluates web front-end code, design files, and documentation to surface violations and adherence to usability best practices.

How do I check color contrast and responsive behavior in my web app?

To check color contrast and responsive behavior, run a guidance-driven audit on your UI files. The Skill compares your code against fetched guidelines to identify violations in these specific areas.

Does this UI review work with any front-end framework?

Yes, this UI review works with any project needing accessibility and UX checks. It applies to web front-end code, design assets, and documentation across different frameworks by evaluating the files directly.

Why does my UI audit output show file and line numbers?

Your UI audit output shows file and line numbers to provide a concise format for locating violations. This helps developers quickly navigate to the exact code sections failing the web interface guidelines evaluation.