skills.rest
hwchiu
hwchiuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Fetch latest Web Interface Guidelines and review UI code files for compliance.

Updated Mar 7, 2026
Search Tags:#ui#code review#accessibility#frontend#web design#guidelines
One-click install
npx skills add https://github.com/hwchiu/momo --skill web-design-guidelines-hwchiu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/hwchiu/momo/tree/main/.claude/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/hwchiu/momo --skill web-design-guidelines-hwchiu

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

  • Automated Review: Fetches the latest guidelines and checks provided files against them.
  • Compliance Checking: Identifies deviations from best practices in UI code.
  • Use Case: A developer can use this skill to audit a new component's UI code for accessibility and design standard compliance before merging it into the main branch.

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 my frontend code for web design guidelines and accessibility compliance?▼

To check frontend code for web design guidelines and accessibility compliance, this Skill fetches the latest rules and audits specified UI files to identify deviations from design consistency standards.

What is the best way to automate UI code review for design consistency before merging?▼

Automating UI code review for design consistency involves fetching established web interface guidelines and applying rule-based checks to component files, which highlights accessibility issues before merging code into the main branch.

Can I use this to audit specific component files like a React Button component?▼

Yes, you can audit specific component files by providing the file path, such as 'src/components/Button.tsx', to review the UI code against the latest web interface guidelines for standard compliance.

Does web design compliance checking require external dependencies or rule configurations?▼

Web design compliance checking requires fetching external guidelines to apply rule-based checks, but operates with no internal dependencies, directly auditing provided front-end code files against the fetched standards.

When do I need to run an accessibility audit on my UI code?▼

You need to run an accessibility audit on UI code when ensuring user interface adherence to established web interface guidelines, typically during front-end development workflows to improve overall user experience before deployment.

Related Skills

Explore More Software Engineering Skills→
tlswhdghks42tlswhdghks42

web-design-guidelines

Fetch remote Web Interface Guidelines and review UI code for compliance.

Community
Intermediate
andebet07-ossandebet07-oss

figma-implement-design

Translate Figma designs into UI code using project design tokens.

Community
Advanced
2nth-ai2nth-ai
1

tech/design

Provide design tools and principles for UI and product design.

Official
Advanced
HouseofmvpsHouseofmvps
115

a11y

Detect and fix deterministic WCAG 2.2 A/AA accessibility violations in HTML files.

Community
Advanced