A styleguide skill for building web apps with HTML, CSS and JavaScript only: no framework, no bundler, no server logic. It targets coding agents, but the conventions are the same ones a human team would adopt.
This skill was developed agentically. A coordinating agent ran five
parallel research agents, a report writer, and five reference writers,
with a human reviewing and steering between rounds. The chain of evidence
is kept: every rule in references/ carries the link it was derived from.
It was manually reviewed though. Look here is a speling error as proof.
- Research. Five agents each took one subtopic: semantic HTML and accessibility, custom elements, module architecture, lazy and fetching, and state, events, routing and security. They wrote notes with inline citations and flagged gaps and conflicting sources instead of resolving them silently.
- Synthesis. One agent merged the notes into a report, keeping only sourced claims. The human read a summary and challenged it.
- Decisions. The human set the premises below. The coordinating agent recorded them so later drafting could not re-argue them.
- Style study. The coordinator read the Agent Skills specification,
Anthropic's skill-authoring guide and this repository's
promptingstandard. It distilled them into rules: one imperative rule per line with its reason, one term per concept, a default plus an escape hatch, no dates in the body, and references one level deep. - Writing. The coordinator wrote
SKILL.md, this README and the document-head reference. Five agents wrote the other references from the notes, under a shared terms table. - Verification. The coordinator built the example app and ran every gate the skill prescribes: both HTML validators, ESLint, Prettier, tsc, the shell test, and axe plus element tests in Chromium, Firefox and WebKit. The run found defects in the first draft, and the skill was corrected:
-
Island sheets shipped with lazy modules shifted layout.
-
An inline
<style>in a declared root broke the strict CSP. -
A full list re-render dropped keyboard focus.
-
A form submitted before upgrade lost its input in 4 of 16 runs.
-
@scopebroke the skill's own widely-available rule. -
A throttled benchmark showed an
@importchain costing a round trip before first paint; stylesheets are now linked in parallel. -
Document-first, not server-rendered. The initial HTML is a static file on any host. The host's only contract is MIME types, HTTP/2, compression and cache headers. Per-request personalisation, if ever needed, is an additive layer.
-
Multi-document, not single-page. One
.htmlper purpose, with its own head as a manifest of that purpose. HTML has no include mechanism after four attempts since 2011; the skill leans into that instead of fighting it. -
HTML may repeat; code may not. Markup is content and may be duplicated, guarded by an equality test. Behaviour and presentation live once in referenced files.
-
HTML-first components. Custom elements wrap existing markup in light DOM by default. Shadow DOM is reserved for self-contained widgets.
-
Baseline as the dependency line. Widely available APIs are dependencies; newly available ones are feature-tested enhancements. The one dated file,
references/platform-status.md, says which is which.
The browser is the framework. Every convention here exists to keep the pieces the platform already provides composable: a document that reads before scripts run, an element that cleans up after itself, a store that is the only writer, a head that says what the page is for. When the platform lacks a primitive, the skill prescribes one hand-written idiom rather than a library, and says what it costs.
The research notes and report are not shipped with the skill. Primary sources the references cite most:
- [HTML Living Standard](https://html.spec.whatwg.org/multipage/) and[MDN Web Docs](https://developer.mozilla.org/)
- [web-features explorer](https://web-platform-dx.github.io/web-features-explorer/) for Baseline status
- [W3C ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/) ,[ARIA in HTML](https://www.w3.org/TR/html-aria/) ,[WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/)
- [web.dev custom element best practices](https://web.dev/articles/custom-elements-best-practices) and[declarative shadow DOM](https://web.dev/articles/declarative-shadow-dom)
- [open-wc](https://open-wc.org/guides/) and[Modern Web buildless guides](https://modern-web.dev/guides/going-buildless/)
- HTML web components writing by Jeremy Keith ,Jim Nielsen ,Eric Meyer ,Chris Ferdinandi ,Zach Leatherman ,Lea Verou
- [Nolan Lawson on shadow DOM and ARIA](https://nolanlawson.com/2022/11/28/shadow-dom-and-accessibility-the-trouble-with-aria/)
- [whatwg/html#2791](https://github.com/whatwg/html/issues/2791) and[WICG declarative partial updates](https://github.com/WICG/declarative-partial-updates) for the state of HTML includes
- Agent Skills specification andAnthropic skill authoring best practices for the skill's own form
Install with the repository's other skills, or copy the vanilla-web
directory into your agent's skills location. Read SKILL.md first; it
is under 200 lines. Open a reference only when a task touches its topic.
The example app under assets/example-app is a runnable three-document
tree you can serve with any static file server.