ck:web-design-guidelines

Review HTML, CSS, and React files against fetched web interface guidelines.

Updated Apr 2, 2026
One-click install
npx skills add https://github.com/hidonguyen/trade-ops --skill ck-web-design-guidelines-hidonguyen
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ck:web-design-guidelines
Source: https://github.com/hidonguyen/trade-ops/tree/main/.opencode/skills/web-design-guidelines
Command: npx skills add https://github.com/hidonguyen/trade-ops --skill ck-web-design-guidelines-hidonguyen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams and reviewers quickly identify deviations from established web interface guidelines, reducing manual checklist work and catching accessibility and UX regressions early.

Core Features & Use Cases

  • Guideline-driven audits: Fetches the authoritative guideline document and applies its rules to provided files or patterns.
  • File-level, terse reporting: Produces concise findings in file:line format for easy triage and integration into code reviews.
  • Use Case: Run against a component library or a set of pages to find accessibility issues, poor responsive behavior, and common UI anti-patterns before release.

Quick Start

Review the specified files or pattern for guideline violations and return findings in file:line format.

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 my web UI for accessibility and UX best practices?

This Skill audits web UIs for accessibility and UX best practices by reviewing your HTML, CSS, and React components against authoritative guidelines. It fetches external rules and outputs concise file:line findings to catch regressions early.

How do I check React components for accessibility issues during code review?

You can check React components for accessibility issues by running this Skill against your specified files or patterns. It applies guideline rules directly to the code and returns terse file:line findings for easy triage and integration into code reviews.

What is the best way to automate UX review for front-end projects?

Automating a UX review for front-end projects involves applying established web interface guidelines to your codebase. This Skill fetches authoritative guideline documents and automatically checks your files for UI anti-patterns and poor responsive behavior.

Can I use this tool to check responsive layout and code patterns in HTML and CSS?

Yes, you can check responsive layout and code-pattern issues in HTML and CSS. The review process applies web interface guidelines to your front-end files to identify deviations and common UI anti-patterns before release.

Do I need to provide my own guidelines to review web interface compliance?

You do not need to provide your own guidelines to review web interface compliance. The Skill fetches the authoritative guideline document from a remote URL before each review and applies those rules directly to your provided files.

What format do the accessibility and UX audit findings follow?

The accessibility and UX audit findings follow a terse file:line format. This concise reporting style makes the identified code-pattern and guideline violations easy to triage and integrate directly into your existing code review workflows.