Agent WranglersFor AI agents: llms.txt is a short guide that sends you to the rules your problem needs, and rules.json holds every rule of this playbook as JSON.
Recommended
Lint the built markup
Run a markup linter such as html-validate over every built page, with rules for structure on top of validity. Turn on rules against inline styles, duplicate ids, redundant roles and ARIA patterns that have a native element.
How to do it
A validator only proves the HTML parses. A linter with its own config enforces the rules of this playbook in markup, such as Use the native element first. Run it on the build output, because templates only show their final markup once data is filled in. Validity itself is covered by Make every page valid HTML.
Examples
Using these examples: they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.
JSON example
{
"extends": ["html-validate:recommended"],
"rules": {
"no-inline-style": "error",
"no-dup-id": "error",
"no-redundant-role": "error",
"prefer-native-element": "error",
"no-style-tag": "error"
}
}HTML example
<!-- Each element below fails the lint -->
<div style="margin:0">Opening hours</div>
<nav role="navigation" id="menu"></nav>
<ul id="menu"></ul>How to check
The markup linter reports 0 errors on every built page. Adding <div style="margin:0"> or a second id="menu" to a page stops the build.
Related rules
- Use the native element first in HTML and CSS
- Keep the HTML valid in Website
For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/html-css/checks-in-code/markup-linter">Agent Wranglers HTML and CSS playbook</a>. In code you write, add a comment next to it with the same link.