skills.rest
wanghaisheng
wanghaishengCOMMUNITY
Explore all skills by this author →
Website𝕏@edwin_uestcGitHub

web-design-guidelines

Codify accessible, responsive web design guidelines for HTML/CSS/JS projects.

10|1|Updated Dec 16, 2024
Search Tags:#accessibility#frontend#wcag#responsive#web-design#ui-guidelines
One-click install
npx skills add https://github.com/wanghaisheng/cloudflare-workers-d1-r2-expo-turborepo-trpc-workflows-astro-cleark --skill web-design-guidelines-wanghaisheng
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/wanghaisheng/cloudflare-workers-d1-r2-expo-turborepo-trpc-workflows-astro-cleark/tree/main/ref/platform-design-skills-main/platform-design-skills-main/skills/web
Command: npx skills add https://github.com/wanghaisheng/cloudflare-workers-d1-r2-expo-turborepo-trpc-workflows-astro-cleark --skill web-design-guidelines-wanghaisheng

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web projects often suffer from inconsistent styling, accessibility gaps, and suboptimal performance. This guide provides a centralized, practical set of rules to address these issues across design and code.

Core Features & Use Cases

  • Accessibility auditing: Guidelines to ensure semantic HTML, ARIA usage, keyboard navigation, focus indicators, and alt text are consistently applied.
  • Responsive design guidance: Mobile-first layout patterns, fluid typography, container queries, and adaptive spacing.
  • Performance and theming: Best practices for image loading, lazy loading, dark mode, and typography choices to optimize both UX and performance.

Quick Start

Review a web page against these guidelines and implement the recommended accessibility, layout, and performance improvements.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
What are the best practices for accessible and responsive web design?▼

Accessible and responsive web design best practices include using semantic HTML, proper ARIA usage, ensuring sufficient color contrast, and applying mobile-first layout patterns with fluid typography. These guidelines help resolve inconsistent styling and accessibility gaps across HTML, CSS, and JS projects.

How do I audit a web page for WCAG accessibility compliance?▼

To audit a web page for WCAG accessibility compliance, review semantic HTML structure, ARIA roles, keyboard navigation, focus indicators, and alt text. Applying these structured guidelines ensures interfaces are consistently accessible across different web projects and component libraries.

How do I implement responsive design with fluid typography and container queries?▼

Implement responsive design with fluid typography and container queries by adopting mobile-first layout patterns and adaptive spacing. These responsive design guidelines provide structured rules to optimize web interfaces for varying screen sizes and orientations.

Does this web design guide cover dark mode and internationalization?▼

Yes, this web design guide covers dark mode and internationalization (i18n). It provides structured guidelines for theming, dark mode implementation, and i18n alongside performance best practices like image loading and lazy loading to optimize overall UX.

Can I use these UI guidelines to audit an existing component library?▼

Yes, you can use these UI guidelines to audit an existing component library. The rules are designed for building, auditing, and reviewing web interfaces across HTML/CSS/JS projects, ensuring semantic HTML and accessibility standards are consistently met.

Related Skills

Explore More Design & Creative Skills→
ryan-nguyen-01ryan-nguyen-01
4

skill-ui-accessibility

Analyze web UI structure, semantics, and ARIA usage for accessibility gaps.

Community
Advanced
tubone24tubone24

a11y-check

Analyze web interfaces for WCAG 2.1 AA accessibility compliance.

Community
Intermediate
DITEKmaxDITEKmax

web-design-guidelines

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

Community
Advanced
warpdotdevwarpdotdev
820

web-accessibility-audit

Audit web pages against WCAG standards using automated tools and manual review.

Official
Intermediate