Web HTML

Purpose

This skill enables OpenClaw to generate, edit, and optimize HTML5 code, focusing on semantic markup for structure, ARIA and WCAG compliance for accessibility, form handling, Web Components for encapsulation, Shadow DOM for styling isolation, and SEO techniques like meta tags and structured data.

When to Use

Apply this skill when building web pages requiring accessible, semantic HTML, such as creating e-commerce product pages with ARIA roles or dynamic forms in single-page apps. Use it for SEO-heavy content like blog posts or when integrating custom Web Components to avoid global style conflicts.

Key Capabilities

• Generate semantic HTML: Create elements like <main> or <article> for better readability and SEO. Example: Use <header role="banner"> for accessible site headers.
• Implement ARIA/WCAG: Add attributes like aria-label="Search" to elements for screen reader support, ensuring WCAG 2.1 AA compliance.
• Handle forms: Build forms with required attributes, e.g., <input type="email" required aria-invalid="false">, including validation hooks.
• Create Web Components: Define custom elements with Shadow DOM, e.g., <my-component> encapsulating internal HTML and styles.
• Optimize for SEO: Insert meta tags like <meta name="description" content="Page description"> and use headings for keyword placement. Code snippet:

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

Usage Patterns

Invoke this skill via OpenClaw's CLI or API by specifying the skill ID ("web-html") and action parameters. For generation tasks, provide JSON configs; for edits, supply target HTML strings. Pattern 1: Use CLI for quick prototypes. Pattern 2: Chain with other skills, e.g., pass output to a CSS skill. Always include accessibility flags for WCAG compliance. Example pattern: openclaw execute web-html --action generate --params '{"type": "page", "features": ["semantic", "aria"]}' to produce structured code.

Common Commands/API

• CLI Commands: Use openclaw execute web-html --action <action> --params <JSON>, where actions include "generate", "enhance", or "validate". For example, openclaw execute web-html --action generate --params '{"elements": ["form"], "accessible": true}' generates an accessible form. Include flags like --debug for verbose output or --validate to check WCAG compliance.
• API Endpoints: POST to https://api.openclaw.ai/skills/web-html with a JSON body, e.g., {"action": "generate", "params": {"type": "component", "shadowDom": true}}. Set header Authorization: Bearer $OPENCLAW_API_KEY for authentication. Response format: JSON with "code" (HTML string) and "errors" array. Code snippet:

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

Use this to enhance existing HTML with ARIA attributes.

Integration Notes

Integrate by piping outputs to other skills, e.g., use web-html output as input for web-css. Config format: JSON objects, e.g., {"accessibility": true, "seoTags": ["description", "keywords"]}. For Web Components, ensure compatibility by wrapping in Shadow DOM; example: Combine with web-js skill via openclaw chain web-html web-js --input <html-code>. If using env vars, set $OPENCLAW_API_KEY for API calls and handle dependencies like Node.js for local Web Component testing.

Error Handling

Common errors: Invalid HTML (e.g., missing closing tags) returns HTTP 400 with message like "Syntax error in element"; ARIA misuse (e.g., invalid role) triggers 422 with details. Handle by checking response.status; if >=400, parse the "errors" array for specifics. For CLI, use --retry 3 flag to attempt fixes, e.g., openclaw execute web-html --action generate --params {...} --retry 3. Code snippet for error checking:

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

Always validate inputs with WCAG rules before execution.

Concrete Usage Examples

1. Generate a semantic HTML page with SEO: Run openclaw execute web-html --action generate --params '{"structure": "basic", "seo": true, "accessibility": true}'. This produces a full HTML document like:

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

   Use this for quick prototyping of accessible web pages.

2. Enhance a form with ARIA for accessibility: First, provide a base form string, then execute openclaw execute web-html --action enhance --target '<form><input type="text"></form>' --params '{"addAria": true}'. Output:

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

   This ensures WCAG compliance for form elements in existing code.

Graph Relationships

• Related Skills: web-css (for styling generated HTML), web-js (for scripting Web Components)
• In Cluster: web-dev
• Connected Tags: html, accessibility, semantic, web
• Dependencies: Requires web-dev cluster for full functionality