skills.rest
songyinggoh
songyinggohCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Fetch latest web interface guidelines and review UI code for compliance.

Updated Jan 23, 2026
Search Tags:#code quality#accessibility#frontend#ui review#design audit#web guidelines
One-click install
npx skills add https://github.com/songyinggoh/renovation-agent-monorepo --skill web-design-guidelines-songyinggoh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/songyinggoh/renovation-agent-monorepo/tree/main/.claude/skills/skills/web-design-guidelines
Command: npx skills add https://github.com/songyinggoh/renovation-agent-monorepo --skill web-design-guidelines-songyinggoh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the review of UI code to ensure it complies with established Web Interface Guidelines, improving consistency and quality.

Core Features & Use Cases

  • Automated Compliance Checks: Scans specified files against a comprehensive set of design and accessibility rules.
  • Guideline Fetching: Dynamically retrieves the latest guidelines from a remote source before each review.
  • Use Case: A developer can use this skill to quickly audit a new component's code for adherence to the company's design system and accessibility standards before merging it.

Quick Start

Review the UI code in the file 'src/components/Button.tsx' against the latest 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 compliance with web interface guidelines?▼

To audit UI code for web interface guidelines, provide specific component files or patterns for analysis. The Skill fetches the latest remote rules and outputs findings in a terse file:line format.

Can I check frontend accessibility standards automatically before merging code?▼

Yes, you can check frontend accessibility standards automatically by running a design audit on your specified files. The review analyzes your code against dynamically fetched rules to identify compliance issues.

What is the best way to ensure a new component meets design system rules?▼

The best way to ensure a component meets design system rules is to run an automated compliance check. This reviews your provided source files against a comprehensive set of fetched web guidelines.

Does this automated design audit work with any frontend framework?▼

The design audit works with any frontend framework by analyzing the provided UI code files or patterns directly. It checks the source code structure against fetched web interface guidelines.

How are the web interface guideline rules updated during a UI review?▼

During a UI review, the web interface guideline rules are updated by dynamically fetching the latest standards from a specified remote URL before analyzing your provided code files.

What format does the code quality review output for identified issues?▼

The code quality review outputs identified issues in a terse file:line format. This points directly to the exact locations in your UI code where web interface guidelines were not met.

Related Skills

Explore More Design & Creative Skills→
riethmayerriethmayer
2

web-design-guidelines

Fetch Web Interface Guidelines and report UI code violations in file:line format.

Community
Intermediate
arthtyagiarthtyagi
1

web-design-guidelines

Review UI code against the latest Web Interface Guidelines.

Community
Intermediate
mvillmowmvillmow
18

quality-run-linters

Run configured linters including mojo-format, markdownlint, and pre-commit checks in check or fix mode.

Community
Intermediate
buitrankimlongbuitrankimlong

review-ui

Automate UI component reviews against a design system's custom rules.

Community
Advanced