skills.rest
quanganh208
quanganh208COMMUNITY
Explore all skills by this author →
GitHub

ck:web-design-guidelines

Audit UI code against Web Interface Guidelines and report file:line findings.

1|Updated Mar 6, 2026
Search Tags:#ui#code review#accessibility#heuristics#design audit#web guidelines
One-click install
npx skills add https://github.com/quanganh208/cookmate --skill ck-web-design-guidelines-quanganh208
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:web-design-guidelines
Source: https://github.com/quanganh208/cookmate/tree/main/.opencode/skills/web-design-guidelines
Command: npx skills add https://github.com/quanganh208/cookmate --skill ck-web-design-guidelines-quanganh208

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps developers and designers quickly verify that web UI code adheres to a shared set of Web Interface Guidelines, reducing manual review time and catching accessibility, consistency, and UX issues early.

Core Features & Use Cases

  • Guideline-driven audits: Fetches the authoritative guideline document and applies its rules to provided source files.
  • File-level findings: Reads specified files or patterns and reports violations in a terse file:line format suitable for CI and code review.
  • Use Case: Run an automated audit during a pull request to flag accessibility regressions, inconsistent spacing, or component misuses before merging.

Quick Start

Use the ck:web-design-guidelines skill to fetch the latest guidelines and audit files matching src/ui/**/* for accessibility, consistency, and heuristic issues.

Frequently Asked Questions about ck:web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit web UI code for accessibility and best practices?▼

To audit web UI code, fetch the canonical Web Interface Guidelines document, read your provided source files or patterns, and emit accessibility and consistency findings in a terse file:line format suitable for CI.

Can I use a design audit to catch accessibility regressions in a pull request?▼

Yes, you can use a design audit during a pull request to fetch web guidelines and flag accessibility regressions or component misuses in file:line format before merging.

What is the best way to check UI code against shared web interface guidelines?▼

The best way to check UI code is to fetch the authoritative guideline document and apply its rules to your source files, reporting violations in a terse file:line format for quick resolution.

Does a web design audit work with static sites and component libraries?▼

Yes, web design audits are applicable to web projects, component libraries, and static sites when auditing accessibility, UX consistency, and design best practices.

How do design heuristics apply to a UI code review?▼

Design heuristics apply to a UI code review by fetching web guidelines and evaluating provided source files against those rules, emitting file:line findings that flag accessibility issues and inconsistent spacing.

What format do web design guideline audit findings use?▼

Web design guideline audit findings use a terse file:line format, reporting accessibility, UX consistency, and heuristic violations directly mapped to your provided source files.

Related Skills

Explore More Design & Creative Skills→
deangilmoreremixdeangilmoreremix

web-design-guidelines

Review UI files against web design and accessibility guidelines.

Community
Intermediate
Community-AccessCommunity-Access
387

lighthouse-scanner

Audit web accessibility with Lighthouse CI and track score regressions.

Official
Advanced
SensLiaoSensLiao

qa-static-baseline

Automate static code analysis and security scanning on pull requests or CI pipelines.

Community
Intermediate
adryanevadryanev
2

web-design-guidelines

Audit HTML, CSS, and JavaScript files for Web Interface Guidelines violations.

Community
Intermediate