skills.rest
nigamelastic
nigamelasticCOMMUNITY
Explore all skills by this author →
Website𝕏@nigamelasticGitHub

web-design-guidelines

Provide framework-agnostic guidelines for accessible, responsive HTML/CSS/JS interfaces aligned with WCAG 2.2.

Updated Feb 24, 2026
Search Tags:#design#performance#accessibility#frontend#wcag#responsive#web
One-click install
npx skills add https://github.com/nigamelastic/Skill_repo --skill web-design-guidelines-nigamelastic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/nigamelastic/Skill_repo/tree/main/skills/web
Command: npx skills add https://github.com/nigamelastic/Skill_repo --skill web-design-guidelines-nigamelastic

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers struggle to build accessible, responsive web interfaces that meet WCAG 2.2 and performance standards.

Core Features & Use Cases

  • Framework-agnostic rules for semantic HTML, accessible components, responsive layouts, color contrast, typography, and performance best practices.
  • Use cases include building WCAG-compliant interfaces, auditing web UI for accessibility, and validating responsive behavior across devices.

Quick Start

Load SKILL.md to review the complete web guidelines and apply sections as needed.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I make my web interface compliant with WCAG 2.2 accessibility standards?▼

Build WCAG-compliant interfaces by applying framework-agnostic rules for semantic HTML, accessible components, and color contrast. This Skill provides actionable guidelines to audit and construct HTML, CSS, and JS interfaces that meet modern accessibility standards across desktop and mobile.

What is the best way to audit a web UI for responsive design and accessibility issues?▼

Audit web UI accessibility and responsiveness by validating against framework-agnostic guidelines for semantic HTML, responsive layouts, and dark mode. Use these rules to validate behavior across desktop and mobile devices.

Do I need a specific frontend framework to implement these responsive web design guidelines?▼

No, you do not need a specific frontend framework. The guidelines are entirely framework-agnostic, applying directly to standard HTML, CSS, and JavaScript UI development regardless of your chosen tech stack.

How does dark mode impact web typography and color contrast accessibility?▼

Dark mode impacts accessibility by requiring adjusted color contrast and typography rules to maintain readability. These guidelines include specific sections for dark mode, typography, and color contrast to ensure interfaces remain accessible across different viewing modes.

What are the limitations of using generic web design guidelines for frontend performance optimization?▼

While these guidelines cover frontend performance best practices across desktop and mobile, they provide framework-agnostic rules rather than tool-specific optimizations. They are designed for building, auditing, and reviewing UI rather than automated performance testing.

Related Skills

Explore More Design & Creative Skills→
wedsamuel1230wedsamuel1230
1

frontend-design

Design production-grade frontend interfaces from user requirements.

Community
Advanced
Bonny94ITABonny94ITA

accessibility

Automate WCAG 2.2 accessibility audits using Lighthouse and manual checks.

Community
Advanced
h4vzzh4vzz
33

Frontend Design

Generate accessible React, Vue, Svelte, or HTML components with design tokens.

Community
Advanced
jaem1n207jaem1n207
18

accessibility-auditor

Audit web pages and UI components against WCAG 2.2 accessibility standards.

Community
Advanced