web-design-guidelines

Review UI code against fetched Web Interface Guidelines rules.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure that user interface code adheres to established web interface guidelines, promoting consistency, accessibility, and best practices across web applications.

Core Features & Use Cases

  • UI Code Review: Automatically checks provided UI code files against a set of predefined web interface guidelines.
  • Compliance Auditing: Identifies areas where the UI design or implementation deviates from best practices.
  • Use Case: A developer can use this skill to quickly audit a new component's code before merging it, ensuring it meets the project's design and accessibility standards.

Quick Start

Use the web-design-guidelines skill to review the file 'src/components/Button.tsx'.

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 if my UI code meets web design guidelines?

To check if your UI code meets web design guidelines, you can review your source files against a set of predefined rules. This skill fetches the latest web interface guidelines from a specified URL and analyzes your provided files, outputting compliance findings in a terse file:line format.

How can I automate accessibility compliance auditing for web components?

You can automate accessibility compliance auditing by running your UI code files through an automated review process. This skill checks your provided patterns against established web interface guidelines, identifying areas where the UI implementation deviates from accessibility best practices.

Can I use a custom URL for fetching web interface guidelines during a code review?

Yes, you can use a custom URL for fetching web interface guidelines during a code review. The skill functions by retrieving the latest compliance rules from a specified URL, allowing you to audit your UI code against your project's specific design and accessibility standards.

What is the best way to audit UX design against best practices before merging?

The best way to audit UX design against best practices before merging is to automatically review your component's code against established web interface guidelines. This skill outputs terse file:line findings, highlighting deviations from design and accessibility standards quickly.

Does this UI code review skill output detailed reports or line-by-line findings?

This UI code review skill outputs line-by-line findings rather than detailed reports. It analyzes your provided files or patterns against fetched web interface guidelines and returns results in a terse file:line format, pinpointing exact locations of compliance deviations.

Why does my web design guidelines check only return terse file:line outputs?

Your web design guidelines check returns terse file:line outputs because the skill is designed to concisely pinpoint exact locations of compliance deviations. It analyzes your UI code against fetched rules to highlight specific areas requiring attention without generating verbose explanatory reports.