Frontend development skills
HTML and Semantics Skills-md for Claude, Codex & AI Agents
Free SKILL.md files that teach Claude, Cursor and other AI agents to audit and fix HTML: the right element for every control, a page structure screen readers can follow, and forms that work with autofill and validation. Each skill measures with a checker script first and changes code only in batches you approve.
4 skills published, covering semantic markup, HTML forms, responsive images and dialogs and popovers.
Start with Semantic HTML if you are reviewing a page, template or AI-generated component, and with HTML Forms if a sign-in, sign-up or checkout form needs fixing. Reach for Responsive Images when hero images, srcset or alt text are the problem, and for Dialog and Popover when a div modal or menu should become a native dialog or popover. Semantic HTML and HTML Forms hand work to each other, so most teams install both.
Semantic HTML
Audit markup with a checker and fix links, buttons, headings and landmarks in approved batches.
HTML Forms
Fix labels, autocomplete tokens, input types and validation without renaming the fields the server reads.
Responsive Images
Fix lazy-loaded hero images, srcset, sizes, picture and alt text with a checker and a sizes calculator.
Dialog and Popover
Replace div modals with native dialogs and fix popover targets, focus, Esc and scroll lock with a checker.
No skill matches that search. Clear it or choose All.
What is in this set
The set covers four jobs: choosing the right element for page structure and controls, building forms that label, autofill and validate correctly, fixing responsive images, lazy loading and alt text, and replacing div modals with native dialogs and popovers. Each skill runs a standard-library Python checker, applies fixed decision rules, protects the CSS, scripts and field names that depend on the markup, and finishes with a keyboard and screen reader check.
How to use these skills
Open a skill page, copy the file or download the .md and its checker script, and add the folder to your skills directory in Claude, Claude Code, Codex or Cursor. Each page lists the install steps and a starting prompt.
Frequently asked questions
What is an HTML semantics SKILL.md?
It is a Markdown file with a short description and instructions that an AI agent loads when a task matches, such as reviewing markup or fixing a form. In this set each file comes with a small checker script and sets limits, such as changing code only in approved batches.
Do I need all four skills?
Not always. Semantic HTML covers landmarks, headings, images, links and buttons, and hands every form field to HTML Forms. If your work is only a form, HTML Forms alone is enough. Responsive Images and Dialog and Popover are separate jobs: add them when you are fixing images or modals. For a full page review, install all four so nothing falls between them.
What do the checker scripts need?
Python 3 and nothing else. All four checker scripts use only the standard library, read the files you pass them and write nothing. They exit with an error code when they find errors, so you can also run them in continuous integration.
