skills.rest
s1366560
s1366560COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

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

5|2|Updated Jan 24, 2026
Search Tags:#ui#code review#accessibility#web development#ux#design guidelines
One-click install
npx skills add https://github.com/s1366560/agi-demos --skill web-design-guidelines-s1366560
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/s1366560/agi-demos/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/s1366560/agi-demos --skill web-design-guidelines-s1366560

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that web interfaces adhere to established design and accessibility best practices, preventing common UI/UX pitfalls.

Core Features & Use Cases

  • Automated Compliance Checks: Scans UI code against a comprehensive set of web interface guidelines.
  • Guideline Fetching: Dynamically retrieves the latest guidelines from a specified source to ensure up-to-date reviews.
  • Use Case: A developer can use this skill to quickly audit a new component's code before deployment, ensuring it meets accessibility standards and design system requirements.

Quick Start

Review the file 'src/components/Button.tsx' for Web Interface Guidelines compliance.

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 web design guidelines compliance?▼

You can audit UI code by specifying the target file pattern, which triggers an automated review against the latest fetched web interface guidelines to identify accessibility and UX issues.

What is automated accessibility checking for web components?▼

Automated accessibility checking scans your web component files against established design rules to validate UX best practices and pinpoint compliance violations before deployment.

How do I check if my React component meets UX best practices?▼

To check if a component meets UX best practices, point the compliance audit to its source file, and the system will apply dynamically fetched design guidelines to evaluate the code.

Can I use dynamic guideline fetching to review code against updated standards?▼

Yes, dynamic guideline fetching retrieves the latest external rule documents during the audit, ensuring your UI code is reviewed against the most current web interface standards.

What's the best way to validate design system requirements in frontend code?▼

The best way to validate design system requirements is running a targeted file pattern audit, which cross-references your UI code directly against comprehensive web interface guidelines.

Why does my UI code review fail to catch accessibility pitfalls?▼

Your review may fail if it lacks dynamic fetching of external guideline documents, which are required to accurately apply the latest accessibility standards during the code audit.

Related Skills

Explore More Software Engineering Skills→
mohamedgshoaibmohamedgshoaib
5

web-design-guidelines

Audit local UI source files against remote web design and accessibility guidelines.

Community
Intermediate
gaia-reactgaia-react
21

a11y-fixes

Resolve axe-core accessibility violations with standardized WCAG AA code patterns.

Official
Intermediate
TeiNamTeiNam
12

laravel-verification

Automate Laravel project verification for CI/CD pipelines.

Community
Advanced
samymitysamymity
1

browser-qa

Automate end-to-end browser QA for web applications with smoke, interaction, visual regression, and accessibility checks.

Community
Intermediate