web-components

web-components is a skill for Claude Code from AdamBien/airails. It costs 160 tokens per session (4,798 once invoked), scanned A, original, MIT.

A set of architecture and coding rules for single-page web applications built with browser web components instead of a full frontend framework. It covers templates, shared state, page navigation, dependencies, and browser standards.

In plain words
What is it for?
Use it when creating or maintaining a web-component application with client-side state, reusable custom elements, and browser-based routing.
Why use it?
It gives a consistent way to build maintainable web apps while keeping the code close to built-in browser features. It also explains which related rules to use for static sites and small JavaScript enhancements.

Skill for Claude Code

Written for Claude Code: argument-hint in frontmatter.

Needs its repository: it reads a path above its own folder, which exists only inside the repository. The line is import BElement from "../../BElement.js";.

Good fit Use it when creating or maintaining a web-component application with client-side state, reusable custom elements, and browser-based routing.

Compare 6 skills from other repositories ↓
Install

Getting it into your agent

It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.

Clone the repo
git clone --depth 1 https://github.com/AdamBien/airails
agentmods
npx agentmods add skills/adambien/airails/web-components

Made for: Claude Code.

Wrote 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.

agentmods badge for web-components

README.md
[![agentmods](https://agentmods.dev/badge/skills/adambien/airails/web-components/github.svg)](https://agentmods.dev/skills/adambien/airails/web-components)
Your own site
<a href="https://agentmods.dev/skills/adambien/airails/web-components"><img src="https://agentmods.dev/badge/skills/adambien/airails/web-components/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for web-components

Your own site · 80×15
<a href="https://agentmods.dev/skills/adambien/airails/web-components"><img src="https://agentmods.dev/badge/skills/adambien/airails/web-components.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 160 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 4,798 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector warn 7 Sept 2026
SkillSpector: 1 finding, up to medium

These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →

  • medium Rogue Agent · line 232
    Skill establishes unauthorized persistence across sessions via cron jobs, startup scripts, or state files. Session persistence allows an attacker to maintain access beyond the current interaction.
    Fix: Remove any persistence mechanisms (cron jobs, startup scripts, state files). Skills should not maintain state across sessions without explicit user consent.
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00160 $0.04798
Opus 5.5 $0.00064 $0.01919
Sonnet 5.5 $0.00032 $0.00960
Haiku 4.5 $0.00016 $0.00480

Measured 1mo ago against content hash 71ee3e8df98e, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

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 1mo 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
web/web-components/SKILL.md · 427 lines

How it starts

The opening of the file, as written. The whole thing — 427 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:

  1. 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.

Read the full file on GitHub · 427 lines

Files

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.

Changes

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.

  1. 1mo ago Changed · +1 lines 71ee3e8df98e
  2. 1mo ago First seen · 426 lines · 160 tokens per session scan A 8c23baa7be68

Subscribe to this mod's changes

web-components is a skill published in the GitHub repository AdamBien/airails (59 stars, last pushed yesterday), licensed MIT. It adds 160 tokens to every session and 4,798 once invoked, about $0.0006 per session on Opus 5.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.

Related

Other skills, from other repositories

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…

astronomer/agents · 152 tokens

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]…

astronomer/agents · 155 tokens

post-processing

Extract, analyze, and summarize simulation output data — pull spatial fields at specific timesteps, compute time-series trends and detect steady state, extract line profiles through the domain, generate statistical summaries and distributions, calculate derived quantities (gradients, fluxes, volume fractions…

HeshamFS/materials-simulation-skills · 130 tokens

nonlinear-solvers

Select and configure nonlinear solvers for root-finding f(x)=0, optimization min F(x), and least-squares problems — choose among Newton, Newton-Krylov, quasi-Newton (BFGS, L-BFGS), Broyden, Anderson acceleration, and Levenberg-Marquardt methods, configure line search or trust-region globalization, diagnose convergence…

HeshamFS/materials-simulation-skills · 153 tokens

ontology-explorer

Parse, navigate, and query materials science ontology structures — browse class hierarchies, inspect individual classes and their properties, look up object and data property definitions with domain/range, search for ontology terms by keyword, and parse or summarize raw OWL/XML files. Currently supports CMSO and ASMO…

HeshamFS/materials-simulation-skills · 151 tokens

simulation-orchestrator

Orchestrate multi-simulation campaigns — generate parameter sweep configurations (grid, linspace, or Latin Hypercube sampling), initialize and track batch job campaigns, monitor job completion status, and aggregate results with summary statistics across all runs. Use when running a parameter study across dt, kappa, or…

HeshamFS/materials-simulation-skills · 125 tokens