ログイン
joabgonzalez

html

by @joabgonzalez in AI & LLM
0
0
# 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/

# Related Skills

# 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.