web-design-guidelines

Review UI code against fetched Web Interface Guidelines for compliance.

Updated Feb 24, 2026
One-click install
npx skills add https://github.com/AWS-Educate/template-nextjs-sanity-tailwind-amplify --skill web-design-guidelines-aws-educate
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/AWS-Educate/template-nextjs-sanity-tailwind-amplify/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/AWS-Educate/template-nextjs-sanity-tailwind-amplify --skill web-design-guidelines-aws-educate

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure that user interface code adheres to established web interface guidelines, improving consistency, accessibility, and overall user experience.

Core Features & Use Cases

  • Code Review: Automatically checks UI code against a predefined set of best practices and design principles.
  • Accessibility Audit: Identifies potential accessibility issues within the UI code.
  • Design Compliance: Verifies that the implementation aligns with modern web design standards.
  • Use Case: A developer can use this skill to quickly audit a new component's code before merging it into the main branch, ensuring it meets the project's design and accessibility requirements.

Quick Start

Review the attached file 'button.css' for compliance with 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 UI code for web standards and accessibility compliance?

To audit UI code for web standards and accessibility compliance, this Skill fetches the latest web interface guidelines and applies all retrieved rules to your specified files. It automatically reviews code to identify accessibility issues and design inconsistencies.

What does a web interface guidelines code review check for?

A web interface guidelines code review checks UI code for adherence to best practices, accessibility issues, and design consistency. It fetches remote rules to verify that your implementation aligns with modern web design standards.

Can I check my CSS files against web design standards automatically?

Yes, you can check CSS files against web design standards automatically by specifying the files for review. The Skill applies fetched web interface guidelines to audit the code for compliance before merging.

Do I need WebFetch to review UI code for design guidelines?

Yes, WebFetch is required to review UI code for design guidelines. The Skill depends on WebFetch to retrieve the latest remote rules, which are then applied to your specified UI files for compliance auditing.

When should I run an accessibility audit on user interface code?

You should run an accessibility audit on user interface code when preparing a new component for merging into the main branch. This ensures the UI implementation meets project requirements for accessibility and design consistency.