web-sprinkles

web-sprinkles is a skill for Claude Code from AdamBien/airails. It costs 224 tokens per session (2,126 once invoked), scanned A, original, MIT.

A method for building static websites whose pages work without JavaScript, while small JavaScript modules add optional behavior. It combines rules for accessible HTML, CSS structure, and modern browser code.

In plain words
What is it for?
Use it to build or maintain multipage sites with progressive enhancement, such as navigation effects, interactive controls, and other small client-side additions.
Why use it?
It keeps content, navigation, and forms usable when scripts are disabled or fail, while limiting JavaScript to enhancements.

Skill for Claude Code

Written for Claude Code: argument-hint in frontmatter.

Good fit Use it to build or maintain multipage sites with progressive enhancement, such as navigation effects, interactive controls, and other small client-side additions.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/adambien/airails/web-sprinkles
Install

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.

Any agent
npx skills add AdamBien/airails --skill web-sprinkles
Clone the repo
git clone --depth 1 https://github.com/AdamBien/airails

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-sprinkles

README.md
[![agentmods](https://agentmods.dev/badge/skills/adambien/airails/web-sprinkles/github.svg)](https://agentmods.dev/skills/adambien/airails/web-sprinkles)
Your own site
<a href="https://agentmods.dev/skills/adambien/airails/web-sprinkles"><img src="https://agentmods.dev/badge/skills/adambien/airails/web-sprinkles/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-sprinkles

Your own site · 80×15
<a href="https://agentmods.dev/skills/adambien/airails/web-sprinkles"><img src="https://agentmods.dev/badge/skills/adambien/airails/web-sprinkles.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 224 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,126 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
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.00224 $0.02126
Opus 5 $0.00112 $0.01063
Sonnet 5 $0.00045 $0.00425
Haiku 4.5 $0.00022 $0.00213

Measured 9d ago against content hash d115fb77a06a, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-08, from the pricing page.

Security

Grade A, and why

web-sprinkles 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 9d 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.

web/web-sprinkles/SKILL.md · 174 lines

How it starts

The opening of the file, as written. The whole thing — 174 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Build or maintain a static site with JavaScript enhancements using $ARGUMENTS. Apply all rules below strictly.

Composition

This skill is /web-static plus a bounded amount of JavaScript. Everything in /web-static applies unchanged — CSS-only interactive patterns, CSS reset, page transitions, performance rules, project structure, and the verification loop — except its no-JavaScript hard constraint, which this skill replaces with the Enhancement Contract below.

  • /web-conventions — semantic HTML, accessibility, modern CSS, design tokens, Baseline policy
  • /javascript-conventions — modules, syntax, collections, asynchrony, errors, JSDoc types, and the Baseline lookup for JavaScript features
  • /web-static — everything above the JavaScript line
  • /web-latest may be composed on top for experiments and PoCs

Rules in this skill override all of them.

Enhancement Contract

  • every page is complete and usable with zero JavaScript — content readable, navigation traversable, forms submittable and validated by the browser
  • JavaScript only adds behavior to markup that already exists; it never produces the content that is the page's purpose
  • links keep real hrefs and forms keep action/method — navigation and submission never depend on a script
  • a module that fails — throws, 404s, hits an unsupported API — degrades the page to its no-script baseline, never to a broken page
  • enhancements are independent: one module failing must not disable the others
  • nothing renders late — no content flashes in, moves, or is replaced after load

The Cut Line

If HTML or CSS can express it, a script is a defect, not a choice. Before writing one, ask what the page looks like with it removed; if the answer is "broken", the design is wrong, not the script.

Behavior Verdict
Accordion, disclosure <details>/<summary> — no script
Tabs, hamburger, dropdown :checked + siblings, :focus-within — no script
Modal :target — no script; <dialog> plus a script only when focus trapping and Esc matter
Form validation input types and constraint attributes — a script only for rules markup cannot express
Page transitions, smooth scroll, carousels @view-transition, scroll-behavior, scroll snap — no script
Theme toggle that persists script — CSS cannot read localStorage
Clipboard script — navigator.clipboard
Filter, sort, or search over content already in the DOM script
Locale or relative time formatting script — Intl over a <time datetime> already in the HTML
Loading supplementary data script — but content the page exists to show stays in the HTML

Read the full file on GitHub · 174 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. 9d ago First seen · 174 lines · 224 tokens per session scan A d115fb77a06a

Subscribe to this mod's changes

web-sprinkles is a skill published in the GitHub repository AdamBien/airails (49 stars, last pushed yesterday), licensed MIT. It adds 224 tokens to every session and 2,126 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.

Related

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…

VectifyAI/OpenKB · 132 tokens

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.

sammcj/agentic-coding · 37 tokens

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.

QuantumByteOSS/quantumbyte · 50 tokens

aksel-spacing

Lag responsive layouts med Aksel Design System (v8+) - spacing tokens, layout primitives (Box, HStack, VStack, HGrid, Page, Bleed) og ResponsiveProp.

navikt/copilot · 41 tokens

web-design-reviewer

Visuell inspeksjon av nettsider for å identifisere og fikse designproblemer. Trigges av forespørsler som "sjekk designet", "gå gjennom UI-en", "fiks layouten", "finn designfeil". Finner problemer med responsivt design, tilgjengelighet, visuell konsistens og layout, og fikser dem i kildekoden.

navikt/copilot · 89 tokens

design-shiny-ui

Design Shiny application UIs using bslib for theming, layoutcolumns for responsive grids, value boxes, cards, and custom CSS/SCSS. Covers page layouts, accessibility, and brand consistency. Use when building a new Shiny app UI from scratch, modernizing an existing app from fluidPage to bslib, applying brand theming…

pjt222/agent-almanac · 96 tokens