skills.rest
WP-Coaching
WP-CoachingOFFICIAL
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

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

Updated Sep 1, 2021
Search Tags:#code review#accessibility#frontend#ui review#web design#guidelines#ux audit
One-click install
npx skills add https://github.com/WP-Coaching/pellegrims.coach --skill web-design-guidelines-wp-coaching
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/WP-Coaching/pellegrims.coach/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/WP-Coaching/pellegrims.coach --skill web-design-guidelines-wp-coaching

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Manually checking UI code against accessibility and design best practices is slow and inconsistent, and teams often lack a shared, up-to-date rule set for reviews. ## 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: Accepts a specific file or glob pattern argument to scope the review to relevant UI code. - Terse Findings Output: Reports violations in a compact file:line format that is easy to scan and act on. - Use Case: Before merging a pull request, ask for a review of your React components to catch accessibility issues and design guideline violations with exact line references. ## Quick Start Ask the assistant to review your UI files against web interface guidelines, for example by saying "review my UI components in src/components 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 or pattern argument and the skill fetches the latest Web Interface Guidelines, reads your files, and checks them against all rules. Findings are reported in a terse file:line format for quick fixes.

What guidelines does this UI review use?▼

It fetches the Web Interface Guidelines from the vercel-labs/web-interface-guidelines repository on GitHub before each review. This ensures the rule set is always current rather than relying on a stale local copy.

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

Yes, you can pass a file pattern as the argument to scope the review across multiple files. If you provide no argument, the skill asks 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 you can navigate directly to the issue.

Does the UI review work offline?▼

No, it requires network access to fetch the latest guidelines from the source URL via WebFetch before each review. Without connectivity, the current rules cannot be retrieved.

Related Skills

Explore More Design & Creative Skills→
arthtyagiarthtyagi
1

react-best-practices

Review React and Next.js TSX files for performance, accessibility, hook, and component-pattern issues.

Community
Advanced
sgcarstrendssgcarstrends
21

typography-spacing-enforcer

Scan component files for typography violations and legacy spacing patterns.

Official
Basic
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