web-design-guidelines

Review web UI code for accessibility, performance, and UX issues against pinned interface guidelines.

Updated Aug 31, 2026
One-click install
npx skills add https://github.com/pikachu0310/codex-agent-ops-public --skill web-design-guidelines-pikachu0310
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/pikachu0310/codex-agent-ops-public/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/pikachu0310/codex-agent-ops-public --skill web-design-guidelines-pikachu0310

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend code often ships with accessibility gaps, focus-state bugs, hydration mismatches, and performance anti-patterns that manual review misses. This Skill audits user-facing web UI against a pinned snapshot of the Vercel Web Interface Guidelines and reports reproducible, file-and-line findings. ## Core Features & Use Cases - Guideline-Based UI Audit: Checks accessibility, focus states, forms, animation, typography, images, performance, navigation, dark mode, i18n, and hydration safety against a fixed rule set. - Ranked, Actionable Findings: Reports only reproducible, user-impacting defects with precise file:line locations, separating verified defects from items needing browser or screen-reader validation. - Pinned Snapshot for Reproducibility: Uses a bundled reference file instead of fetching mutable remote instructions, so reviews stay consistent over time. - Use Case: Before shipping a new React settings page, ask for a review to catch icon buttons missing aria-labels, inputs without labels, transition: all usage, and images lacking explicit dimensions. ## Quick Start Review the UI code in src/components against the web interface guidelines and list accessibility and performance issues with file and line numbers.

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 frontend code for accessibility issues?▼

Run a review that checks UI files against accessibility rules covering aria-labels on icon buttons, form labels, keyboard handlers, semantic HTML, focus-visible states, and aria-live regions. Findings are reported with file and line numbers grouped by file.

What UI issues does the Web Interface Guidelines review catch?▼

It catches accessibility gaps, missing focus states, form validation problems, transition: all usage, missing prefers-reduced-motion handling, images without dimensions, unvirtualized large lists, hydration mismatches, and hardcoded date or number formats.

Does this review modify my source files?▼

No. The review is read-only by design and does not edit files when the request is review-only. It reports findings with locations and suggested corrections, leaving all changes to the developer.

Can the guidelines snapshot be updated to a newer version?▼

Yes, but only when explicitly requested. The bundled reference is pinned for reproducibility, and updating it requires re-checking the source, revision, license, and behavior before replacing the snapshot.

Why does the review separate verified defects from unverified items?▼

Some issues like visual rendering, screen-reader behavior, or device-specific interaction cannot be confirmed from source code alone. The review flags these as requiring browser, device, or human validation rather than claiming unobserved results as verified.