web-design-guidelines

Review UI code against Web Interface Guidelines for compliance.

Updated Jul 12, 2025
One-click install
npx skills add https://github.com/newtondotcom/pok7 --skill web-design-guidelines-newtondotcom
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/newtondotcom/pok7/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/newtondotcom/pok7 --skill web-design-guidelines-newtondotcom

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that user interface code adheres to established Web Interface Guidelines, improving consistency, accessibility, and overall design quality.

Core Features & Use Cases

  • Automated Review: Scans specified files against a set of predefined design and accessibility rules.
  • Compliance Checking: Identifies deviations from best practices in UI development.
  • Use Case: A developer can use this Skill to quickly audit a new component's code before merging, ensuring it meets the project's design standards and accessibility requirements.

Quick Start

Review the UI code in the file 'src/components/Button.tsx' for compliance with 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 run a design audit on my UI code for accessibility and web standards?

You can run a design audit by pointing this Skill at specific UI files. It fetches the latest Web Interface Guidelines and applies rule-based analysis to identify accessibility issues and UX review deviations against best practices.

What is a UI review for web interface guidelines and why do I need it?

A UI review checks your code against web interface guidelines to ensure design consistency and accessibility. You need it to verify that new components meet project standards and accessibility requirements before merging.

Can I check specific component files like a Button.tsx for accessibility compliance?

Yes, you can check specific component files like Button.tsx for accessibility compliance. The Skill reviews UI code by applying fetched web guidelines to specified file paths to identify standard deviations.

Does this design audit tool require any external dependencies or setup?

No external dependencies are required for setup. The design audit tool operates independently and fetches the latest web guidelines directly during the code review process to perform rule-based analysis.

What is the best way to automate UX reviews against best practices before merging code?

The best way to automate UX reviews is to scan your new component code before merging. This Skill fetches predefined design and accessibility rules to automatically identify deviations from UI development best practices.