skills.rest
arfaomar
arfaomarCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually auditing UI code for accessibility, design, and UX best practices is slow and inconsistent. This Skill automates the review by fetching the latest Web Interface Guidelines and checking your files against every rule. ## Core Features & Use Cases - Guideline-Based Review: Fetches the latest Web Interface Guidelines from the vercel-labs repository before each review, so rules are always current. - File or Pattern Targeting: Reviews specific files or glob patterns you provide, and prompts you when no target is given. - Terse Findings Output: Reports violations in a compact file:line format for quick triage and fixing. - Use Case: Before shipping a new settings page, ask for a review of app/settings/page.tsx to catch accessibility and UX issues against current best practices. ## Quick Start Ask the assistant to review my UI files in the components directory 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 a file path or glob 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 issue.

What are the Vercel Web Interface Guidelines?▼

They are a set of UI, accessibility, and UX rules maintained in the vercel-labs/web-interface-guidelines repository. The Skill fetches the current version from the raw command.md file before each review rather than using a cached copy.

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

Yes, you can pass a file pattern as the argument and all matching files are read and checked against the fetched guidelines. If you provide no files, the Skill asks which files you want reviewed.

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

No, the Skill requires network access because it fetches the latest guidelines from GitHub via WebFetch before each review. Without connectivity it cannot retrieve the rule set needed to 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 it easy to locate each violation in your editor and work through fixes systematically.

Related Skills

Explore More Design & Creative Skills→
Anuar7777Anuar7777

senior-frontend

Automates React/Next.js scaffolding, component generation, bundle analysis, code audits, and frontend pattern enforcement with TypeScript and Tailwind CSS.

Community
Advanced
ohmyhotelcoohmyhotelco
1

be-clean-code

Audit Java source files for DRY, KISS, YAGNI, naming, and structure violations.

Official
Intermediate
supermalangsupermalang

perf-measure

Measure application performance against explicit budgets with runtime tools.

Community
Advanced
airoweairowe
14

Accessibility Audit Skill

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

Community
Advanced