القائمة
Semantic HTML with proper elements and structure. Trigger: When writing HTML markup, creating structure, or implementing semantic elements.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
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.
Batch execution with checkpoints. Trigger: When executing plans with batched tasks.
Universal coding principles: DRY, security by default, null guards, and YAGNI. Trigger: When writing or reviewing code in any language or technology.
Accessibility guide (WCAG 2.1/2.2, Level A–AAA). Trigger: When building UI components, interactive elements, or auditing accessibility compliance.
Astro quality patterns: island philosophy, SEO by page type, and Core Web Vitals. Trigger: When reviewing Astro site quality or hydration decisions.
| 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="summary_large_image" />
<meta name="twitter:title" content="Page Title" />
</head>
<body><!-- Content --></body>
</html>
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>
</article>
</main>
</body>
</html>
<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)