html

by @joabgonzalez in AI & LLM

# Install this skill:

npx skills add joabgonzalez/ai-agents-framework --skill "html"

Install specific skill from multi-skill repository

# Description

Semantic HTML best practices for web development.

# SKILL.md

name: html
description: Semantic HTML best practices for web development.
skills:
- conventions
- a11y
allowed-tools:
- documentation-reader
- web-search

HTML Skill

Overview

Guidance for writing semantic, accessible HTML following modern web standards.

Objective

Enable developers to create properly structured HTML with semantic elements, accessibility attributes, and best practices.

Conventions

Refer to conventions for:

Code organization
Documentation

Refer to a11y for:

Semantic elements
ARIA attributes
Keyboard navigation

HTML Specific

Use semantic elements (<nav>, <main>, <article>)
Maintain proper heading hierarchy
Include alt text for images
Use <button> for actions, <a> for navigation
Validate HTML markup

Example

<!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>

References

https://html.spec.whatwg.org/
https://web.dev/learn/html/

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

⚡ Amp 🚀 Antigravity 🤖 Claude Code 🦀 Clawdbot 📝 Codex ▶️ Cursor 🤖 Droid 💎 Gemini CLI 🐙 GitHub Copilot 🪿 Goose 📊 Kilo Code 🔧 Kiro CLI 💻 OpenCode 🦘 Roo Code 🌲 Trae 🏄 Windsurf

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.