web-design-guidelines

What This Skill Does

The web-design-guidelines skill acts as an automated quality assurance auditor for your frontend codebase. It bridges the gap between your raw source code and professional web design standards by fetching the most up-to-date best practices directly from the official Vercel Labs repository. Unlike static linters, this agent performs a semantic review of your UI components, ensuring that your code adheres to accessibility standards, interaction design patterns, and responsive layout best practices. The skill streamlines the audit process by automating the retrieval of fresh guidelines, reading your local files, and presenting actionable findings in a terse, developer-friendly format that integrates seamlessly with most IDEs.

Installation

To add this auditing tool to your OpenClaw agent, execute the following command in your terminal within your project root:

clawhub install openclaw/skills/skills/sharanga10/web-design-guidelines

Ensure that you have network access enabled for the agent so it can reach the remote source URL to fetch the latest rule definitions before performing an audit.

Use Cases

• Accessibility Audits: Automatically verify that your markup includes appropriate ARIA roles, labels, and focus management to comply with WCAG standards.
• Design Consistency: Ensure that your team's UI components follow the standardized design language defined by Web Interface Guidelines.
• Code Reviews: Integrate the skill into your pre-commit hooks or CI/CD pipelines to ensure that design debt is caught before it is merged into the main branch.
• Refactoring: When modernizing an older codebase, use this skill to identify legacy patterns that violate modern web interface standards.

Example Prompts

1. "Review my UI code in the src/components directory against the web interface guidelines."
2. "Can you check my site against best practices? I need to know if there are any accessibility issues."
3. "Please perform an audit of my login page design and list any violations."

Tips & Limitations

• Freshness: Always ensure the agent has network access; the skill fetches guidelines dynamically to guarantee you are never reviewing against deprecated rules.
• Scope: If you do not specify a file or pattern, the skill will prompt you for input. To save time, always include a specific file or directory path in your request.
• Formatting: The tool is designed to be concise. The output format is strictly "file:line" to ensure you can quickly navigate to the offending code blocks in your editor.
• Interpretation: While this tool is excellent for catching standard violations, it cannot replace human subjective design judgment. Treat these findings as a foundation for your design process rather than the absolute final word.