frontend-js-strict

A strict checklist for JavaScript and TypeScript code in frontend page files, including shared helpers and safe handling of HTML.

In plain words
What is it for?
Writing or reviewing page scripts under `ui/src/pages/`, importing shared helpers, escaping HTML safely, and sanitizing values written to logs.
Why use it?
It helps prevent security problems such as cross-site scripting, where unsafe input can run code in a user's browser, and avoids incorrectly encoded text.

Cursor rule for Claude Code

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.

agentmods
npx agentmods add rules/eliornl/rolemule/frontend-js-strict
Clone the repo
git clone --depth 1 https://github.com/eliornl/rolemule

Made for: Claude Code.

Per session 0 Nothing until a file matches its globs; then the whole rule loads.
When invoked 4,285 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
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 $0.00000 $0.04285
Opus 5 $0.00000 $0.02142
Sonnet 5 $0.00000 $0.00857
Haiku 4.5 $0.00000 $0.00428

Measured yesterday against content hash f754418ac416, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

frontend-js-strict 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 yesterday.

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.

.claude/rules/frontend-js-strict.mdc · 386 lines

How it starts

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

Frontend JS/TS — Required Patterns per Page File

Every page-level script under ui/src/pages/ (Vite TypeScript entries) must follow the rules below. Prefer importing shared helpers from ui/src/shared/ instead of duplicating them.

Shared helpers: dom-security / confirm-modal / event-bus are still loaded globally via base.html (asset_url('js/dom-security.js') etc., built from ui/src/pages/). They export window.escapeHtml, window.decodeEntities, window.sanitizeLogValue, etc. New code should import from ui/src/shared/dom-security.ts when inside a Vite entry — globals remain for classic load order.

1. escapeHtml() — XSS Prevention with Decode-First

CRITICAL: The backend's html.escape() + bleach.clean() combination double-encodes entities: '' (html.escape) → ' (bleach escapes the &). To prevent rendering ' literally, escapeHtml() must decode & FIRST, then the named entities, then re-encode.

/**
 * @param {string|null|undefined} str
 * @returns {string}
 */
function escapeHtml(str) {
    if (str == null) return '';
    // Decode & first so ' → ' → '
    // (bleach double-encodes & in entities from Python's html.escape output)
    const decoded = String(str)
        .replace(/&/g, '&')
        .replace(/'/g, "'")
        .replace(/'/g, "'")
        .replace(/"/g, '"')
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>');
    return decoded
        .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;').replace(/'/g, '&#039;');
}

Apply to every dynamic value in template literals: `<span>${escapeHtml(value)}</span>`

Never decode in a different order — always &amp; first, then named entities (&#x27;, &#039;, etc.), then &amp; last. Reversing the order leaves &amp;#x27; unresolved and renders the entity literally as text.

1b. decodeEntities() — For .textContent Assignments

Read the full file on GitHub · 386 lines

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. yesterday First seen · 386 lines · 0 tokens per session scan A f754418ac416

Subscribe to this mod's changes

frontend-js-strict is a cursor rule published in the GitHub repository eliornl/rolemule (37 stars, last pushed 2d ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 4,285 tokens. 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 cursor rules, from other repositories

cursorrules

Agent2 is a framework for building production AI agents with typed HTTP APIs. PydanticAI handles the agent loop. Agent2 handles everything else: API, auth, pause/resume, approvals, provider routing, knowledge search.

Artesiana/agent2 · 399 tokens

product-manager

Holistic product leader who owns the full product lifecycle — from discovery and strategy through roadmap, stakeholder alignment, go-to-market, and outcome measurement. Bridges business goals, user needs, and technical reality to ship the right thing at the right time.

Treevu-ai/cli-market-world · 5,350 tokens

api-tester

Expert API testing specialist focused on comprehensive API validation, performance testing, and quality assurance across all systems and third-party integrations.

Treevu-ai/cli-market-world · 23 tokens

developer-advocate

Expert developer advocate specializing in building developer communities, creating compelling technical content, optimizing developer experience (DX), and driving platform adoption through authentic engineering engagement. Bridges product and engineering teams with external developers.

Treevu-ai/cli-market-world · 38 tokens

architectural-and-structural-rules

The project follows a layered architecture with clear separation of concerns.

mrharishkumar/fastapi-cursor-boilerplate · 559 tokens

angular-20

This rule provides comprehensive best practices and coding standards for Angular development, focusing on modern TypeScript, standalone components, signals, and performance optimizations.

angular/angular · 0 tokens