web-design-guidelines

Fetch and apply Web Interface Guidelines to review UI code compliance.

Updated Feb 15, 2026
One-click install
npx skills add https://github.com/aldy505/atrium --skill web-design-guidelines-aldy505
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/aldy505/atrium/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/aldy505/atrium --skill web-design-guidelines-aldy505

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that web interface code adheres to established design and accessibility guidelines, improving the quality and consistency of user interfaces.

Core Features & Use Cases

  • Automated Review: Fetches the latest guidelines and checks provided files against them.
  • Compliance Auditing: Identifies deviations from best practices in UI code.
  • Use Case: Use this Skill to audit a new component's code for accessibility issues and design consistency before it's merged.

Quick Start

Review the UI code in the 'src/components' directory 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 check my UI code for design guideline compliance?

To check UI code for design guideline compliance, you can review your files against fetched web interface rules. This process identifies deviations from established design guidelines and UX best practices in your codebase.

What is a UI code audit for accessibility and UX best practices?

A UI code audit for accessibility checks your components against web interface guidelines to find deviations. It fetches the latest markdown rules and applies them to your files to verify UX best practices.

How do I audit web components for accessibility issues before merging?

You audit web components for accessibility issues by fetching external markdown content containing the latest rules and applying it to your specified files. This identifies design inconsistencies before code is merged.

Do I need to provide my own design guidelines for a UI review?

You do not need to provide your own design guidelines for a UI review. The process fetches the latest external markdown content containing the rules automatically and applies them to your files.

What's the best way to verify UX best practices in frontend code?

The best way to verify UX best practices in frontend code is an automated review that fetches the latest web interface guidelines and checks your specified files against them to highlight deviations.

Can I review multiple files in a directory for web interface guideline compliance?

Yes, you can review multiple files in a directory for web interface guideline compliance. You can specify a directory like 'src/components' to audit all included UI code against the fetched rules.