skills.rest
inkeep
inkeepOFFICIAL
Explore all skills by this author →
Website𝕏@inkeepGitHub

web-design-guidelines

Analyzes UI code to enforce Web Interface Guidelines and accessibility best practices.

1.4k|162|Updated Sep 5, 2025
Search Tags:#accessibility#a11y#guidelines#ux#web-design#UI review
One-click install
npx skills add https://github.com/inkeep/agents --skill web-design-guidelines-inkeep
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/inkeep/agents/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/inkeep/agents --skill web-design-guidelines-inkeep

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI code often falls out of alignment with accessibility and UX design guidelines, making sites harder to use and inconsistent across pages. This Skill provides a structured review against Web Interface Guidelines to surface violations and improvement opportunities.

Core Features & Use Cases

  • Accessibility checks: color contrast, keyboard navigation, semantic markup.
  • UX consistency review: consistent components, patterns, and interactions across pages.
  • Use case examples: QA engineer reviews a React component library for WCAG 2.1 compliance and provides remediation suggestions.

Quick Start

Provide the UI files or a path (e.g., src/**/components) to review. The skill will load the Guidelines Source from references/guidelines.md if present, or fetch from the upstream URL, then output findings in a concise file:line format.

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 WCAG compliance and UX consistency?▼

To audit UI code for accessibility and UX consistency, provide your web project files or component paths for review. The skill checks semantic markup, color contrast, and keyboard navigation, then outputs findings in a concise file:line format.

What is the best way to check a React component library for accessibility violations?▼

Checking a React component library for accessibility violations involves analyzing the UI code against Web Interface Guidelines. This skill reviews components for WCAG 2.1 compliance, keyboard navigation, and UX consistency, reporting specific remediation suggestions.

Can I use custom web design guidelines for my UI review instead of the default rules?▼

Yes, you can use custom web design guidelines for your UI review. The skill loads custom rules from a references/guidelines.md file if present in your project, otherwise it fetches the upstream guidelines to audit your UI code.

Does an accessibility audit require external dependencies to run?▼

No, an accessibility audit does not require external dependencies to run. The skill operates standalone, reading your UI files and loading guidelines from a local file or fetching them from an upstream URL to evaluate UX and a11y quality.

What accessibility and UX checks are included in a UI code review?▼

Accessibility and UX checks in a UI code review include color contrast validation, keyboard navigation flow, semantic markup verification, and UX consistency across components and pages. Findings are reported in a structured file:line format.

How do I fix semantic markup issues found during an accessibility review?▼

To fix semantic markup issues found during an accessibility review, locate the violations using the reported file:line format. The skill surfaces specific UI code misalignments with Web Interface Guidelines, allowing you to apply targeted remediation suggestions.

Related Skills

Explore More Design & Creative Skills→
alexwoxalexwox

web-design-guidelines

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

Community
Intermediate
knckknckknckknck

wcag-audit-patterns

Audit WCAG 2.2 conformance with axe-core, pa11y, and lighthouse.

Community
Advanced
telum-aitelum-ai
2

visual-testing-web

Run visual regression tests across breakpoints and states with Playwright.

Official
Intermediate
matteocervellimatteocervelli
25

accessibility-checker

Identify and report WCAG 2.1 Level AA accessibility violations on web pages.

Community
Advanced