skills.rest
DITEKmax
DITEKmaxCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Audit and implement accessible, responsive web interfaces with WCAG 2.2 alignment.

Updated Mar 28, 2026
Search Tags:#typography#performance#accessibility#wcag#responsive-design#web-design#semantic-html
One-click install
npx skills add https://github.com/DITEKmax/rutcampustrack --skill web-design-guidelines-ditekmax
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/DITEKmax/rutcampustrack/tree/main/.claude/skills/platform-design-web
Command: npx skills add https://github.com/DITEKmax/rutcampustrack --skill web-design-guidelines-ditekmax

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create consistent, accessible, and performant web interfaces by providing a framework of guidelines and examples that reduce design and development guesswork.

Core Features & Use Cases

  • Comprehensive rules for semantic HTML, ARIA, responsive design, typography, performance, dark mode, i18n, and PWAs.
  • Practical guidance for developers, designers, and product teams to audit and implement web UI best practices.
  • Use cases include building accessible forms, responsive layouts, and performant web apps with consistent theming.

Quick Start

Start by applying WCAG-aligned rules to a new web page: ensure semantic HTML structure, responsive typography, and accessible form labeling.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I implement WCAG 2.2 compliance for my web interface?▼

Fluid responsive typography scales text dynamically across devices using CSS rules. This skill provides guidelines to implement fluid typography and responsive layouts, ensuring consistent visual hierarchy across all screen sizes.

What is the best way to audit semantic HTML and ARIA best practices?▼

Semantic HTML improves accessibility by ensuring screen readers correctly interpret page structure. This skill enforces semantic HTML and ARIA best practices to help teams build consistent, accessible web interfaces.

How do I build accessible forms with responsive design?▼

Building accessible forms requires semantic HTML, proper form labeling, and ARIA attributes. This skill provides practical guidance to construct accessible forms and responsive layouts for performant web apps.

Does this web design framework support dark mode and i18n?▼

Yes, this framework supports dark mode and i18n. It provides comprehensive rules for consistent theming, dark mode implementation, and internationalization alongside responsive design and performance optimization.

How can I evaluate web performance across different devices?▼

Evaluating web performance across devices requires applying performance-conscious patterns during UI development. This skill helps teams evaluate performance and build performant web apps with responsive typography and fluid layouts.

Why use semantic HTML for accessible web interfaces?▼

Semantic HTML provides inherent accessibility by ensuring screen readers correctly interpret page structure. This skill enforces semantic HTML and ARIA best practices to help teams build consistent, accessible web interfaces.

Related Skills

Explore More Design & Creative Skills→
wssAchilleswssAchilles
2

web-design-guidelines

Analyzes HTML/CSS/JS codebases for compliance with Web Interface Guidelines.

Community
Intermediate
PriyanshKuniyalPriyanshKuniyal

wcag-audit-patterns

Automate WCAG 2.2 accessibility audits and provide remediation guidance.

Community
Advanced
kopfrechnerkopfrechner

tailwind-design-system

Build scalable Tailwind CSS v4 design systems with semantic tokens and CVA-based components.

Community
Advanced
calcosmiccalcosmic
9

html-css

Enforce semantic HTML, ARIA, color contrast, and flat CSS architecture.

Community
Intermediate