Quality

Front-end security

Keeps front-end code from opening security holes in any stack - XSS sinks (innerHTML, dangerouslySetInnerHTML, v-html, {@html}) and sanitizing, no eval, postMessage origins, secrets kept out of public env variables, CSP and HTTP-only headers, SRI, window.open, HTTPS. Use when rendering user or CMS content, embedding third parties, adding env variables or headers, or when asked "is this safe".

fe-securityevery web project9 rules90 tokens always loaded, 971 tokens when used, 1450 tokens in references on demand.

Install

init installs this skill when the project uses every web project. Pick your agent to see where its files land.

npx github:dawidolko/frontend-skills init

Not tested yet with this runner. npx and pnpm dlx are tested; if this one fails, use one of them.

Without --agents, init finds the agents from what the project already has, and asks when it finds none:

How init finds each of the 17 agents

Agent	Found by
Claude Code	`CLAUDE.md` `.claude` `CLAUDE.local.md`
OpenAI Codex	`.codex` `AGENTS.override.md`
Cursor	`.cursor` `.cursorrules`
GitHub Copilot	`.github/copilot-instructions.md` `.github/instructions` `.github/skills` `.github/prompts`
Gemini CLI	`GEMINI.md` `.gemini`
Antigravity CLI	`.agents/rules` `.agent/rules`
Devin / Windsurf	`.devin` `.windsurf` `.windsurfrules`
OpenCode	`opencode.json` `opencode.jsonc` `.opencode`
Cline	`.clinerules` `.cline`
Zed	`.rules` `.zed`
JetBrains Junie	`.junie`
Kiro	`.kiro`
Augment	`.augment` `.augment-guidelines`
Trae	`.trae`
Continue	`.continue`
Amazon Q Developer	`.amazonq`
Aider	`.aider.conf.yml` `CONVENTIONS.md`

Where fe-security lands for Claude Code

.claude/skills/fe-security/SKILL.mdskill
.claude/skills/fe-security/references/security.mdskill
.claude/rules/fe-security.mdrule file
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.claude/rules/fe-security.md

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.js"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
---

# Front-end security (frontend-skills)

Keeps front-end code from opening security holes in any stack - XSS sinks (innerHTML, dangerouslySetInnerHTML, v-html, {@html}) and sanitizing, no eval, postMessage origins, secrets kept out of public env variables, CSP and HTTP-only headers, SRI, window.open, HTTPS. Use when rendering user or CMS content, embedding third parties, adding env variables or headers, or when asked "is this safe".

- Never pass user, CMS or API data to a raw HTML sink unsanitized; render text, or sanitize with DOMPurify (security/raw-html-sink).
- Never run strings as code: no `eval`, `new Function`, string timers (security/no-eval).
- `postMessage` names an exact origin; window message listeners check `event.origin` (security/postmessage-origin).
- Secrets never use a public env prefix (`NEXT_PUBLIC_`, `VITE_`, `PUBLIC_`); they stay in server code (security/no-secrets-in-client-env).
- Versioned CDN files carry `integrity` and `crossorigin`, or are self-hosted (security/sri-cdn).
- `window.open` to other sites passes `noopener,noreferrer` (security/window-open-noopener).
- `frame-ancestors`, `X-Frame-Options`, HSTS and CSP reporting are HTTP headers, never meta tags (security/csp-meta-ignored).
- Production sends a strict CSP with nonces or hashes (security/csp-strict); everything loads over HTTPS (security/https-only).
- Validate URLs before binding them to `href` or `src`: allow `https:`, `http:`, `mailto:`, `tel:` only.
- Auth cookies are set by the server with `Secure`, `HttpOnly` and `SameSite`; never write tokens into the DOM or URLs.
- Never say code "is secure"; say what was checked and what a person must review.

Before larger changes, read the full skill: `.claude/skills/fe-security/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-security lands for OpenAI Codex

.agents/skills/fe-security/SKILL.mdskill
.agents/skills/fe-security/references/security.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenAI Codex has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-security lands for Cursor

.agents/skills/fe-security/SKILL.mdskill
.agents/skills/fe-security/references/security.mdskill
.cursor/rules/fe-security.mdcrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.cursor/rules/fe-security.mdc

---
description: Keeps front-end code from opening security holes in any stack - XSS sinks (innerHTML, dangerouslySetInnerHTML, v-html, {@html}) and sanitizing, no eval, postMessage origins, secrets kept out of public env variables, CSP and HTTP-only headers, SRI, window.open, HTTPS. Use when rendering user or CMS content, embedding third parties, adding env variables or headers, or when asked "is this safe".
globs: **/*.html, **/*.jsx, **/*.tsx, **/*.js, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html
alwaysApply: false
---

# Front-end security (frontend-skills)

- Never pass user, CMS or API data to a raw HTML sink unsanitized; render text, or sanitize with DOMPurify (security/raw-html-sink).
- Never run strings as code: no `eval`, `new Function`, string timers (security/no-eval).
- `postMessage` names an exact origin; window message listeners check `event.origin` (security/postmessage-origin).
- Secrets never use a public env prefix (`NEXT_PUBLIC_`, `VITE_`, `PUBLIC_`); they stay in server code (security/no-secrets-in-client-env).
- Versioned CDN files carry `integrity` and `crossorigin`, or are self-hosted (security/sri-cdn).
- `window.open` to other sites passes `noopener,noreferrer` (security/window-open-noopener).
- `frame-ancestors`, `X-Frame-Options`, HSTS and CSP reporting are HTTP headers, never meta tags (security/csp-meta-ignored).
- Production sends a strict CSP with nonces or hashes (security/csp-strict); everything loads over HTTPS (security/https-only).
- Validate URLs before binding them to `href` or `src`: allow `https:`, `http:`, `mailto:`, `tel:` only.
- Auth cookies are set by the server with `Secure`, `HttpOnly` and `SameSite`; never write tokens into the DOM or URLs.
- Never say code "is secure"; say what was checked and what a person must review.

Before larger changes, read the full skill: `.agents/skills/fe-security/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-security lands for GitHub Copilot

.agents/skills/fe-security/SKILL.mdskill
.agents/skills/fe-security/references/security.mdskill
.github/instructions/fe-security.instructions.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.github/instructions/fe-security.instructions.md

---
applyTo: "**/*.html,**/*.jsx,**/*.tsx,**/*.js,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
description: "Keeps front-end code from opening security holes in any stack - XSS sinks (innerHTML, dangerouslySetInnerHTML, v-html, {@html}) and sanitizing, no eval, postMessage origins, secrets kept out of public env variables, CSP and HTTP-only headers, SRI, window.open, HTTPS. Use when rendering user or CMS content, embedding third parties, adding env variables or headers, or when asked \"is this safe\"."
---

# Front-end security (frontend-skills)

- Never pass user, CMS or API data to a raw HTML sink unsanitized; render text, or sanitize with DOMPurify (security/raw-html-sink).
- Never run strings as code: no `eval`, `new Function`, string timers (security/no-eval).
- `postMessage` names an exact origin; window message listeners check `event.origin` (security/postmessage-origin).
- Secrets never use a public env prefix (`NEXT_PUBLIC_`, `VITE_`, `PUBLIC_`); they stay in server code (security/no-secrets-in-client-env).
- Versioned CDN files carry `integrity` and `crossorigin`, or are self-hosted (security/sri-cdn).
- `window.open` to other sites passes `noopener,noreferrer` (security/window-open-noopener).
- `frame-ancestors`, `X-Frame-Options`, HSTS and CSP reporting are HTTP headers, never meta tags (security/csp-meta-ignored).
- Production sends a strict CSP with nonces or hashes (security/csp-strict); everything loads over HTTPS (security/https-only).
- Validate URLs before binding them to `href` or `src`: allow `https:`, `http:`, `mailto:`, `tel:` only.
- Auth cookies are set by the server with `Secure`, `HttpOnly` and `SameSite`; never write tokens into the DOM or URLs.
- Never say code "is secure"; say what was checked and what a person must review.

Before larger changes, read the full skill: `.agents/skills/fe-security/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-security lands for Gemini CLI

.agents/skills/fe-security/SKILL.mdskill
.agents/skills/fe-security/references/security.mdskill
GEMINI.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Gemini CLI: Gemini CLI was replaced by Antigravity CLI for unpaid tiers on 2026-06-18; choose "antigravity" too if you use it.

Gemini CLI has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

GEMINI.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-security lands for Antigravity CLI

.agents/skills/fe-security/SKILL.mdskill
.agents/skills/fe-security/references/security.mdskill
.agents/rules/fe-security.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.agents/rules/fe-security.md

---
trigger: glob
globs: "**/*.html, **/*.jsx, **/*.tsx, **/*.js, **/*.vue, **/*.svelte, **/*.astro, **/*.component.html"
description: "Keeps front-end code from opening security holes in any stack - XSS sinks (innerHTML, dangerouslySetInnerHTML, v-html, {@html}) and sanitizing, no eval, postMessage origins, secrets kept out of public env variables, CSP and HTTP-only headers, SRI, window.open, HTTPS. Use when rendering user or CMS content, embedding third parties, adding env variables or headers, or when asked \"is this safe\"."
---

# Front-end security (frontend-skills)

- Never pass user, CMS or API data to a raw HTML sink unsanitized; render text, or sanitize with DOMPurify (security/raw-html-sink).
- Never run strings as code: no `eval`, `new Function`, string timers (security/no-eval).
- `postMessage` names an exact origin; window message listeners check `event.origin` (security/postmessage-origin).
- Secrets never use a public env prefix (`NEXT_PUBLIC_`, `VITE_`, `PUBLIC_`); they stay in server code (security/no-secrets-in-client-env).
- Versioned CDN files carry `integrity` and `crossorigin`, or are self-hosted (security/sri-cdn).
- `window.open` to other sites passes `noopener,noreferrer` (security/window-open-noopener).
- `frame-ancestors`, `X-Frame-Options`, HSTS and CSP reporting are HTTP headers, never meta tags (security/csp-meta-ignored).
- Production sends a strict CSP with nonces or hashes (security/csp-strict); everything loads over HTTPS (security/https-only).
- Validate URLs before binding them to `href` or `src`: allow `https:`, `http:`, `mailto:`, `tel:` only.
- Auth cookies are set by the server with `Secure`, `HttpOnly` and `SameSite`; never write tokens into the DOM or URLs.
- Never say code "is secure"; say what was checked and what a person must review.

Before larger changes, read the full skill: `.agents/skills/fe-security/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-security lands for Devin / Windsurf

.agents/skills/fe-security/SKILL.mdskill
.agents/skills/fe-security/references/security.mdskill
.devin/rules/fe-security.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Devin / Windsurf: Devin CLI also reads .cursor/rules; with Cursor chosen too, the CLI sees both rule files of a skill.

Planned by the installer itself for the example React project in the repository.

.devin/rules/fe-security.md

---
trigger: glob
globs: "**/*.html,**/*.jsx,**/*.tsx,**/*.js,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html"
---

# Front-end security (frontend-skills)

Keeps front-end code from opening security holes in any stack - XSS sinks (innerHTML, dangerouslySetInnerHTML, v-html, {@html}) and sanitizing, no eval, postMessage origins, secrets kept out of public env variables, CSP and HTTP-only headers, SRI, window.open, HTTPS. Use when rendering user or CMS content, embedding third parties, adding env variables or headers, or when asked "is this safe".

- Never pass user, CMS or API data to a raw HTML sink unsanitized; render text, or sanitize with DOMPurify (security/raw-html-sink).
- Never run strings as code: no `eval`, `new Function`, string timers (security/no-eval).
- `postMessage` names an exact origin; window message listeners check `event.origin` (security/postmessage-origin).
- Secrets never use a public env prefix (`NEXT_PUBLIC_`, `VITE_`, `PUBLIC_`); they stay in server code (security/no-secrets-in-client-env).
- Versioned CDN files carry `integrity` and `crossorigin`, or are self-hosted (security/sri-cdn).
- `window.open` to other sites passes `noopener,noreferrer` (security/window-open-noopener).
- `frame-ancestors`, `X-Frame-Options`, HSTS and CSP reporting are HTTP headers, never meta tags (security/csp-meta-ignored).
- Production sends a strict CSP with nonces or hashes (security/csp-strict); everything loads over HTTPS (security/https-only).
- Validate URLs before binding them to `href` or `src`: allow `https:`, `http:`, `mailto:`, `tel:` only.
- Auth cookies are set by the server with `Secure`, `HttpOnly` and `SameSite`; never write tokens into the DOM or URLs.
- Never say code "is secure"; say what was checked and what a person must review.

Before larger changes, read the full skill: `.agents/skills/fe-security/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-security lands for OpenCode

.agents/skills/fe-security/SKILL.mdskill
.agents/skills/fe-security/references/security.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenCode has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-security lands for Cline

.claude/skills/fe-security/SKILL.mdskill
.claude/skills/fe-security/references/security.mdskill
.clinerules/fe-security.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Cline: If .clinerules is a single file rather than a folder, Cline rule files are not written; skills still are.

Planned by the installer itself for the example React project in the repository.

.clinerules/fe-security.md

---
paths:
  - "**/*.html"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.js"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
  - "**/*.component.html"
---

# Front-end security (frontend-skills)

Keeps front-end code from opening security holes in any stack - XSS sinks (innerHTML, dangerouslySetInnerHTML, v-html, {@html}) and sanitizing, no eval, postMessage origins, secrets kept out of public env variables, CSP and HTTP-only headers, SRI, window.open, HTTPS. Use when rendering user or CMS content, embedding third parties, adding env variables or headers, or when asked "is this safe".

- Never pass user, CMS or API data to a raw HTML sink unsanitized; render text, or sanitize with DOMPurify (security/raw-html-sink).
- Never run strings as code: no `eval`, `new Function`, string timers (security/no-eval).
- `postMessage` names an exact origin; window message listeners check `event.origin` (security/postmessage-origin).
- Secrets never use a public env prefix (`NEXT_PUBLIC_`, `VITE_`, `PUBLIC_`); they stay in server code (security/no-secrets-in-client-env).
- Versioned CDN files carry `integrity` and `crossorigin`, or are self-hosted (security/sri-cdn).
- `window.open` to other sites passes `noopener,noreferrer` (security/window-open-noopener).
- `frame-ancestors`, `X-Frame-Options`, HSTS and CSP reporting are HTTP headers, never meta tags (security/csp-meta-ignored).
- Production sends a strict CSP with nonces or hashes (security/csp-strict); everything loads over HTTPS (security/https-only).
- Validate URLs before binding them to `href` or `src`: allow `https:`, `http:`, `mailto:`, `tel:` only.
- Auth cookies are set by the server with `Secure`, `HttpOnly` and `SameSite`; never write tokens into the DOM or URLs.
- Never say code "is secure"; say what was checked and what a person must review.

Before larger changes, read the full skill: `.claude/skills/fe-security/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-security lands for Zed

.agents/skills/fe-security/SKILL.mdskill
.agents/skills/fe-security/references/security.mdskill
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Zed: Zed reads only the first instruction file of its list; the block is placed in that file.

Zed has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CLAUDE.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-security lands for JetBrains Junie

.agents/skills/fe-security/SKILL.mdskill
.agents/skills/fe-security/references/security.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

JetBrains Junie: Junie reads .agents/skills only in a trusted project.

JetBrains Junie has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-security lands for Kiro

.kiro/skills/fe-security/SKILL.mdskill
.kiro/skills/fe-security/references/security.mdskill
.kiro/steering/fe-security.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.kiro/steering/fe-security.md

---
inclusion: fileMatch
fileMatchPattern: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.js", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
---

# Front-end security (frontend-skills)

Keeps front-end code from opening security holes in any stack - XSS sinks (innerHTML, dangerouslySetInnerHTML, v-html, {@html}) and sanitizing, no eval, postMessage origins, secrets kept out of public env variables, CSP and HTTP-only headers, SRI, window.open, HTTPS. Use when rendering user or CMS content, embedding third parties, adding env variables or headers, or when asked "is this safe".

- Never pass user, CMS or API data to a raw HTML sink unsanitized; render text, or sanitize with DOMPurify (security/raw-html-sink).
- Never run strings as code: no `eval`, `new Function`, string timers (security/no-eval).
- `postMessage` names an exact origin; window message listeners check `event.origin` (security/postmessage-origin).
- Secrets never use a public env prefix (`NEXT_PUBLIC_`, `VITE_`, `PUBLIC_`); they stay in server code (security/no-secrets-in-client-env).
- Versioned CDN files carry `integrity` and `crossorigin`, or are self-hosted (security/sri-cdn).
- `window.open` to other sites passes `noopener,noreferrer` (security/window-open-noopener).
- `frame-ancestors`, `X-Frame-Options`, HSTS and CSP reporting are HTTP headers, never meta tags (security/csp-meta-ignored).
- Production sends a strict CSP with nonces or hashes (security/csp-strict); everything loads over HTTPS (security/https-only).
- Validate URLs before binding them to `href` or `src`: allow `https:`, `http:`, `mailto:`, `tel:` only.
- Auth cookies are set by the server with `Secure`, `HttpOnly` and `SameSite`; never write tokens into the DOM or URLs.
- Never say code "is secure"; say what was checked and what a person must review.

Before larger changes, read the full skill: `.kiro/skills/fe-security/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-security lands for Augment

.agents/skills/fe-security/SKILL.mdskill
.agents/skills/fe-security/references/security.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Augment has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-security lands for Trae

.trae/skills/fe-security/SKILL.mdskill
.trae/skills/fe-security/references/security.mdskill
.trae/rules/fe-security.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Trae: Trae reads AGENTS.md only after it is enabled in its settings.

Planned by the installer itself for the example React project in the repository.

.trae/rules/fe-security.md

---
description: "Keeps front-end code from opening security holes in any stack - XSS sinks (innerHTML, dangerouslySetInnerHTML, v-html, {@html}) and sanitizing, no eval, postMessage origins, secrets kept out of public env variables, CSP and HTTP-only headers, SRI, window.open, HTTPS. Use when rendering user or CMS content, embedding third parties, adding env variables or headers, or when asked \"is this safe\"."
globs: **/*.html,**/*.jsx,**/*.tsx,**/*.js,**/*.vue,**/*.svelte,**/*.astro,**/*.component.html
alwaysApply: false
---

# Front-end security (frontend-skills)

- Never pass user, CMS or API data to a raw HTML sink unsanitized; render text, or sanitize with DOMPurify (security/raw-html-sink).
- Never run strings as code: no `eval`, `new Function`, string timers (security/no-eval).
- `postMessage` names an exact origin; window message listeners check `event.origin` (security/postmessage-origin).
- Secrets never use a public env prefix (`NEXT_PUBLIC_`, `VITE_`, `PUBLIC_`); they stay in server code (security/no-secrets-in-client-env).
- Versioned CDN files carry `integrity` and `crossorigin`, or are self-hosted (security/sri-cdn).
- `window.open` to other sites passes `noopener,noreferrer` (security/window-open-noopener).
- `frame-ancestors`, `X-Frame-Options`, HSTS and CSP reporting are HTTP headers, never meta tags (security/csp-meta-ignored).
- Production sends a strict CSP with nonces or hashes (security/csp-strict); everything loads over HTTPS (security/https-only).
- Validate URLs before binding them to `href` or `src`: allow `https:`, `http:`, `mailto:`, `tel:` only.
- Auth cookies are set by the server with `Secure`, `HttpOnly` and `SameSite`; never write tokens into the DOM or URLs.
- Never say code "is secure"; say what was checked and what a person must review.

Before larger changes, read the full skill: `.trae/skills/fe-security/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-security lands for Continue

.frontend-skills/skills/fe-security/SKILL.mdskill
.frontend-skills/skills/fe-security/references/security.mdskill
.continue/rules/fe-security.mdrule file

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.continue/rules/fe-security.md

---
name: "Front-end security"
description: "Keeps front-end code from opening security holes in any stack - XSS sinks (innerHTML, dangerouslySetInnerHTML, v-html, {@html}) and sanitizing, no eval, postMessage origins, secrets kept out of public env variables, CSP and HTTP-only headers, SRI, window.open, HTTPS. Use when rendering user or CMS content, embedding third parties, adding env variables or headers, or when asked \"is this safe\"."
globs: ["**/*.html", "**/*.jsx", "**/*.tsx", "**/*.js", "**/*.vue", "**/*.svelte", "**/*.astro", "**/*.component.html"]
alwaysApply: false
---

# Front-end security (frontend-skills)

- Never pass user, CMS or API data to a raw HTML sink unsanitized; render text, or sanitize with DOMPurify (security/raw-html-sink).
- Never run strings as code: no `eval`, `new Function`, string timers (security/no-eval).
- `postMessage` names an exact origin; window message listeners check `event.origin` (security/postmessage-origin).
- Secrets never use a public env prefix (`NEXT_PUBLIC_`, `VITE_`, `PUBLIC_`); they stay in server code (security/no-secrets-in-client-env).
- Versioned CDN files carry `integrity` and `crossorigin`, or are self-hosted (security/sri-cdn).
- `window.open` to other sites passes `noopener,noreferrer` (security/window-open-noopener).
- `frame-ancestors`, `X-Frame-Options`, HSTS and CSP reporting are HTTP headers, never meta tags (security/csp-meta-ignored).
- Production sends a strict CSP with nonces or hashes (security/csp-strict); everything loads over HTTPS (security/https-only).
- Validate URLs before binding them to `href` or `src`: allow `https:`, `http:`, `mailto:`, `tel:` only.
- Auth cookies are set by the server with `Secure`, `HttpOnly` and `SameSite`; never write tokens into the DOM or URLs.
- Never say code "is secure"; say what was checked and what a person must review.

Before larger changes, read the full skill: `.frontend-skills/skills/fe-security/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-security lands for Amazon Q Developer

.frontend-skills/skills/fe-security/SKILL.mdskill
.frontend-skills/skills/fe-security/references/security.mdskill
.amazonq/rules/frontend-skills.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Amazon Q Developer: Amazon Q Developer IDE plugins reach end of support on 2027-04-30; AWS points to Kiro.

Amazon Q Developer has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

.amazonq/rules/frontend-skills.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-security` (Front-end security): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.js`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-security/SKILL.md`.

The real file

Where fe-security lands for Aider

.frontend-skills/skills/fe-security/SKILL.mdskill
.frontend-skills/skills/fe-security/references/security.mdskill
CONVENTIONS.mdinstruction block
.aider.conf.ymlconfig

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Aider has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CONVENTIONS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-security` (Front-end security): when editing `**/*.html`, `**/*.jsx`, `**/*.tsx`, `**/*.js`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, `**/*.component.html`, first read `.frontend-skills/skills/fe-security/SKILL.md`.

The real file

How to use it

Once installed, the agent loads the skill by itself when a task matches its description. You can also ask for it in your own words, for example:

Phrases from the skill description that make the agent pick it:

is this safe

And to check and fix the work:

Use the fe-security skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain security/raw-html-sink and fix it here.

Rules it teaches

security/raw-html-sink
Never pass user or remote data to a raw HTML sink (innerHTML, dangerouslySetInnerHTML, v-html, {@html}) without sanitizing it.
seriousstatic
security/no-eval
Front-end code never runs strings as code - no eval, new Function or string arguments to setTimeout and setInterval.
seriousstatic
security/postmessage-origin
postMessage names an exact target origin, and every window message listener checks event.origin against an allowlist.
seriousstatic
security/no-secrets-in-client-env
Secrets never use a client-exposed environment prefix (NEXT_PUBLIC_, VITE_, PUBLIC_, NUXT_PUBLIC_); they stay on the server.
criticalstatic
security/sri-cdn
Versioned files from a public CDN carry Subresource Integrity (integrity plus crossorigin), or are self-hosted.
moderatestatic
security/window-open-noopener
window.open for another site passes "noopener" (and "noreferrer" when needed) so the new page cannot control yours.
minorstatic
security/csp-meta-ignored
frame-ancestors, report-uri, sandbox and X-Frame-Options are sent as HTTP headers; in a meta tag they do nothing.
moderatestatic
security/csp-strict
Production pages send a strict Content Security Policy (nonces or hashes with strict-dynamic, object-src none, base-uri none).
moderatebrowser
security/https-only
Every page and every resource it loads use HTTPS; no mixed content and no http:// links to your own site.
seriousbrowser

The rule digest

This part is copied into each agent's scoped rule file, so it stands on its own:

Never pass user, CMS or API data to a raw HTML sink unsanitized; render text, or sanitize with DOMPurify (security/raw-html-sink).
Never run strings as code: no eval, new Function, string timers (security/no-eval).
postMessage names an exact origin; window message listeners check event.origin (security/postmessage-origin).
Secrets never use a public env prefix (NEXT_PUBLIC_, VITE_, PUBLIC_); they stay in server code (security/no-secrets-in-client-env).
Versioned CDN files carry integrity and crossorigin, or are self-hosted (security/sri-cdn).
window.open to other sites passes noopener,noreferrer (security/window-open-noopener).
frame-ancestors, X-Frame-Options, HSTS and CSP reporting are HTTP headers, never meta tags (security/csp-meta-ignored).
Production sends a strict CSP with nonces or hashes (security/csp-strict); everything loads over HTTPS (security/https-only).
Validate URLs before binding them to href or src: allow https:, http:, mailto:, tel: only.
Auth cookies are set by the server with Secure, HttpOnly and SameSite; never write tokens into the DOM or URLs.
Never say code "is secure"; say what was checked and what a person must review.

Steps the agent follows

Search the change for sinks: innerHTML, outerHTML, insertAdjacentHTML, document.write, dangerouslySetInnerHTML, v-html, {@html}, set:html, bypassSecurityTrust. For each, trace where the value comes from.
For rich text from a CMS or Markdown, sanitize once at a single helper (DOMPurify, configured once), and use only that helper.
For new environment variables, decide server or browser first; give browser ones the framework prefix only if they are meant to be public.
For a new third party: self-host or pin with SRI, load it async, list it in the CSP, and isolate untrusted HTML in a sandboxed iframe.
Set security headers in the host configuration (_headers, vercel.json, next.config headers(), middleware), and verify them on the deployed response.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed finds unsanitized HTML sinks, eval, unchecked postMessage, secret-looking public env variables, CDN files without SRI, window.open without noopener and headers placed in meta tags.
audit --url <page> adds Lighthouse's HTTPS and CSP checks on the rendered page.
Run the package manager's audit (npm audit --audit-level=high) in CI. A person reviews authentication, authorisation, data flows and server configuration.

Checked by the audit

The static checks of these rules run in audit; this is a real session on the example project:

Terminal recording: audit lists findings by severity with rule ids and file:line, and fails at serious. — `audit`: counts by severity, each rule with its first location, the exit code.

Reference files

references/security.md1450 tokens

SKILL.md on GitHub