skills.rest
LeroyAdonis
LeroyAdonisCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

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

Updated Mar 2, 2026
Search Tags:#code review#accessibility#ui review#design guidelines#ux audit#web interface
One-click install
npx skills add https://github.com/LeroyAdonis/kitfix-2.0 --skill web-design-guidelines-leroyadonis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/LeroyAdonis/kitfix-2.0/tree/main/.github/skills/web-design-guidelines
Command: npx skills add https://github.com/LeroyAdonis/kitfix-2.0 --skill web-design-guidelines-leroyadonis

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually checking UI code against design and accessibility best practices is slow and inconsistent. This Skill automates the review by fetching the latest Web Interface Guidelines and auditing your files against every rule. ## Core Features & Use Cases - Guideline-Based UI Review: Fetches the latest Web Interface Guidelines from the vercel-labs repository and applies all rules to your code. - Accessibility and UX Audits: Checks files for compliance issues covering accessibility, design consistency, and interface best practices. - Precise Findings Output: Reports violations in a terse file:line format so issues can be located and fixed quickly. - Use Case: Before shipping a new Next.js page, ask for a review of your component files to catch accessibility and design guideline violations early. ## Quick Start Review my UI components in app/page.tsx against the web interface 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 review my UI code for accessibility issues?▼

Provide the files or pattern you want reviewed, and the Skill fetches the latest Web Interface Guidelines and checks your code against every rule. Findings are reported in a file:line format so you can jump directly to each issue.

What are the Web Interface Guidelines this review uses?▼

The guidelines come from the vercel-labs/web-interface-guidelines repository, fetched fresh from the source URL before each review. This ensures the audit always applies the most current rules rather than a stale cached copy.

Can I review multiple files or a file pattern at once?▼

Yes, you can pass a file or pattern argument to review multiple files in one run. If you do not specify any files, the Skill will ask which files you want reviewed.

What output format does the UI review produce?▼

Findings are output in a terse file:line format as specified by the fetched guidelines. Each finding points to the exact location of the violation so issues can be fixed quickly.

Does the UI review work offline or without network access?▼

No, the Skill requires network access because it fetches the latest guidelines from a remote URL before each review. Without connectivity, the rules cannot be retrieved and the audit cannot run.

Related Skills

Explore More Design & Creative Skills→
oto1720oto1720
1

nextjs-ui-standards

Defines a Next.js UI standards framework for component creation, review, and generation.

Community
Advanced
DYAI2025DYAI2025

production-deployment-phase

Promote validated staging builds to production with versioning and health checks.

Community
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