メニュー
HTML standards for Oh My Brand! theme. Semantic elements, accessibility requirements, ARIA attributes, and attribute best practices. Use when writing HTML templates or render output.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
React editor components for WordPress blocks in Oh My Brand! theme. useBlockProps, InspectorControls, MediaUpload, and attributes. Use when writing edit.tsx files.
Copy-paste scaffolds for Oh My Brand! blocks. Templates for block.json, render.php, helpers.php, view.ts, style.css, and tests. Use when creating new blocks.
CSS coding standards for Oh My Brand! theme. BEM methodology, custom properties, theme.json integration, responsive design, and accessibility. Use when styling blocks, templates or components.
Playwright E2E testing for Oh My Brand! theme. Browser automation, accessibility testing, visual regression, and block editor workflows. Use when writing end-to-end tests.
TypeScript coding standards for Oh My Brand! theme. Strict mode, interfaces, type definitions, classes, DOM manipulation, and patterns. Use when writing TypeScript components, utilities, or Web Components.
Vitest unit testing for TypeScript/JavaScript in Oh My Brand! theme. Test setup, Web Component testing, mocking patterns, and coverage. Use when writing unit tests for frontend code.
| name | html-standards |
| description | HTML standards for Oh My Brand! theme. Semantic elements, accessibility requirements, ARIA attributes, and attribute best practices. Use when writing HTML templates or render output. |
| metadata | {"author":"Wesley Smits","version":"1.0.0"} |
HTML standards and accessibility requirements for the Oh My Brand! WordPress FSE theme.
render.php)| File | Purpose |
|---|---|
| gallery-block.html | Complete semantic structure example |
| aria-patterns.html | Live regions, tabs, dialogs, expandable |
| image-patterns.html | Alt text, lazy loading, LCP optimization |
| interactive-elements.html | Buttons, links, forms |
| Element | Usage |
|---|---|
<article> | Self-contained content (blocks, posts) |
<section> | Thematic grouping of content |
<header> | Introductory content or navigational aids |
<nav> | Navigation links |
<main> | Main content of the document |
<aside> | Tangentially related content |
<footer> | Footer of section or page |
<figure> | Self-contained content like images |
<figcaption> | Caption for a figure |
<details> | Disclosure widget (expandable) |
<summary> | Summary for details element |
Maintain logical heading hierarchy (never skip levels):
<!-- ✅ Correct hierarchy -->
<h1>Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<!-- ❌ Skip levels -->
<h1>Page Title</h1>
<h3>Missing h2!</h3>
| Attribute | Purpose |
|---|---|
alt | Alternative text for accessibility |
width / height | Prevents layout shift (CLS) |
loading="lazy" | Defers off-screen images |
loading="eager" | First image (LCP optimization) |
decoding="async" | Non-blocking decode |
fetchpriority="high" | Prioritize LCP image |
See image-patterns.html for complete examples.
| Attribute | Purpose |
|---|---|
type="button" | Prevents form submission |
aria-label | Accessible name when text insufficient |
aria-expanded | Toggle state for expandable content |
aria-controls | ID of controlled element |
disabled | Disables interaction |
| Attribute | Purpose |
|---|---|
target="_blank" | Opens in new tab |
rel="noopener noreferrer" | Security for new tab links |
download | Triggers file download |
| Attribute | When to Use |
|---|---|
aria-live="polite" | Non-urgent updates (status messages) |
aria-live="assertive" | Urgent updates (errors) |
role="alert" | Error messages |
aria-atomic="true" | Announce entire region |
| Attribute | Purpose |
|---|---|
aria-expanded | Current expanded state |
aria-controls | ID of controlled panel |
hidden | Hide collapsed content |
| Attribute | Purpose |
|---|---|
role="tablist" | Container for tabs |
role="tab" | Individual tab button |
role="tabpanel" | Tab content panel |
aria-selected | Currently selected tab |
aria-controls | Links tab to panel |
aria-labelledby | Links panel to tab |
| Attribute | Purpose |
|---|---|
aria-labelledby | Links to dialog title |
aria-describedby | Links to description |
aria-modal="true" | Indicates modal behavior |
See aria-patterns.html for complete examples.
| Attribute | Purpose |
|---|---|
type | Input type (email, tel, url, etc.) |
id | Links to label |
name | Form data key |
required | Required field |
autocomplete | Autofill hint |
aria-describedby | Links to description/error |
aria-invalid | Invalid state |