skills.rest
nguyenvanlinh1902
nguyenvanlinh1902COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Validate UI code against Web Interface Guidelines and output file:line findings.

Updated Dec 16, 2025
Search Tags:#ui#accessibility#a11y#frontend#usability#guidelines#design-review
One-click install
npx skills add https://github.com/nguyenvanlinh1902/trackingSolar --skill web-design-guidelines-nguyenvanlinh1902
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/nguyenvanlinh1902/trackingSolar/tree/main/.opencode/skill/web-design-guidelines
Command: npx skills add https://github.com/nguyenvanlinh1902/trackingSolar --skill web-design-guidelines-nguyenvanlinh1902

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure UI code complies with Web Interface Guidelines by evaluating accessibility, usability, and visual design against the latest published rules.

Core Features & Use Cases

  • Fetch the latest guidelines from the guidelines source URL
  • Read the specified files or patterns
  • Apply all rules from the guidelines and output findings in the terse file:line format
  • Use Case: A designer or developer can audit a website or UI component by running this Skill against the project files to surface accessibility and UX issues.

Quick Start

Provide the target UI files or patterns and run the review to check them against the latest 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 my UI code for accessibility and usability issues?▼

To audit UI code for accessibility and usability, you can run a review against Web Interface Guidelines. The Skill fetches the latest rules, reads your specified frontend files, and outputs findings in a terse file:line format.

What is the best way to enforce a11y best practices in frontend files?▼

Enforcing a11y best practices involves validating frontend code against a dedicated guidelines source. This process applies accessibility rules to your codebase and generates a direct file:line report of all violations.

How do I check my website design against the latest UX guidelines?▼

Checking website design against UX guidelines requires fetching the latest rules from a guidelines source URL and applying them to your project files. This surfaces design quality and accessibility issues directly in the code.

Can I review specific UI components instead of the whole project directory?▼

Yes, you can review specific UI components by providing target file paths or patterns. If no files are specified, the review process will prompt you to identify which files need to be checked.

What format does the accessibility design review output use?▼

The accessibility design review outputs findings in a terse file:line format. This format directly maps each accessibility and UX violation to its exact location in your frontend code.

Related Skills

Explore More Design & Creative Skills→
DyreanDyrean

web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and UX gaps.

Community
Intermediate
joe-watkinsjoe-watkins
1

a11y-validator

Re-run accessibility tests and verify acceptance criteria against magentaa11y-mcp.

Community
Intermediate
thktthkt
11

test

Execute project tests and analyze code coverage with package managers and linters.

Community
Intermediate
bingeli1379bingeli1379
2

accessibility

Audit web accessibility for WCAG 2.1 AA compliance using axe-core and eslint-plugin-jsx-a11y.

Community
Intermediate