web-design

Name: web-design
Availability: InStock
Author: Codos

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

Ready to run

npx skills add https://github.com/opencodos/opencodos --skill web-design-opencodos

💬 Prompt for ChatGPT / Claude Chat▼

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.