skills.rest
nathankoerschner
nathankoerschnerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-interface-guidelines

Review UI code against Vercel Web Interface Guidelines with file and line references.

Updated Jan 22, 2024
Search Tags:#ui#code review#accessibility#web development#frontend#guidelines
One-click install
npx skills add https://github.com/nathankoerschner/dotfiles --skill web-interface-guidelines-nathankoerschner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-interface-guidelines
Source: https://github.com/nathankoerschner/dotfiles/tree/main/agent-skills/_shared-skills/web-interface-guidelines
Command: npx skills add https://github.com/nathankoerschner/dotfiles --skill web-interface-guidelines-nathankoerschner

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure that web interface code adheres to established Vercel Web Interface Guidelines, improving accessibility, usability, and performance.

Core Features & Use Cases

  • Compliance Review: Analyzes UI code against a comprehensive set of rules covering accessibility, focus states, forms, animation, typography, and more.
  • Targeted Feedback: Provides specific, actionable feedback with file and line number references for easy correction.
  • Use Case: A developer can submit a new component's code to this Skill to get a quick audit for common UI/UX pitfalls before merging.

Quick Start

Run the web-interface-guidelines skill to review the file src/components/Button.tsx.

Frequently Asked Questions about web-interface-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review my frontend code for accessibility and UI guidelines?▼

You can review frontend code for accessibility and UI guidelines by running it through a compliance checker that analyzes files against Vercel Web Interface Guidelines, identifying anti-patterns in focus states, forms, and typography with specific file and line number references.

What UI anti-patterns should I check before merging web interface code?▼

Before merging web interface code, check for anti-patterns in hydration, dark mode, safe areas, locale handling, and hover states. A UI compliance review identifies these issues by analyzing code against Vercel Web Interface Guidelines and providing actionable feedback with file and line references.

Can I audit a specific React component for Vercel Web Interface Guidelines compliance?▼

Yes, you can audit a specific React component by submitting the file to a UI guidelines review. It checks the component code for compliance with accessibility, navigation, images, and content copy rules, returning targeted feedback with exact file and line number references for correction.

Does a UI code review check for dark mode and locale handling issues?▼

Yes, a UI code review checks for dark mode and locale handling issues. It analyzes frontend code for compliance with Vercel Web Interface Guidelines, actively reviewing dark mode implementation, locale formatting, hydration, and safe areas alongside general accessibility and performance metrics.

What is the best way to ensure my web development project meets accessibility standards?▼

The best way to ensure a web development project meets accessibility standards is to run a UI code review against Vercel Web Interface Guidelines. This identifies anti-patterns in focus states, forms, and touch interactions, providing actionable feedback with file and line number references for correction.

Related Skills

Explore More Design & Creative Skills→
felipefontourafelipefontoura
20

contribute-stack

Generate and commit new application stack files to a repository.

Community
Advanced
MatheusrlrMatheusrlr
1

web-design-guidelines

Review UI code against Web Interface Guidelines for compliance.

Community
Intermediate
nicolanoviellnicolanoviell
2

code-review

Review code changes for bugs, style issues, and best practices.

Community
Intermediate
ihj04982ihj04982

web-design-guidelines

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

Community
Intermediate