skills.rest
opencodos
opencodosOFFICIAL
Explore all skills by this author →
GitHub

web-design

Audit HTML, CSS, and JS for web interface guideline compliance.

14|2|Updated Feb 18, 2026
Search Tags:#typography#accessibility#css#design-guidelines#web-ui#color-contrast
One-click install
npx skills add https://github.com/opencodos/opencodos --skill web-design-opencodos
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design
Source: https://github.com/opencodos/opencodos/tree/main/skills/Web%20Design
Command: npx skills add https://github.com/opencodos/opencodos --skill web-design-opencodos

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps teams review web interfaces to ensure compliance with established design and accessibility guidelines, reducing UI inconsistencies across applications.

Core Features & Use Cases

  • Manual or automated review of HTML/CSS/JS for typography, color contrast, spacing, accessibility, and semantic markup.
  • Generates actionable feedback and a design-compliance report that can be integrated into CI or design reviews.
  • Use Case: When shipping a new UI component, run checks to verify contrast ratios and typography scales match the design system.

Quick Start

Run the web-design checker on your UI project to generate a compliance report.

Frequently Asked Questions about web-design

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

FAQPage Schema
How do I check my HTML and CSS code for WCAG accessibility and brand design compliance?▼

To check HTML and CSS for accessibility and design compliance, audit your UI assets against a centralized design system corpus. This evaluates conformance with WCAG and brand rules, outputting a structured report detailing violations and specific remediation steps.

What is the best way to automate color contrast and typography checks for a new UI component?▼

The best way to automate color contrast and typography checks is running a design guideline audit on UI code. It verifies contrast ratios and typography scales match your design system, generating actionable feedback for CI or design review integration.

Can I integrate web interface design guideline checks into my existing CI pipeline?▼

Yes, you can integrate web interface design guideline checks into CI pipelines. The audit evaluates HTML, CSS, and JS assets against established guidelines, producing a structured compliance report that fits directly into automated design reviews.

Does the UI compliance audit evaluate semantic structure and spacing, or just visual styling?▼

The UI compliance audit evaluates semantic structure and spacing alongside visual styling. It comprehensively reviews typography, color contrast, spacing, accessibility, and semantic markup to ensure complete alignment with established design guidelines.

Why does my design compliance report flag semantic markup issues in my web application?▼

A design compliance report flags semantic markup issues because your HTML structure does not align with the centralized design system corpus. The audit evaluates conformance against WCAG and brand rules, identifying semantic violations that require remediation.

Do I need a centralized design system corpus to run an accessibility and brand rule audit?▼

Yes, a centralized design system corpus is required to run an accessibility and brand rule audit. The checker references this established guideline repository to evaluate conformance and output structured reports with violations and remediation steps.

Related Skills

Explore More Design & Creative Skills→
TheWatcher01TheWatcher01

brand-guidelines

Define and enforce brand identity with typography, color tokens, and CSS variables.

Community
Intermediate
gabriellpequenogabriellpequeno
8

web-design-guidelines

Enforce external UI guideline compliance during front-end design reviews and critiques.

Community
Basic
kindfi-orgkindfi-org
19

web-design-guidelines

Assess UI code against Web Interface Guidelines for accessibility and design issues.

Official
Intermediate
brianlovinbrianlovin
357

rams

Analyze UI components for WCAG violations and visual design inconsistencies.

Community
Advanced