skills.rest
mrisoli
mrisoliCOMMUNITY
Explore all skills by this author →
Website𝕏@mgrisoliGitHub

web-design-guidelines

Review UI code files against Vercel Web Interface Guidelines and report findings.

Updated May 28, 2026
Search Tags:#code review#accessibility#ui review#vercel#design guidelines#ux audit#web interface
One-click install
npx skills add https://github.com/mrisoli/pokerhouse --skill web-design-guidelines-mrisoli
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/mrisoli/pokerhouse/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/mrisoli/pokerhouse --skill web-design-guidelines-mrisoli

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually checking UI code against accessibility and design best practices is slow and inconsistent, and teams often miss violations until late in review. ## Core Features & Use Cases - Guideline-Based Review: Fetches the latest Web Interface Guidelines from the vercel-labs repository and applies every rule to your files. - Precise Findings Output: Reports violations in a terse file:line format so issues can be located and fixed quickly. - Flexible File Targeting: Accepts a file path or pattern argument, or prompts you to specify which files to review. - Use Case: Before merging a pull request that changes React components, run a review to catch accessibility and UX guideline violations across the modified files. ## Quick Start Ask the assistant to review your UI files against web interface guidelines, for example by saying "review my UI in 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 review my UI code for accessibility issues?▼

Provide a file path or pattern and the skill fetches the latest Web Interface Guidelines, then checks your files against every rule. Findings are reported in a terse file:line format so you can jump directly to each violation.

What guidelines does this UI review check against?▼

It checks against the Web Interface Guidelines maintained in the vercel-labs/web-interface-guidelines repository. The rules are fetched fresh from the source URL before each review, so you always audit against the latest version.

Can I review multiple files or a whole directory at once?▼

Yes, you can pass a file pattern as the argument instead of a single file. If you provide no files at all, the skill asks you which files you want reviewed before proceeding.

Does the UI review work without an internet connection?▼

No, the skill fetches the guidelines from a remote GitHub raw URL using WebFetch before each review. Without network access it cannot retrieve the rules and therefore cannot perform the audit.

What output format does the design audit produce?▼

Findings are output in a terse file:line format as specified by the fetched guidelines. This makes each violation easy to locate in your editor or pipe into other tooling.

Related Skills

Explore More Design & Creative Skills→
weebcoder101weebcoder101
3

frontend

Provide React frontend development guidelines for component architecture, state management, and TailwindCSS styling.

Community
Intermediate
Strategic-AutomationStrategic-Automation
6

requesting-code-review

Automate pre-commit verification with security scans, quality gates, and reviewer subagent.

Official
Advanced
samymitysamymity
1

browser-qa

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

Community
Intermediate
airoweairowe
14

Accessibility Audit Skill

Audit web projects for WCAG 2.1 violations using axe-core and eslint-plugin-jsx-a11y.

Community
Advanced