General Frontend Security

Framework-agnostic frontend security guide based on OWASP Secure Coding Practices. Covers XSS prevention, CSRF protection, Content Security Policy (CSP), secure cookie configuration, client-side authentication patterns, input validation, secure storage, and security headers. Activates for security audits, vulnerability reviews, XSS, CSRF, CSP, injection, security headers, or browser security questions in any web application. NOT for backend/NestJS security (use generating-nest-servers). NOT for Nuxt-specific implementation (use developing-lt-frontend). Use when this capability is needed.

tomevault-io 049eb0b 2 files · 4.4 KB Updated Sep 17, 2026

Install

Press C to copy

$ npx skillmds@latest add tomevault-io/general-frontend-security

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

＋ Add to collection

README badge

[![SkillMD](https://skillmd.com/badge/tomevault-io/general-frontend-security.svg)](https://skillmd.com/skills/tomevault-io/general-frontend-security)

Trust & safety

2 of 3 audits passed

Last audited Sep 18, 2026 · commit 049eb0b

Works with: Claude Code Claude.ai OpenAI Codex +

File contents

General Frontend Security

Framework-agnostic security practices for web applications based on OWASP guidelines.

When to Use This Skill

Reviewing frontend code for security vulnerabilities
Implementing client-side authentication flows
Setting up secure cookie handling
Configuring Content Security Policy
Auditing third-party dependencies
General frontend security questions

Skill Boundaries

User Intent	Correct Skill
"XSS prevention best practices"	THIS SKILL
"Security audit of frontend"	THIS SKILL
"Configure CSP headers"	THIS SKILL
"Build a secure login page in Nuxt"	developing-lt-frontend
"Fix @Restricted decorator in NestJS"	generating-nest-servers
"Run npm audit fix"	maintaining-npm-packages

Related Skills & Commands

Command	Purpose
`/lt-dev:review`	General security review of branch diff (framework-agnostic)
`/lt-dev:backend:sec-review`	Security review of backend code changes (auth, decorators, models)
`/lt-dev:backend:sec-audit`	Full OWASP security audit (dependencies, config, code)

Framework-Specific References

Framework	Reference File
Nuxt/Vue	See `developing-lt-frontend` skill (reference/security.md)
Angular	angular-security.md

Key Principles

Never trust client-side validation - Server must always verify
Store tokens securely - Memory for access tokens, httpOnly cookies for refresh tokens
Prevent XSS - Never use innerHTML with user input; use textContent or DOMPurify
Protect against CSRF - Use CSRF tokens for state-changing requests + SameSite cookies
Configure CSP - Restrict script/style sources, use nonces, block framing
Minimize dependencies - Fewer deps = smaller attack surface; always run pnpm audit

Complete OWASP reference with code examples: owasp-reference.md

Security Checklist

Development

No sensitive data in client-side code
Environment variables separated (public vs private)
Input validation on all user inputs
XSS prevention (no innerHTML with user data)
CSRF tokens for state-changing requests

Authentication

Tokens stored securely (memory + httpOnly cookies)
Token refresh mechanism implemented
Proper logout (clear all client state)
Session timeout configured

Configuration

HTTPS enforced
CSP headers configured
Security headers set (X-Frame-Options, etc.)
Cookies configured with secure flags
CORS properly restricted

Dependencies

pnpm audit clean (or accepted risks)
pnpm-lock.yaml committed
SRI for external resources
Regular dependency updates

Build & Deploy

Debug mode disabled
Console logs removed
Source maps disabled or restricted
Error messages generic (no stack traces)

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: general-frontend-securitydescription: Framework-agnostic frontend security guide based on OWASP Secure Coding Practices. Covers XSS prevention, CSRF protection, Content Security Policy (CSP), secure cookie configuration, client-side authentication patterns, input validation, secure storage, and security headers. Activates for security audits, vulnerability reviews, XSS, CSRF, CSP, injection, security headers, or browser security questions in any web application. NOT for backend/NestJS security (use generating-nest-servers). NOT for Nuxt-specific implementation (use developing-lt-frontend). Use when this capability is needed.---# General Frontend SecurityFramework-agnostic security practices for web applications based on OWASP guidelines.## When to Use This Skill- Reviewing frontend code for security vulnerabilities- Implementing client-side authentication flows- Setting up secure cookie handling- Configuring Content Security Policy- Auditing third-party dependencies- General frontend security questions## Skill Boundaries| User Intent | Correct Skill ||------------|---------------|| "XSS prevention best practices" | **THIS SKILL** || "Security audit of frontend" | **THIS SKILL** || "Configure CSP headers" | **THIS SKILL** || "Build a secure login page in Nuxt" | developing-lt-frontend || "Fix @Restricted decorator in NestJS" | generating-nest-servers || "Run npm audit fix" | maintaining-npm-packages |## Related Skills & Commands| Command | Purpose ||---------|---------|| `/lt-dev:review` | General security review of branch diff (framework-agnostic) || `/lt-dev:backend:sec-review` | Security review of backend code changes (auth, decorators, models) || `/lt-dev:backend:sec-audit` | Full OWASP security audit (dependencies, config, code) |## Framework-Specific References| Framework | Reference File ||-----------|---------------|| Nuxt/Vue | See `developing-lt-frontend` skill (reference/security.md) || Angular | [angular-security.md](${CLAUDE_SKILL_DIR}/angular-security.md) |## Key Principles1. **Never trust client-side validation** - Server must always verify2. **Store tokens securely** - Memory for access tokens, httpOnly cookies for refresh tokens3. **Prevent XSS** - Never use `innerHTML` with user input; use `textContent` or DOMPurify4. **Protect against CSRF** - Use CSRF tokens for state-changing requests + `SameSite` cookies5. **Configure CSP** - Restrict script/style sources, use nonces, block framing6. **Minimize dependencies** - Fewer deps = smaller attack surface; always run `pnpm audit`**Complete OWASP reference with code examples: [owasp-reference.md](${CLAUDE_SKILL_DIR}/owasp-reference.md)**## Security Checklist### Development- [ ] No sensitive data in client-side code- [ ] Environment variables separated (public vs private)- [ ] Input validation on all user inputs- [ ] XSS prevention (no innerHTML with user data)- [ ] CSRF tokens for state-changing requests### Authentication- [ ] Tokens stored securely (memory + httpOnly cookies)- [ ] Token refresh mechanism implemented- [ ] Proper logout (clear all client state)- [ ] Session timeout configured### Configuration- [ ] HTTPS enforced- [ ] CSP headers configured- [ ] Security headers set (X-Frame-Options, etc.)- [ ] Cookies configured with secure flags- [ ] CORS properly restricted### Dependencies- [ ] pnpm audit clean (or accepted risks)- [ ] pnpm-lock.yaml committed- [ ] SRI for external resources- [ ] Regular dependency updates### Build & Deploy- [ ] Debug mode disabled- [ ] Console logs removed- [ ] Source maps disabled or restricted- [ ] Error messages generic (no stack traces)---> Converted and distributed by [TomeVault](https://tomevault.io/claim/lennetech) — claim your Tome and manage your conversions.

tomevault-io/skills-registry/tree/main/lennetech--claude-code--general-frontend-security commit 049eb0bfb4

Frequently asked questions

npx skillmds@latest add tomevault-io/general-frontend-security