web-design-guidelines

Fetch the latest Web Interface Guidelines and audit React/Next.js UI code.

12|Updated Dec 25, 2024
One-click install
npx skills add https://github.com/whyte25/reusables --skill web-design-guidelines-whyte25
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/whyte25/reusables/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/whyte25/reusables --skill web-design-guidelines-whyte25

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you catch accessibility, usability, and design compliance issues early by reviewing your UI code against a standardized set of Web Interface Guidelines.

Core Features & Use Cases

  • Guideline-driven UI review: Fetches the latest Web Interface Guidelines ruleset, then checks your provided files against those rules.
  • Flexible input targeting: Supports reviewing specific files or patterns, and prompts you to specify targets when none are provided.
  • Actionable findings output: Reports issues in the terse file:line format required by the guidelines to speed up fixes.

Quick Start

Ask it to review the UI files you want to audit, for example: review pages and components under src/pages and src/components for Web Interface Guidelines 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 my React code for accessibility and UX compliance?

You can audit React UI code by fetching the latest Web Interface Guidelines ruleset and applying it to your files. This process checks accessibility, usability, and design best practices, producing actionable file:line findings to speed up fixes.

What is the best way to check web front ends against design best practices?

Checking web front ends against design best practices involves running a standardized guidelines review on your source files. It evaluates UI code for compliance with established rules and outputs specific issues in a terse file:line format for immediate remediation.

Can I review specific file patterns in my Next.js project for web compliance?

Yes, you can review specific files or patterns in your Next.js project for web compliance. If no targets are provided, the system prompts you to specify them, ensuring the audit focuses precisely on the UI components or pages you want evaluated.

Do I need to manually provide the ruleset for a UI audit?

No, you do not need to manually provide the ruleset for a UI audit. The system automatically retrieves the latest Web Interface Guidelines by fetching the guidance source from the official command URL before applying the rules to your code.

What format does the UI code review output for found issues?

The UI code review outputs found issues in a terse file:line format specified by the guidelines. This format directly maps findings to exact locations in your source code, helping you quickly identify and fix accessibility and design compliance problems.