skills.rest
Amakaflow
AmakaflowOFFICIAL
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI code files against Vercel Web Interface Guidelines for accessibility and design compliance.

Updated Nov 30, 2025
Search Tags:#code review#accessibility#ui review#vercel#design guidelines#ux audit#web interface
One-click install
npx skills add https://github.com/Amakaflow/amakaflow-dev-workspace --skill web-design-guidelines-amakaflow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Amakaflow/amakaflow-dev-workspace/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/Amakaflow/amakaflow-dev-workspace --skill web-design-guidelines-amakaflow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually auditing UI code against evolving web interface best practices is slow and error-prone, and teams often miss accessibility or design rule violations before shipping. ## 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 specific file or pattern argument, or prompts you to choose which files to review. - Use Case: Before merging a pull request that touches React components, run the review on the changed files to catch accessibility and UX guideline violations early. ## Quick Start Ask the assistant to review your UI files against web interface guidelines, for example by saying: review src/components/Button.tsx for accessibility and design best practices.

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 to the skill, which fetches the latest Web Interface Guidelines and checks your code against every rule. Findings are reported in a concise file:line format so you can navigate directly to each issue.

What guidelines does this UI review use?▼

It fetches the Web Interface Guidelines maintained by vercel-labs, retrieved 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 whole directory at once?▼

Yes, you can pass a file pattern as the argument to review multiple matching files in one run. If you provide no argument, 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 a remote GitHub raw URL before each review. Without connectivity, the rules cannot be retrieved and the review cannot proceed.

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 jump to exact violation locations in your editor or pipe results into other tooling.

Related Skills

Explore More Design & Creative Skills→
Kitsune-DenKitsune-Den

frontend-design-ultimate

Generate React, Tailwind, and shadcn/ui frontend projects from plain-language prompts.

Official
Advanced
VirtoCommerceVirtoCommerce
2

qa-storybook

Detect visual and behavioral regressions in Storybook components through structured QA testing.

Official
Advanced
Devsoul2026Devsoul2026
150

requesting-code-review

Automate pre-commit verification with static analysis, tests, and lint checks.

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