skills.rest
msichterman
msichtermanCOMMUNITY
Explore all skills by this author →
Website𝕏@mattsichtermanGitHub

web-design-guidelines

Audit UI code against the latest Web Interface Guidelines and report findings in file:line format.

Updated Feb 3, 2026
Search Tags:#accessibility#UI#audit#ux#code-review#web-design-guidelines
One-click install
npx skills add https://github.com/msichterman/templatesick --skill web-design-guidelines-msichterman
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/msichterman/templatesick/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/msichterman/templatesick --skill web-design-guidelines-msichterman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure UI code aligns with Web Interface Guidelines, reducing design debt and accessibility gaps by providing an automated review of UI assets against the latest rules.

Core Features & Use Cases

  • Automated guidelines checks: fetch and apply the most current Web Interface Guidelines to UI code during audits.
  • File/pattern review: specify files or glob patterns to constrain the scope of the assessment.
  • Actionable results: produce concise findings in a file:line format to quickly locate and fix issues.
  • Use Case: a design team wants to verify a new component library's accessibility and UX consistency across web and mobile web builds.

Quick Start

To begin, provide the UI files or patterns you want checked (e.g., src/components/Button.tsx src/pages/index.tsx). The skill will fetch the latest guidelines and return a terse set of violations.

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 accessibility and UX best practices?▼

Auditing UI code for accessibility involves checking components against Web Interface Guidelines. This skill reads your specified UI files, fetches current rules, and outputs concise file:line violations to help locate and resolve issues.

What is the best way to check my component library for Web Interface Guidelines compliance?▼

The best way to check component library compliance is an automated review against current Web Interface Guidelines. Provide your source files to generate terse, actionable findings that pinpoint accessibility and UX inconsistencies.

Can I review specific files or glob patterns for UI accessibility issues?▼

You can review specific files or glob patterns for UI accessibility issues. The skill accepts user-specified file paths or glob patterns to constrain the assessment scope and generate targeted, actionable results.

How does an automated UI code review format accessibility violations?▼

An automated UI code review formats accessibility violations in a concise file:line format. This reporting style allows design and front-end teams to quickly locate and resolve issues within their UI components and styles.

Do I need to manually update Web Interface Guidelines for my UX audit?▼

You do not need to manually update Web Interface Guidelines for your UX audit. The skill automatically fetches the latest rules from the official source to evaluate your UI code against current standards.

Related Skills

Explore More Design & Creative Skills→
quanngynxquanngynx

web-design-guidelines

Review web interface source files for compliance with Web Interface Guidelines.

Community
Intermediate
ahiendzahiendz
3

web-design-guidelines

Fetch Web Interface Guidelines and report UI compliance issues in file:line format.

Community
Intermediate
lucaspedrozaemlucaspedrozaem
1

design-system

Define design tokens, components, and governance for SaaS front-end stacks.

Community
Advanced
haJ1thaJ1t

nist-csf-scanner

Scan codebases and infrastructure against NIST CSF 2.0 compliance categories.

Community
Advanced