web-design-guidelines

Review UI code against Web Interface Guidelines and accessibility standards.

Updated Feb 15, 2026
One-click install
npx skills add https://github.com/akghosh111/scyra --skill web-design-guidelines-akghosh111
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/akghosh111/scyra/tree/main/.cursor/skills/web-design-guidelines
Command: npx skills add https://github.com/akghosh111/scyra --skill web-design-guidelines-akghosh111

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that user interfaces adhere to established web design best practices and accessibility standards, preventing common design flaws and improving user experience.

Core Features & Use Cases

  • Automated Code Review: Scans UI code files for compliance with a predefined set of web interface guidelines.
  • Accessibility Checks: Identifies potential accessibility issues within the code.
  • Use Case: When you've made changes to your website's front-end code, use this Skill to quickly audit the updated components against Vercel's Web Interface Guidelines to catch any regressions or violations before deployment.

Quick Start

Use the web-design-guidelines skill to review the file 'src/components/Button.tsx'.

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

To audit UI code for web design guideline compliance, you can use an automated review process that scans your front-end files. This skill fetches predefined rules from a URL and applies them to your components to catch design regressions and violations.

What is the best way to check front-end components for accessibility issues?

Checking front-end components for accessibility issues is best handled by scanning the UI code for compliance with web interface guidelines. This automated accessibility check identifies potential issues within your code to help improve overall user experience.

Can I review my React components against Vercel's Web Interface Guidelines?

Yes, you can review React components like 'src/components/Button.tsx' against Vercel's Web Interface Guidelines. The review process fetches the latest guidelines from a specified URL and applies all defined rules directly to your provided files.

Does this UI code review tool require any external dependencies?

No, this UI code review tool does not require any external dependencies to function. It operates directly within your front-end development workflow to audit design consistency and adherence to best practices without needing additional packages.

How do I catch accessibility regressions in my front-end code before deployment?

To catch accessibility regressions in front-end code before deployment, run an automated review against web interface guidelines. This flags potential violations and design flaws in your updated components, ensuring strict adherence to accessibility standards.