メニュー
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)