skills.rest
maplin-co
maplin-coOFFICIAL
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI code against fetched Web Interface Guidelines and report violations.

Updated Jan 9, 2026
Search Tags:#ui#accessibility#design review#code audit#ux#web standards
One-click install
npx skills add https://github.com/maplin-co/ai-course --skill web-design-guidelines-maplin-co
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/maplin-co/ai-course/tree/main/.opencode/skill/web-design-guidelines
Command: npx skills add https://github.com/maplin-co/ai-course --skill web-design-guidelines-maplin-co

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers ensure their web interface code adheres to established design and accessibility best practices, preventing common UI/UX issues before deployment.

Core Features & Use Cases

  • Automated Code Review: Scans specified files against a set of predefined web interface guidelines.
  • Compliance Checking: Identifies violations related to accessibility, usability, and design consistency.
  • Use Case: A developer can use this skill to audit a new component's code for accessibility compliance before merging it into the main branch.

Quick Start

Review the file 'src/components/Button.jsx' for UI guideline 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 automate a code audit for web accessibility and UI standards?▼

Automate a UI code audit by scanning user-provided files against the latest Web Interface Guidelines fetched from a specified URL. It identifies and reports accessibility and design violations in a terse file:line format.

What is a UI design review and how does it catch usability issues in components?▼

A UI design review checks component code against predefined web interface guidelines to ensure compliance. It identifies violations related to accessibility, usability, and design consistency before deployment.

Can I check specific component files like Button.jsx for accessibility compliance?▼

Yes, you can check specific files like Button.jsx for accessibility compliance. The review applies fetched web standard rules directly to your user-provided files or patterns to detect UI issues.

How do I review my web interface code against a specific set of external design rules?▼

Review web interface code by providing your files and a URL containing the design rules. The process fetches the latest rules from that URL and applies them to identify standard violations.

Does this UI code review work without installing additional dependencies?▼

Yes, the UI code review works without requiring additional dependencies. It operates standalone by fetching the latest rules from a specified URL and applying them to your provided files.

What is the best way to format web standard violations for pre-merge code audits?▼

The best way to format web standard violations is using a terse file:line output. This format pinpoints exact locations of accessibility and design inconsistencies for quick pre-merge resolution.

Related Skills

Explore More Software Engineering Skills→
BangjjackBangjjack

web-design-guidelines

Review UI code against Web Interface Guidelines and report findings in file:line format.

Official
Intermediate
FnSK4R17sFnSK4R17s
1

web-design-guidelines

Audit UI code for Web Interface Guidelines compliance and report violations.

Community
Intermediate
SensLiaoSensLiao

qa-a11y-compliance

Scan web applications for WCAG 2.2 AA accessibility compliance.

Community
Advanced
konneh-hubkonneh-hub

web-design-guidelines

Review UI code against fetched Web Interface Guidelines for compliance.

Community
Intermediate