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 skills add event4u-app/agent-config --skill frontend-render-securitygit clone --depth 1 https://github.com/event4u-app/agent-configWrote 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/event4u-app/agent-config/frontend-render-security)<a href="https://agentmods.dev/skills/event4u-app/agent-config/frontend-render-security"><img src="https://agentmods.dev/badge/skills/event4u-app/agent-config/frontend-render-security/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.
<a href="https://agentmods.dev/skills/event4u-app/agent-config/frontend-render-security"><img src="https://agentmods.dev/badge/skills/event4u-app/agent-config/frontend-render-security.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00051 | $0.02187 |
| Opus 5 | $0.00026 | $0.01094 |
| Sonnet 5 | $0.00010 | $0.00437 |
| Haiku 4.5 | $0.00005 | $0.00219 |
Grade A, and why
frontend-render-security 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.
How it starts
The opening of the file, as written. The whole thing — 149 lines — stays where its author put it; the contents beside it link to each section on GitHub.
frontend-render-security
AI optimizes for the shortest code that produces the requested visible behavior and omits the invisible defensive layer — the sanitizer, the origin check, the server-side gate, the security header. Large samples put XSS in a majority of AI frontend code and ~2.74× more XSS than human code; every agent in the Tenzai benchmark shipped client-side flaws. These are high-precision, grep-catchable patterns — stop them at authoring time.
When to use
- Writing or modifying a component, template, or client-side script that renders data, calls an API, handles auth, or reads the URL /
postMessage. - Reviewing an AI-authored frontend diff.
- Editing
.tsx/.jsx/.vue/.svelte/.htmlor client-side.js/.ts.
Do NOT use when: the change is server-only, CLI, or non-UI — route to security / security-sensitive-stop.
The Iron Law
NEVER RENDER NON-CONSTANT INPUT INTO AN HTML/JS SINK WITHOUT ENCODING OR SANITIZING.
THE CLIENT IS UNTRUSTED — EVERY CLIENT GATE NEEDS A SERVER-SIDE TWIN.
NO SECRET, PRIVILEGED KEY, OR SESSION TOKEN LIVES IN CLIENT CODE OR localStorage.
Procedure
- Identify the sinks in the diff: HTML/JS render points, API calls, auth/role checks, URL /
postMessagereads, secret/token usage. - Run the backstop greps below; for each hit, apply the matching fix from the patterns table.
- For every client-side gate, confirm a server-side twin exists (the client is never the security boundary).
- Emit the per-diff verdict (Output format); surface any unresolved hit to the user.
The patterns AI ships by default
| Pattern | Why it's dangerous | Do instead |
|---|---|---|
dangerouslySetInnerHTML / v-html / .innerHTML = on non-constant value |
Stored/DOM XSS (CWE-79) | render as text, or sanitize (DOMPurify) if HTML is required |
Secret / API key inline or in NEXT_PUBLIC_* / VITE_* |
Bundler inlines it into shipped JS (CWE-798) | call the third party via a backend-for-frontend proxy; only truly-public values get a public prefix |
| Client-side-only auth / role / validation | Bypassable with dev tools or a proxy (CWE-602) | client gate is UX only; enforce the same check server-side |
location.* / query param → HTML or JS sink |
DOM XSS (CWE-79) | textContent; never pass URL data into an HTML/exec sink |
CORS origin: '*' (esp. with credentials) |
Any site reads authenticated responses (CWE-942) | explicit origin allow-list; never reflect Origin on credentialed routes |
Token / JWT in localStorage / sessionStorage |
XSS-exfiltratable (CWE-522) | HttpOnly; Secure; SameSite cookie |
addEventListener('message', …) without event.origin check |
Any embedder drives the handler (CWE-346) | strict-equality check event.origin against an allow-list first |
redirect / next param → location / router.push |
Open redirect / phishing (CWE-601) | relative-path or allow-listed-host only; reject external / non-http schemes |
eval / new Function / string-setTimeout on input |
Eval injection / RCE (CWE-95) | a parser or explicit allow-list |
target="_blank" without rel="noopener" |
Reverse tabnabbing (CWE-1022) | add rel="noopener noreferrer" |
| Missing CSP; missing alt/label/contrast | No XSS second line of defense; a11y failures | strict CSP (no unsafe-inline); alt text, labels, AA contrast |
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.
- 9d ago First seen · 149 lines · 51 tokens per session scan A 5dae6273175a
frontend-render-security is a skill published in the GitHub repository event4u-app/agent-config (10 stars, last pushed today), licensed MIT. It adds 51 tokens to every session and 2,187 once invoked, about $0.0003 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-09-03.
Other skills, from other repositories
extract-source-sample
Given the path to a finished content-goose ad-run folder, extract everything that defines that ad — recipe shot list, VO script, characters, voices, world, atom-skills, master mp4 — and emit a source-sample.json in the exact shape the upload-ad-sample skill writes to the Goose Ads library. Also links every character…
threejs-geometry
Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance…
layout-skill
Layer A layout-mechanics reference. Stacks on any style skill when the screen is an app shell, dashboard, settings, list-detail, mail/inbox, or any layout with fixed regions plus a scrolling body — or when a layout breaks under long, empty, or unbroken content. Owns spatial structure and scroll ownership; owns zero…
lov-fix-broken-links
A link-checking and repair assistant for project pages, navigation, documentation, and route definitions. A route is the address or rule that connects a web URL to a page or handler.
design-taste
Stops AI from generating boring, generic UI. Use when building new interfaces, reviewing generated UI, or fixing the flat / generic look that AI tools default to. Anti-slop design principles for premium frontends.