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-componentsnpx skills add AdamBien/airails --skill web-componentsgit 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-components)<a href="https://agentmods.dev/skills/adambien/airails/web-components"><img src="https://agentmods.dev/badge/skills/adambien/airails/web-components.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 | $0.00160 | $0.04783 |
| Opus 5 | $0.00080 | $0.02391 |
| Sonnet 5 | $0.00032 | $0.00957 |
| Haiku 4.5 | $0.00016 | $0.00478 |
Grade A, and why
web-components scanned grade A with 1 finding 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 3d 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.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
script (e.g. `update-lit-html.sh <version>`: `curl` the tarball, extract the single How it starts
The opening of the file, as written. The whole thing — 426 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Build or maintain a web component application using $ARGUMENTS. Apply all rules below strictly.
Guiding Principles
- web standards and web platform first
- minimal external dependencies — every dependency must justify its existence, and is continuously replaced with web standards
- no frameworks — use the platform: custom elements, ES modules, import maps
- no build system — dependencies are vendored as self-contained ES modules; nothing to compile, bundle, or transpile
- progressive enhancement over JavaScript-first design
Composition
Compose with /web-conventions — it provides the baseline rules for semantic HTML, accessibility,
modern CSS, design tokens, and the Baseline browser-support policy — and with /javascript-conventions,
which provides the language-level JavaScript rules (modules, syntax, functions, collections,
asynchrony, errors, JSDoc types) and the Baseline lookup for JavaScript features. Rules in this skill
override both (e.g. container-query-first responsiveness). For static content sites without
client-side state, use /web-static instead; for a static site needing only a few isolated
enhancements, /web-sprinkles. For experiments and PoCs, /web-latest
may be composed on top to lift the Baseline browser-support constraints.
Reference Implementation
This skill is based on the bce.design quickstarter.
The naming rules below are stricter than the single-module quickstarter (which registers unprefixed
tags like b-add) — multi-module applications need module-prefixed tag names.
Allowed Dependencies
Only one runtime dependency is permitted. Do not add others without explicit approval:
- lit-html — templating and efficient DOM rendering
State management needs no dependency — reduction.js, a minimal in-app store
(~70 lines), implements the used Redux Toolkit API (configureStore, createAction,
createReducer) on top of the structuredClone() web standard (see State Management below).
The original Redux Toolkit may be vendored as an optional, import-map-switchable alternative.
What ships with it
1 file 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.
- 3d ago First seen · 426 lines · 160 tokens per session scan A 8c23baa7be68
web-components is a skill published in the GitHub repository AdamBien/airails (47 stars, last pushed 14d ago), licensed MIT. It adds 160 tokens to every session and 4,783 once invoked, about $0.0008 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
workers-best-practices
Reviews and authors Cloudflare Workers code against production best practices. Load when writing new Workers, reviewing Worker code, configuring wrangler.jsonc, or checking for common Workers anti-patterns (streaming, floating promises, global state, secrets, bindings, observability). Biases towards retrieval from…
find-journalists
Build, refine, dedupe, and enrich small fit-checked journalist lists for newsjack campaigns. Uses the newsjack CLI (preferred) or the medialyst MCP for news search and journalist enrichment, and falls back to a best-effort local mode with no verified contacts; the agent owns how returned data is organized.
story-origin-check
Recover the first public timestamp and canonical major coverage for a newsjacking signal, then decide whether newer coverage is the same story, a different story, or a materially new development.
annotating-task-lineage
Annotate Airflow tasks with data lineage using inlets and outlets. Use when the user wants to add lineage metadata to tasks, specify input/output datasets, or enable lineage tracking for operators without built-in OpenLineage extraction.
relevance-coarse-filter
Cheap, high-recall first-pass filter that removes obvious junk from a detector candidate pool before expensive story-origin research and PR judgment. Decides keep, monitoronly, or reject — never ranks, writes angles, verifies dates, or decides whether to pitch.
aws-cloudformation-cloudfront
Provides AWS CloudFormation patterns for CloudFront distributions, origins (ALB, S3, Lambda@Edge, VPC Origins), CacheBehaviors, Functions, SecurityHeaders, parameters, Outputs and cross-stack references. Use when creating CloudFront distributions with CloudFormation, configuring multiple origins, implementing caching…