mikezupper

Semantic HTML Skill — Design skill for Claude Code

Design community

Agent skill for static, CSS-free semantic HTML (2026): full element vocabulary, SEO, ARIA, i18n, and performance best practices — plus a self-demonstrating, W3C-validated field guide.

How to install Semantic HTML Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open mikezupper/semantic-html-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Semantic HTML Skill does

Agent skill for static, CSS-free semantic HTML (2026): full element vocabulary, SEO, ARIA, i18n, and performance best practices — plus a self-demonstrating, W3C-validated field guide.

Alternatives in Design

Canvas Design — Create beautiful visual art in PNG and PDF documents using design philosophy 94.1k ★
CloudCLI — 8,400+ Free open-source web/mobile UI for Claude Code, Cursor CLI, and Codex 8.7k ★
Remix — Restyle a site in another design vocabulary — brutalist, swiss, art-deco, cyberpunk, soft-ui, or editorial 3.6k ★

README

Semantic HTML (2026) — Agent Skill & Field Guide

An agent skill that produces **static, CSS-free, purely semantic HTML** exploiting the full 2026 element vocabulary — with SEO, ARIA, internationalization, and performance best practices baked in — plus a self-demonstrating demo page where every element is its own example.

![HTML5](https://img.shields.io/badge/HTML-Living_Standard-E34F26?logo=html5&logoColor=white) [![Validate HTML](https://github.com/mikezupper/semantic-html-skill/actions/workflows/validate.yml/badge.svg)](https://github.com/mikezupper/semantic-html-skill/actions/workflows/validate.yml) ![W3C Validated](https://img.shields.io/badge/Nu_Checker-0_errors_·_0_warnings-brightgreen?logo=w3c&logoColor=white) ![CSS](https://img.shields.io/badge/CSS-none_by_design-blueviolet) ![JavaScript](https://img.shields.io/badge/JavaScript-none_(JSON--LD_only)-yellow) ![Elements](https://img.shields.io/badge/element_coverage-113%2F113-blue) ![Deprecated elements](https://img.shields.io/badge/deprecated_elements-0-critical) ![ARIA](https://img.shields.io/badge/ARIA-native--first-9cf) ![WCAG](https://img.shields.io/badge/WCAG-landmarks_·_labels_·_captions-005A9C?logo=w3c&logoColor=white) ![i18n](https://img.shields.io/badge/i18n-lang_·_dir_·_bdi_·_ruby-ff69b4) ![SEO](https://img.shields.io/badge/SEO-JSON--LD_·_OG_·_canonical-success) ![Baseline](https://img.shields.io/badge/Baseline-2026-blue) ![Skill format](https://img.shields.io/badge/format-Claude_Code_skill-D97757?logo=anthropic&logoColor=white) ![License](https://img.shields.io/badge/license-CC_BY_4.0-lightgrey) ![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen) ![Maintained](https://img.shields.io/badge/maintained-yes-success)

File	What it is
`skills.md`	The agent skill: prime directives, the full element vocabulary with when-to-use tables, page-architecture rules, SEO / ARIA / i18n / performance best practices, frontier-element reference, and a se