moai-lang-html-css

Enterprise Skill for advanced development

الانتقال إلى التثبيت

المستودع: AJBcoding/claude-skill-eval
آخر نشاط في المصدر: ١٨ نوفمبر ٢٠٢٥ في ١٩:٣٣
لغة SKILL.md المكتشفة: الإنجليزية
النجوم: ٤
التفرعات: ١

خيارات التثبيت

يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.

مراجعة ملفات المصدر

اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.

العودة إلى البحث العودة إلى التثبيت

name	moai-lang-html-css
version	4.0.0
status	stable
description	Enterprise Skill for advanced development
allowed-tools	Read, Bash, WebSearch, WebFetch

moai-lang-html-css

HTML5 Semantic Markup & CSS Best Practices with Accessibility Focus

Primary Agent: ui-ux-expert Secondary Agent: frontend-expert Version: 1.0.0 Keywords: html, semantic html, html5, css, styling, accessibility, a11y, wcag, responsive, semantics

📖 Progressive Disclosure

Level 1: Quick Reference (Core Concepts)

HTML Semantic Elements form the foundation of accessible, SEO-friendly web pages:

Element	Purpose	Use Case
`<header>`	Page/section header	Logo, navigation, branding
`<nav>`	Navigation container	Menu, breadcrumbs, site links
`<main>`	Primary content	Main page content (only one per page)
`<section>`	Thematic content group	Articles, chapters, topics
`<article>`	Self-contained content	Blog posts, news articles, comments
`<aside>`	Tangentially related content	Sidebars, ads, related links
`<footer>`	Footer section	Copyright, links, metadata

CSS Best Practices:

✅ Mobile-first responsive design (min-width breakpoints)
✅ CSS custom properties for design tokens
✅ Utility-first approach (Tailwind) or BEM methodology
✅ Avoid inline styles; use classes
✅ Minimize CSS specificity (avoid !important)

WCAG 2.1 AA Accessibility Checklist:

4.5:1 color contrast for text
Keyboard navigation (Tab, Enter, Escape, Arrow keys)
Focus indicators (2px solid outline)
Semantic HTML (no <div> for buttons)
ARIA labels where necessary

Level 2: Practical Implementation (Common Patterns)

Pattern 1: Semantic HTML Page Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessible Web Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Page Header -->
  <header role="banner">
    <nav role="navigation" aria-label="Main navigation">
      <a href="/" class="logo">Brand</a>
      <ul>
        <li><a href="/about">About</a></li>
        Services
        Contact
      
    
  

  
  Skip to main content

  
  
    
    
      Article Title
      Article introduction...
      
        Section Heading
        Section content...
      
    

    
    
      Related Articles
      
        Related article 1
        Related article 2
      
    
  

  
  
     2025 Company Name. All rights reserved.

Pattern 2: Accessible Form with Labels

<!-- WCAG 2.1 AA Compliant Form -->
<form method="POST" action="/submit">
  <fieldset>
    <legend>Contact Information</legend>

    <!-- Email Input with Label -->
    <div class="form-group">
      <label for="email">Email Address *</label>
      <input
        id="email"
        type="email"
        name="email"
        required
        aria-required="true"
        aria-describedby="email-help"
      >
      <small id="email-help">We'll never share your email</small>
    </div>

    <!-- Text Area -->
    <div class="form-group">
      <label for="message">Message *</label>
      <textarea
        id=
        =
        =
        
        =
      >
    

    
    
      
    

    
    
      Send Message

Pattern 3: Responsive CSS with Custom Properties

/* Design Tokens as CSS Custom Properties */
:root {
  /* Colors */
  --color-primary: #0ea5e9;
  --color-primary-dark: #0284c7;
  --color-secondary: #8b5cf6;
  --color-neutral-900: #111827;
  --color-neutral-500: #6b7280;
  --color-neutral-100: #f3f4f6;

  /* Typography */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing (8px base unit) */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  
  : ;
  : ;
  : ;
  : ;

  
  :    (, , , );
  :    (, , , );
  :    (, , , );
}


 {
  : smooth;
}

 {
  : (--font-family-sans);
  : (--font-size-base);
  : (--color-neutral-);
  : ;
  -webkit-: antialiased;
}


, , , , ,  {
  : (--font-weight-bold);
  : ;
}

 {
  : (--font-size-xl);
  : (--spacing-lg);
}

 {
  : (--font-size-xl);
  : (--spacing-md);
}

 {
  : (--spacing-md);
}


 {
  : inline-flex;
  : center;
  : center;
  : (--spacing-sm) (--spacing-md);
  : (--font-weight-medium);
  : none;
  : ;
  : pointer;
  : all  ease;

  
  : none;
}

 {
  :  solid (--color-primary);
  : ;
}

 {
  : ;
  : not-allowed;
}

 {
  : (--color-primary);
  : white;
}

 {
  : (--color-primary-dark);
}


 {
  : (--spacing-lg);
}

 {
  : block;
  : (--font-weight-medium);
  : (--spacing-sm);
}

, ,  {
  : ;
  : (--spacing-sm) (--spacing-md);
  :  solid (--color-neutral-);
  : ;
  : inherit;
  : inherit;
}

, ,  {
  : none;
  : (--color-primary);
  :     (, , , );
}

 {
  : ;
}


 {
  : grid;
  : (--spacing-md);
}

 (: var(--breakpoint-md)) {
   {
    : (, fr);
  }
}

 (: var(--breakpoint-lg)) {
   {
    : (, fr);
  }
}


 {
  : absolute;
  : ;
  : ;
  : ;
  : -;
  : hidden;
  : (, , , );
  : nowrap;
  : ;
}


 {
  :  solid (--color-primary);
  : ;
}

Level 3: Advanced Patterns (Expert Reference)

Advanced Pattern 1: Accessible Modal Dialog

<div role="dialog"
     aria-modal="true"
     aria-labelledby="modal-title"
     aria-describedby="modal-description">
  <div class="modal-overlay" onclick="closeModal()"></div>
  <div class="modal-content">
    <button
      class="modal-close"
      aria-label="Close dialog"
      onclick="closeModal()">
      ✕
    </button>
    <h2 id="modal-title">Dialog Title</h2>
    <p id="modal-description">Dialog description...</p>
    <button class="btn btn-primary">Action</button>
  </div>
</div>

<style>
  [role="dialog"] {
    position: fixed;
    : ;
    : ;
    : ;
    : ;
    : flex;
    : center;
    : center;
    : ;
  }

   {
    : absolute;
    : ;
    : (, , , );
  }

   {
    : relative;
    : white;
    : ;
    : ;
    : ;
    :    (, , , );
  }

  
    {
    :  solid (--color-primary);
  }

Advanced Pattern 2: Skip Navigation (A11y Best Practice)

<!-- Place at very beginning of <body> -->
<a href="#main" class="sr-only skip-link">Skip to main content</a>

<style>
  .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: white;
    padding: 0.5rem 1rem;
    text-decoration: none;
    z-index: 100;
  }

  .skip-link:focus {
    top: 0;
  }
</style>

🎯 Best Practices Checklist

HTML

✅ Use semantic HTML5 elements (<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>)
✅ Proper heading hierarchy (<h1> → <h2> → <h3>, never skip levels)
✅ Form labels explicitly connected with <label for="id"> and input id="id"
✅ Alternative text for all images: <img alt="description">
✅ Landmark roles for screen readers: role="banner", role="main", role="contentinfo"

CSS

✅ Mobile-first responsive design (start at mobile, add styles for larger screens)
✅ Use CSS custom properties for design tokens (colors, spacing, typography)
✅ Maintain 4.5:1 color contrast for normal text (WCAG AA)
✅ Visible focus indicators for keyboard users (:focus-visible, 2px outline)
✅ Use rem or em for sizing (not px) for better font scaling

Accessibility (WCAG 2.1 AA)

✅ Color contrast: Text 4.5:1, UI components 3:1 (use WebAIM contrast checker)
✅ Keyboard navigation: All functionality accessible via Tab, Enter, Escape, arrow keys
✅ Focus visible: Clear focus indicators (2px solid outline preferred)
✅ Semantic HTML foundation: Proper heading levels, form labels, alt text
✅ ARIA only when semantic HTML insufficient: aria-label, aria-describedby, role="alert"
✅ Skip links: Allow skipping repetitive navigation

📚 Official References

W3C HTML5 Spec: https://html.spec.whatwg.org/
WCAG 2.1 Guidelines: https://www.w3.org/WAI/WCAG21/quickref/
MDN Web Docs - HTML: https://developer.mozilla.org/en-US/docs/Web/HTML
MDN Web Docs - CSS: https://developer.mozilla.org/en-US/docs/Web/CSS
WebAIM - Contrast Checker: https://webaim.org/resources/contrastchecker/
WAI-ARIA Authoring Practices: https://www.w3.org/WAI/ARIA/apg/

🔗 Related Skills

Skill("moai-lang-tailwind-css") – Utility-first CSS framework
Skill("moai-lib-shadcn-ui") – React components with Tailwind + Radix
Skill("moai-domain-frontend") – Full frontend architecture