skills.rest
dolsoon
dolsoonCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

moai-lang-html-css

Generate semantic HTML5 markup and modular CSS with WCAG 2.1 AA accessibility.

Updated Dec 2, 2025
Search Tags:#html#accessibility#web development#WCAG#frontend#css#semantic design
One-click install
npx skills add https://github.com/dolsoon/my-awesome-project --skill moai-lang-html-css-dolsoon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-lang-html-css
Source: https://github.com/dolsoon/my-awesome-project/tree/main/.claude/skills/moai-lang-html-css
Command: npx skills add https://github.com/dolsoon/my-awesome-project --skill moai-lang-html-css-dolsoon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes examples (resource) and references (resource) components.

What problem does it solve?

This Skill helps developers overcome the challenges of building modern, accessible, and semantically correct web pages. It provides best practices for HTML5 and CSS, ensuring your web applications are performant, SEO-friendly, and compliant with accessibility standards like WCAG 2.1 AA.

Core Features & Use Cases

  • Semantic HTML5 Guidance: Provides clear patterns for using HTML elements correctly, improving SEO and screen reader compatibility.
  • CSS Best Practices: Guides you on mobile-first responsive design, CSS custom properties, and maintaining low specificity for maintainable stylesheets.
  • WCAG 2.1 AA Accessibility Checklist: Ensures your interfaces are usable by everyone, covering color contrast, keyboard navigation, and ARIA attributes.
  • Use Case: When creating a new user registration form, this skill provides a compliant HTML structure with proper labels, ARIA attributes, and responsive CSS, ensuring it's accessible to users with disabilities and works well on all devices.

Quick Start

Generate semantic HTML structure for a blog post with responsive CSS and accessibility best practices.

Frequently Asked Questions about moai-lang-html-css

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

FAQPage Schema
How do I build HTML and CSS that meets WCAG accessibility standards?▼

WCAG compliance requires semantic HTML5 markup, sufficient color contrast, keyboard navigation support, and ARIA labels. This Skill provides structured guidance on all four requirements, covering WCAG 2.1 AA standards for color contrast ratios, keyboard-accessible form controls, and proper ARIA attributes for screen readers.

What's the best way to write semantic HTML for SEO and screen reader compatibility?▼

Semantic HTML uses correct elements—nav, main, article, section—instead of generic divs, improving both SEO ranking and screen reader interpretation. This Skill enforces semantic element patterns and shows when to apply each, ensuring search engines and assistive technologies parse your content accurately.

How do I structure responsive CSS with maintainable patterns and low specificity?▼

Responsive CSS starts with mobile-first design, uses CSS custom properties for tokens, and keeps selector specificity low to prevent cascade conflicts. This Skill teaches CSS variable naming conventions, modular patterns, and accessibility hooks that scale across enterprise projects without style conflicts.

Can I use this for form accessibility with proper labels and ARIA attributes?▼

Yes. This Skill provides compliant patterns for form structure, including explicit label-input associations, ARIA attributes for complex controls, and keyboard navigation hooks, ensuring forms are usable by users with disabilities and screen reader users.

What are the limitations of semantic HTML and CSS for accessibility?▼

Semantic markup and CSS alone cannot guarantee full accessibility; they require proper ARIA implementation, keyboard testing, and color contrast verification. This Skill covers these prerequisites but does not replace manual testing with assistive technologies or expert accessibility audits.

Related Skills

Explore More Software Engineering Skills→
mohamed-g-shoaibmohamed-g-shoaib

html-css-best-practices

Define HTML/CSS guidelines for accessible, maintainable, and performant web interfaces.

Community
Advanced
calcosmiccalcosmic
9

accessibility

Audit frontend components for WCAG 2.2 AA accessibility compliance.

Community
Advanced
Ankish8Ankish8
2

Design System Validator

Validate component code for CSS variables, responsive patterns, and accessibility compliance.

Community
Advanced
h4vzzh4vzz
33

Frontend Design

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

Community
Advanced