Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/adambien/airails/web-conventionsnpx skills add AdamBien/airails --skill web-conventionsgit clone --depth 1 https://github.com/AdamBien/airailsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/adambien/airails/web-conventions)<a href="https://agentmods.dev/skills/adambien/airails/web-conventions"><img src="https://agentmods.dev/badge/skills/adambien/airails/web-conventions.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00227 | $0.02122 |
| Opus 5 | $0.00113 | $0.01061 |
| Sonnet 5 | $0.00045 | $0.00424 |
| Haiku 4.5 | $0.00023 | $0.00212 |
Grade A, and why
web-conventions scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 105 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Apply all rules below strictly to any HTML and CSS you write, generate, or review.
Scope
- Platform-level rules for HTML and CSS only — semantics, accessibility, styling, theming, browser-support policy.
- JavaScript language-level rules — modules, syntax, functions, collections, asynchrony, errors, JSDoc types — are not in this skill; they are the sibling baseline
javascript-conventions, which applies the Baseline policy below to JavaScript syntax and APIs. - JavaScript policy (whether JavaScript is used at all), architecture, state management, routing, dependencies, project structure, and verification loops are not in this skill — see the context-specific skills
web-static(no-JavaScript static sites),web-sprinkles(static sites with bounded JavaScript enhancements), andweb-components(web component SPAs). - Responsive strategy (media queries vs container queries) is stack-specific — the composed skill decides.
- When a composed skill specifies a rule, the composed skill wins; this skill is the fallback baseline.
Guiding Principles
- web standards and web platform first
- minimal external dependencies — every dependency must justify its existence
- progressive enhancement over JavaScript-first design
HTML Rules
- semantic elements over generic
<div>/<span>— use<header>,<nav>,<main>,<article>,<section>,<aside>,<footer>,<figure>,<time>,<address> - one
<main>per page - proper heading hierarchy (h1 → h2 → h3, no skipping)
langattribute on<html>alton all images (emptyalt=""for decorative)aria-labelon<nav>when multiple navs exist<label>associated with every form input- skip link for keyboard users
- use
<a>for navigation, not buttons - use
<br>only for line breaks in content, never for spacing
Form Rules
- use the semantically correct input type —
email,url,tel,password,search,number,date,time,range,file,checkbox,radio— nevertype="text"plus JavaScript re-implementation; the type alone provides the right mobile keyboard, native widget, and built-in validation (all Widely Available) - exception:
<input type="color">is Baseline Limited — do not use it; fall back to a text input with apatternfor hex colors - declare constraints in markup:
required,pattern,min/max/step,minlength/maxlength— built-in validation is the first line of defense, JavaScript only for rules markup cannot express (Constraint Validation API is Widely Available) autocompleteon every field with a well-known meaning (name,email,street-address,current-password, …) — autofill is both UX and accessibilityinputmodeonly when no dedicated input type fits (Widely Available)placeholderis a hint, never a substitute for a<label>- group related controls with
<fieldset>/<legend> - give every
<button>inside a form an explicittype— the default issubmit, which makes stray buttons submit the form - style validation states with
:user-valid/:user-invalid(Widely Available since 2026-05), not:valid/:invalid— the:user-*pseudo-classes wait for user interaction instead of flagging pristine fields
What ships with it
3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago First seen · 105 lines · 227 tokens per session scan A fed7c4b321d9
web-conventions is a skill published in the GitHub repository AdamBien/airails (48 stars, last pushed yesterday), licensed MIT. It adds 227 tokens to every session and 2,122 once invoked, about $0.0011 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
openkb-html-critic
Use to review a generated HTML deck or single-page artifact for visual quality and structural correctness. Especially good at catching CSS specificity bugs where slide-modifier classes (.divider, .center, .q, .flow etc.) accidentally override the base .slide{display:none} and cause one slide to stack on top of every…
authoring-java-sdk-tasks
Writes Airflow task logic in Java, Kotlin, or any JVM language using the Airflow Java SDK. Use when the user wants to implement Airflow tasks in Java/JVM, asks about @Builder.Dag/@Builder.Task/@Builder.XCom, the Task/BundleBuilder interfaces, reading connections/variables/XComs from Java, the JSON-to-Java type…
configuring-airflow-language-sdks
Configures Airflow to run language SDK tasks (Java, Go, and future native SDKs) — register a coordinator, map a queue to it, ensure the runtime/artifact on workers, and tune coordinator options. Use when the user wants Airflow to route a queue to a native-language coordinator, asks about the [sdk]…
tailwind-v4
Tailwind CSS v4 usage guide and v3-to-v4 differences. This skill should be used when writing, reviewing, or refactoring any Tailwind CSS code in this repo. Triggers on tasks involving Tailwind classes, @theme blocks, CSS-first configuration, or cleanup of v3-era syntax.
apply-mantel-styles
Provides guidelines for applying Mantel's brand styles to diagrams and frontend components. Use when asked to create visuals that need to align with Mantel's branding.
chat-formatting-widgets
Governs the custom markdown widgets rendered in the QuantumByte chat interface. This includes the inline highlight-mark span (use on every question the user must answer). You must check this skill on every reply to format highlights.