A specialized tool for auditing web UI code against professional interface guidelines and accessibility standards.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install kj-web-design-guidelines
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install kj-web-design-guidelines using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Web Interface Guidelines Reviewer?
The Web Interface Guidelines skill is a purpose-built utility for developers who want to maintain high standards for user interface quality and accessibility. By integrating this capability into your development environment, you can automatically audit your code against a live set of industry-standard rules maintained by experts. As part of the Openclaw Skills ecosystem, it bridges the gap between design requirements and code implementation.
This skill fetches the most recent guidelines directly from a remote source, ensuring that your reviews are always based on the latest best practices. Whether you are checking for UX consistency or technical accessibility compliance, this tool provides precise, actionable feedback directly in your workflow.
Web Interface Guidelines Reviewer Use Cases
- Reviewing React, Vue, or HTML components for accessibility compliance.
- Auditing new UI features for UX consistency before a pull request.
- Scanning a codebase for design system deviations using Openclaw Skills.
- Identifying specific lines of code that violate web interface best practices.
How Web Interface Guidelines Reviewer Works
- The skill retrieves the latest guideline definitions from the Vercel-hosted source URL.
- It identifies the specific files or directory patterns provided by the user for the audit.
- The agent reads the local files and evaluates them against the fetched design and accessibility rules.
- It generates a report in a terse format, mapping specific violations to the exact file and line number.
Web Interface Guidelines Reviewer Setup
To use this tool within your Openclaw Skills collection, ensure your environment can access external URLs for fetching the rule set. Trigger the review by specifying the target files:
# Trigger a UI review for a specific directory
openclaw run web-design-guidelines ./src/components/*.tsx
The skill relies on WebFetch to access the remote guidelines located at https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md.
Web Interface Guidelines Reviewer Data Schema & Taxonomy
The skill manages data through dynamic fetching and local file parsing. Below is the organization of its operational data:
| Component | Type | Description |
|---|---|---|
| Rule Source | Remote Markdown | Fetched guidelines containing UI and UX requirements. |
| Input Source | File Pattern | Local source code files (HTML, CSS, JS, TSX) to be audited. |
| Output Format | Plain Text | Results formatted as file:line: description for easy navigation. |
| Metadata | YAML | Contains author info, versioning, and argument hints. |
Web Interface Guidelines Reviewer Advanced Features
- Dynamic Rule Fetching: Always audits against the most up-to-date standards without manual updates to the Openclaw Skills configuration.
- Pattern Matching: Support for glob patterns to audit specific sections of a project.
- Terse Output: Optimized for developers who need to quickly jump to specific lines of code to fix issues.
- Multi-context Support: Can be triggered via natural language prompts like "audit my design" or "check accessibility".
SKILL.md
Loading
Related Openclaw Skills
Web Deploy GitHub Pages
Automate the entire lifecycle of creating, building, and deploying professional static websites to GitHub Pages.
UI/UX Pro Max
An advanced design intelligence skill for building, auditing, and implementing polished user interfaces and design systems.
Ralph Loop v2
A high-performance 3-tier AI agent methodology designed for autonomous software implementation with rigorous quality control and architectural integrity.
Parallel Agent Dispatch
A sophisticated workflow designed to dispatch multiple independent subagents to handle unrelated tasks concurrently, maximizing throughput and reducing execution time.
MLX Brain
A specialized local LLM orchestrator for Apple Silicon designed to execute Qwen2.5 models efficiently via the MLX framework.
Playwright Testing (MiniPC)
An automated testing skill for verifying web applications and games using headless Playwright on remote MiniPC nodes.
Featured*
