القائمة
Semantic HTML with proper elements and structure. Trigger: When writing HTML markup, creating structure, or implementing semantic elements.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/joabgonzalez/ai-agents-skills --skill htmlيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Markdown docs with Mermaid diagrams and tree layouts. Trigger: When writing architecture, spike, or implementation docs.
Paste-ready session summary for context transfer to a new chat. Trigger: User says 'context handoff', 'start fresh', or session needs to continue.
One-at-a-time questioning to fully profile a goal before acting. Trigger: User says 'grill me', goal is vague, or clarification is needed first.
عرض SKILL.md
استنادا إلى تصنيف SOC المهني
| name | html |
| description | Semantic HTML with proper elements and structure. Trigger: When writing HTML markup, creating structure, or implementing semantic elements. |
| license | Apache 2.0 |
| metadata | {"version":"1.1","type":"domain","skills":["a11y"]} |
Semantic, accessible HTML with modern standards, proper structure, meta tags.
Use when:
Don't use for React JSX (react skill) or accessibility details (a11y skill).
<!-- CORRECT -->
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Title</h1>
<p>Content</p>
</article>
</main>
<footer>Footer content</footer>
<!-- WRONG: generic divs -->
<div class="header">
<div class="nav">...</div>
</div>
<div class="main">...</div>
<!-- CORRECT: sequential -->
<h1>Page Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
<!-- WRONG: skipping levels -->
<h1>Page Title</h1>
<h4>Section</h4>
<!-- CORRECT: button for actions -->
<button type="button" onclick="doSomething()">Click</button>
<!-- CORRECT: anchor for navigation -->
<a href="/page">Go to Page</a>
<!-- WRONG: anchor for actions -->
<a href="#" onclick="doSomething()">Click</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Page description for SEO (150-160 chars)" />
<title>Page Title - Site Name</title>
<!-- Open Graph -->
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Description" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<!-- Twitter Card -->
<meta name="twitter:card" content= />
Interactive element?
→ button for actions, a for navigation
Text content?
→ article for standalone content, section for grouped content, aside for related info
Form field?
→ Wrap in label, associate via for/id, use appropriate type
List of items?
→ ul unordered, ol ordered, dl definitions
Heading?
→ h1-h6 sequential; one h1 per page
Image?
→ img with descriptive alt; empty alt="" for decorative
Tabular data?
→ table with thead, tbody, th scope
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page Title</title>
</head>
<body>
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Article Title</h1>
<p>Content</p>
</>
<button> for actions, not <a href="#"><div>action or JS handlersubmit; specify type="button" for non-submit<nav>, <main>, <article>, <section>)<button> for actions, <a> for navigationlang attribute on <html>alt text on all images<main>, proper structure)