web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
Why use this skill?
Automate your UI and accessibility audits with the web-design-guidelines skill. Ensure your web project code meets industry-standard design best practices automatically.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/kjaylee/kj-web-design-guidelinesWhat This Skill Does
The web-design-guidelines skill acts as an automated auditor for your user interface code, ensuring that your web projects adhere to established Web Interface Guidelines. By leveraging the most current industry standards, the skill reviews your source code, identifies accessibility gaps, assesses design consistency, and highlights potential usability issues. It functions by dynamically fetching the latest rule sets from a remote repository, reading your specified local files, and cross-referencing them against these rules to generate actionable feedback in a precise file:line format. This ensures your development process remains aligned with professional design standards without requiring manual exhaustive reviews of every component.
Installation
To integrate this skill into your OpenClaw environment, execute the following command in your terminal: clawhub install openclaw/skills/skills/kjaylee/kj-web-design-guidelines Once installed, the skill becomes available for any project directory where you have UI code that requires auditing.
Use Cases
This skill is ideal for frontend developers, UI/UX designers, and quality assurance engineers who want to maintain high accessibility and design standards. It is particularly useful during the pre-commit stage to catch compliance errors, during design refactoring sessions to ensure consistency, and when onboarding legacy projects that lack documented design standards. Whether you are building a landing page or a complex dashboard, this tool ensures your code meets the high bar of modern web interface requirements.
Example Prompts
- "Review my UI for the login page and check if it meets the latest accessibility standards."
- "Audit my dashboard design against the current web interface guidelines."
- "Could you check my site against best practices? Please review all files in the /src/components directory."
Tips & Limitations
To get the best results, ensure your project files are clearly structured. Because this skill relies on an external URL for rule definitions, an active internet connection is mandatory for every run to ensure you are checking against the most up-to-date guidelines. It is a diagnostic tool; while it identifies potential issues based on rulesets, it does not automatically refactor your code. Always perform a manual final review, especially when applying changes to complex state-management components or highly dynamic layouts.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-kjaylee-kj-web-design-guidelines": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: network-access, file-read
Related Skills
ui-ux-pro-max
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
ralph-loop
AI 자율 구현 방법론. 구현/개발/코딩 요청 시 자동 적용. 메인은 마더 서브에이전트를 spawn하고, 마더가 워커들을 관리. specs/ → IMPLEMENTATION_PLAN.md → 1태스크씩 구현 → 2단계 리뷰 → 테스트 → 반복.
game-dev-rust-godot
Game development workflow using Rust+WASM or Godot 4.x for HTML5 games. Use when creating new games, implementing game mechanics, or porting existing games. Follows TDD-based production pipeline v3.1 with asset-first approach. Covers Rust(Macroquad/Bevy), Godot HTML5 Export, asset acquisition, test case writing, and QA automation. Master directive (2026-02-06) - ONLY Rust+WASM or Godot allowed, JS/TS frameworks prohibited.
subagent-dev
Execute implementation plans using fresh subagents per task with two-stage review (spec compliance + code quality). Use when executing multi-task plans with independent work units. Enhances ralph-loop methodology.
systematic-debugging
Root-cause-first debugging methodology. Use when encountering any bug, test failure, or unexpected behavior BEFORE proposing fixes. Prevents random fix attempts that waste time and create new bugs.