skills.rest
SleyiW
SleyiWCOMMUNITY
Explore all skills by this author →
GitHub

frontend-security-coder

Implements and reviews frontend security for Next.js App Router applications.

Updated Apr 4, 2026
Search Tags:#code review#sanitization#next.js#csp#app router#frontend security#xss prevention
One-click install
npx skills add https://github.com/SleyiW/iWana-neXt --skill frontend-security-coder-sleyiw
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-security-coder
Source: https://github.com/SleyiW/iWana-neXt/tree/main/.agents/skills/frontend-security-coder
Command: npx skills add https://github.com/SleyiW/iWana-neXt --skill frontend-security-coder-sleyiw

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend code often introduces XSS vulnerabilities, leaks sensitive data to the client, and mishandles navigation or third-party integrations. This Skill provides concrete security rules and review heuristics for Next.js App Router codebases so dynamic content, forms, redirects, and session UI are built safely. ## Core Features & Use Cases - XSS Prevention: Enforces output sanitization, restricts dangerouslySetInnerHTML, and promotes allowlist-based rendering of rich content. - Data Exposure Control: Prevents PII, tokens, and secrets from reaching client components, props, logs, or markup. - Secure Navigation & Integrations: Validates redirect targets, external link attributes, third-party scripts, and CSP coordination with backend. - Use Case: When reviewing a pull request that renders user-generated content in a Next.js page, apply this Skill to detect unsanitized HTML, unnecessary use client components with sensitive props, and unvalidated query-param redirects. ## Quick Start Review this Next.js component for XSS risks, sensitive data exposure, and unsafe redirects using the frontend security rules.

Frequently Asked Questions about frontend-security-coder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prevent XSS in Next.js App Router components?▼

Render dynamic content as plain JSX text by default and avoid dangerouslySetInnerHTML unless strictly justified. When trusted HTML must be rendered, sanitize it first with an allowlist of supported formats and document the reason.

How to avoid leaking sensitive data to Client Components in Next.js?▼

Keep data fetching and sensitive logic in Server Components and move only the minimal interactive state to the client. Never serialize tokens, secrets, or unnecessary PII into props, data attributes, or browser logs.

When should I use 'use client' in Next.js without creating security risks?▼

Use 'use client' only for components that genuinely need interactivity. Converting components for convenience expands the attack surface and can expose sensitive data or flow logic to the browser.

How do I validate redirects based on user input in Next.js?▼

Treat query params and fragments as untrusted input and validate destinations against expected routes before navigating programmatically. Allow only expected secure protocols and never build URLs from unvalidated fragments.

Does CSP alone protect a Next.js frontend from XSS?▼

No. Relying only on CSP is an anti-pattern; it is a defense-in-depth layer, not a substitute for output sanitization. Combine CSP coordinated with backend and infrastructure with proper rendering hygiene and input validation.

Why is hiding a button not enough for authorization in frontend code?▼

Hiding UI elements only affects presentation and can be bypassed by calling the API directly. Authorization decisions must be enforced on the backend, with the frontend merely reflecting the real session and permission state.

Related Skills

Explore More Software Engineering Skills→
tswrtswr
1

security

Apply STRIDE threat modeling and language-specific mitigations to secure code.

Community
Advanced
FerranGuardiaFerranGuardia

security-hardening

Enforce input validation, security headers, and CI-based dependency auditing for web and API services.

Community
Advanced
xlelibertyxleliberty

security-pen-testing

Perform offensive security assessments with vulnerability scanning and penetration testing.

Community
Advanced
kzinmrkzinmr
7

requesting-code-review

Automate pre-commit code review with static analysis, security scanning, and automated fixes.

Community
Advanced