security-audit

Audit TypeScript and React frontends against an opinionated security baseline across four layers.

3|5|Updated Apr 26, 2026
One-click install
npx skills add https://github.com/BenSheridanEdwards/ArchitectPlaybook --skill security-audit-bensheridanedwards
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: security-audit
Source: https://github.com/BenSheridanEdwards/ArchitectPlaybook/tree/main/security-audit
Command: npx skills add https://github.com/BenSheridanEdwards/ArchitectPlaybook --skill security-audit-bensheridanedwards

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend codebases often ship with security gaps — tokens in localStorage, missing Content Security Policy headers, unsanitized dangerouslySetInnerHTML, secrets in source — that are hard to spot in code review. This Skill statically audits a TypeScript and React frontend against an opinionated security baseline and produces structured findings plus an optional remediation plan. ## Core Features & Use Cases - Four-layer security baseline: Checks authentication/sessions (PKCE, OAuth state, redirect validation), input handling and XSS prevention, transport/headers/cookies (CSP, HSTS, frame-ancestors), and secrets/data protection/third-party integrations (SRI, iframe sandboxing, postMessage origin validation). - Diagnostic snapshot: Detects the auth library, sanitization library, deployment platform, CSP presence, and counts of risky patterns before grading any check. - Optional scanner enrichment: With --with-scan, enriches findings using installed ESLint security plugins and Semgrep OWASP rule packs; degrades gracefully when scanners are absent. - Use Case: Before a release, run the audit on a Next.js app to discover that session tokens are stored in localStorage and no Content Security Policy is configured, then generate a severity-ordered implementation plan with exact vercel.json header snippets. ## Quick Start Run /security-audit in the repository root to statically audit the frontend and receive a Top 5 recommendations summary with the full report written to .architect-audits/security-audit/findings.md.

Frequently Asked Questions about security-audit

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

FAQPage Schema
How do I audit a React frontend for security vulnerabilities?

Run /security-audit in the repository root. It statically checks four layers — authentication and sessions, input handling and XSS, transport headers and cookies, and secrets and third-party integrations — then writes findings to .architect-audits/security-audit/ and offers an implementation plan.

How to check for XSS risks like dangerouslySetInnerHTML in React?

The audit flags every dangerouslySetInnerHTML use whose payload is reachable from user input or fetched data without DOMPurify sanitization. It also checks raw innerHTML writes, unvalidated href protocols, open redirects, and unsafe Markdown rendering pipelines.

Does the security audit work with Next.js and Vercel deployments?

Yes. It detects Next.js (App Router and Pages Router), Remix, Vite-React, and CRA, plus deployment platforms like Vercel, Netlify, and Cloudflare Pages. Header checks resolve where security headers are expected to live, such as vercel.json or a framework headers() function.

Can I run Semgrep or ESLint security plugins with the audit?

Yes, pass --with-scan to enrich findings with eslint-plugin-security, eslint-plugin-no-unsanitized, eslint-plugin-react-security, and Semgrep p/owasp-top-ten rules when installed. If no scanner is present, the static analysis still completes and the degradation is recorded.

What are the limitations of a frontend-only security audit?

It does not cover backend concerns like SQL injection, server-side authorization logic, penetration testing, cryptography protocol review, compliance frameworks, or dependency vulnerabilities. Dependency and supply-chain analysis belongs to the separate dependency-audit skill.