skills.rest
duaragha
duaraghaCOMMUNITY
Explore all skills by this author →
GitHub

moai-lang-html-css

Generate semantic HTML5 structure and responsive CSS with accessibility best practices.

Updated Aug 23, 2026
Search Tags:#html#accessibility#web development#frontend#responsive design#css#semantic markup
One-click install
npx skills add https://github.com/duaragha/full_tracker --skill moai-lang-html-css-duaragha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-lang-html-css
Source: https://github.com/duaragha/full_tracker/tree/main/.claude/skills/moai-lang-html-css
Command: npx skills add https://github.com/duaragha/full_tracker --skill moai-lang-html-css-duaragha

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Modern web development demands accessible, responsive, and maintainable UIs. This Skill provides expert guidance and best practices for HTML5 semantic markup and CSS, ensuring your web projects meet high standards for user experience, SEO, and accessibility, reducing rework and improving quality.

Core Features & Use Cases

  • Semantic HTML5 Mastery: Guides you in using correct HTML elements for structure, accessibility, and SEO.
  • CSS Best Practices: Implements mobile-first responsive design, CSS custom properties, and maintainable styling methodologies (e.g., BEM).
  • WCAG 2.1 AA Accessibility: Provides a checklist and patterns to ensure your UIs are compliant with critical accessibility standards.
  • Use Case: When building a new web page, use this Skill to generate a semantic HTML structure, apply responsive CSS, and ensure all form elements are keyboard-navigable and have proper ARIA labels, all while adhering to WCAG guidelines.

Quick Start

Generate a semantic HTML5 page structure for a blog post, including header, nav, main, article, and footer.