web-html

目的

このスキルを使うと、OpenClaw で HTML5 コードを生成、編集、最適化できます。構造を表すセマンティックなマークアップ、アクセシビリティのための ARIA と WCAG への準拠、フォーム処理、カプセル化のための Web Components、スタイルを分離する Shadow DOM、メタタグや構造化データなどの SEO 技術に重点を置いています。

使用する場面

アクセシブルでセマンティックな HTML を必要とする Web ページの構築に、このスキルを適用してください。たとえば、ARIA ロールを使った EC サイトの商品ページや、シングルページアプリの動的なフォームの作成に適しています。また、ブログ記事などの SEO を重視するコンテンツや、グローバルなスタイルの競合を避けるためにカスタム Web Components を統合する際にも使用してください。

主な機能

• セマンティックな HTML を生成します。読みやすさと SEO を向上させるため、<main> や <article> などの要素を作成します。例：アクセシブルなサイトヘッダーには <header role="banner"> を使用します。
• ARIA／WCAG を実装します。スクリーンリーダーをサポートするため、要素に aria-label="Search" などの属性を追加し、WCAG 2.1 AA への準拠を確保します。
• フォームを処理します。検証フックを含め、<input type="email" required aria-invalid="false"> のように必須属性を指定したフォームを作成します。
• Web Components を作成します。Shadow DOM を使ってカスタム要素を定義します。例：<my-component> で内部の HTML とスタイルをカプセル化します。
• SEO を最適化します。<meta name="description" content="Page description"> などのメタタグを挿入し、キーワードの配置には見出しを使用します。 コードスニペット：

<section aria-labelledby="sec-title">
  <h2 id="sec-title">Section Heading</h2>
  <p>Content with SEO keywords.</p>
</section>

使用パターン

スキル ID（"web-html"）とアクションパラメーターを指定して、OpenClaw の CLI または API からこのスキルを呼び出します。生成タスクでは JSON 設定を渡し、編集では対象の HTML 文字列を渡します。パターン 1：CLI で手早くプロトタイプを作成します。パターン 2：他のスキルと連携し、たとえば出力を CSS スキルに渡します。WCAG 準拠のため、アクセシビリティのフラグを必ず含めてください。使用例：openclaw execute web-html --action generate --params '{"type": "page", "features": ["semantic", "aria"]}' を実行すると、構造化されたコードが生成されます。

一般的なコマンド／API

• CLI コマンド："generate"、"enhance"、"validate" などのアクションを指定して、openclaw execute web-html --action <action> --params <JSON> を使用します。たとえば、openclaw execute web-html --action generate --params '{"elements": ["form"], "accessible": true}' を実行すると、アクセシブルなフォームが生成されます。詳細な出力には --debug、WCAG 準拠の確認には --validate などのフラグを指定してください。
• API エンドポイント：JSON ボディを付けて https://api.openclaw.ai/skills/web-html に POST します。例：{"action": "generate", "params": {"type": "component", "shadowDom": true}}。認証にはヘッダー Authorization: Bearer $OPENCLAW_API_KEY を設定します。レスポンス形式は、"code"（HTML 文字列）と "errors" 配列を含む JSON です。 コードスニペット：

{
  "action": "enhance",
  "target": "<div>Original HTML</div>",
  "params": {"addAria": true}
}

これを使用すると、既存の HTML に ARIA 属性を追加できます。

統合に関する注意

出力を他のスキルにパイプで渡して統合します。たとえば、web-html の出力を web-css の入力として使用します。設定形式は JSON オブジェクトです。例：{"accessibility": true, "seoTags": ["description", "keywords"]}。Web Components では、Shadow DOM でラップして互換性を確保してください。例：openclaw chain web-html web-js --input <html-code> を使って web-js スキルと組み合わせます。環境変数を使用する場合は、API 呼び出し用に $OPENCLAW_API_KEY を設定し、ローカルでの Web Components のテストに必要な Node.js などの依存関係を処理してください。

エラー処理

よくあるエラー：閉じタグの不足など、HTML が無効な場合は、"Syntax error in element" のようなメッセージを含む HTTP 400 が返されます。ARIA の誤用（無効なロールなど）は、詳細を含む 422 を発生させます。response.status を確認し、400 以上の場合は "errors" 配列を解析して詳細を確認してください。CLI では、--retry 3 フラグを使って修正を試みます。例：openclaw execute web-html --action generate --params {...} --retry 3。エラー確認用のコードスニペット：

if (response.errors.length > 0) {
  console.error(response.errors[0].message); // e.g., "Missing aria-label"
  retryAction();
}

実行前に、必ず WCAG のルールに照らして入力を検証してください。

具体的な使用例

1. SEO 対応のセマンティック HTML ページを生成します：openclaw execute web-html --action generate --params '{"structure": "basic", "seo": true, "accessibility": true}' を実行します。次のような完全な HTML ドキュメントが生成されます：

   <!DOCTYPE html>
   <html lang="en">
     <head><meta name="description" content="SEO description"></head>
     <body><main aria-label="Main content">Content here</main></body>
   </html>
   

   アクセシブルなウェブページをすばやくプロトタイプ作成する際に使用します。

2. アクセシビリティのためにフォームを ARIA で強化します：まず基本となるフォーム文字列を指定し、次に openclaw execute web-html --action enhance --target '<form><input type="text"></form>' --params '{"addAria": true}' を実行します。出力：

   <form aria-label="User Form">
     <label for="input1">Label:</label>
     <input id="input1" type="text" aria-required="true">
   </form>
   

   これにより、既存コードのフォーム要素が WCAG に準拠します。

グラフの関係

• 関連スキル：web-css（生成された HTML のスタイル設定用）、web-js（Web Components のスクリプト作成用）
• クラスター内：web-dev
• 関連タグ：html、accessibility、semantic、web
• 依存関係：すべての機能を利用するには web-dev クラスターが必要です