React Security Stinger logo

React Security Stinger

Organization
legioncodeinc
react-security-stinger

Review React 18/19 security, including Next.js clients. Covers XSS, secrets and client trust. Delegate Next.js server surfaces to nextjs-security-stinger. Read-only.

Overview

Publisherlegioncodeinc
Repositoryvibe-coding-tools
Skill namereact-security-stinger
Stars
94
Forks
44
Bundled files
20
LicenseAGPL-3.0-or-later
Links
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 20 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by legioncodeinc on GitHub. Read the source before you install it.

Installation

Install the React Security Stinger AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/legioncodeinc/vibe-coding-tools/tree/main/plugins/code-audit-tools/skills/react-security-stinger
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/legioncodeinc/vibe-coding-tools.git /tmp/vibe-coding-tools
mkdir -p .claude/skills
cp -r /tmp/vibe-coding-tools/plugins/code-audit-tools/skills/react-security-stinger .claude/skills/react-security-stinger
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable React Security Stinger in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads React Security Stinger on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so React Security Stinger is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

React Security Stinger

Designed and built by Legion Code Inc.

Where this skill's files are

Every path below (guides/, references/, scripts/) is relative to the folder that contains this SKILL.md. In Claude Code that folder is ${CLAUDE_SKILL_DIR}. If that text was not replaced with a real path, find the folder yourself (for example with Glob for **/react-security-stinger/SKILL.md) and use it as <skill> in every command.

Purpose

Find, confirm, and report the security weaknesses that are specific to React application code, for the security dimension of an /audit-my-code run (contract 1.0). It covers React 18 and 19 client components, server rendering, and React Server Components with Server Functions where they run outside Next.js (Vite with @vitejs/plugin-rsc, React Router RSC and Framework Mode, Waku, Parcel, RedwoodSDK, hand-rolled react-server-dom-* servers). It produces 02-security/findings-react-security-wasp-drone.jsonl, metrics-react-security-wasp-drone.json, and notes-react-security-wasp-drone.md, with every finding backed by evidence, and changes nothing in the audited repository.

When to use

  • The orchestrator's stack routing says react (or nextjs, for the client half) and dispatches react-security-wasp-drone
  • "Security audit this React app", "check our Vite SPA for XSS", "are we exposed to React2Shell", "is CVE-2025-55182 patched here"
  • "Audit our Server Functions", "are our 'use server' actions safe", "do we leak secrets in the bundle"
  • Reviewing an AI-built React app (Lovable, Bolt, v0, Cursor, Claude Code scaffolds) for the usual generator mistakes

When not to use

  • Next.js server surfaces (Server Actions, route handlers, middleware or proxy, next.config, Next.js version advisories): nextjs-security-stinger
  • Generic OWASP pass, repository-wide and git-history secret scanning, dependency advisories outside React: security-stinger
  • Svelte or SvelteKit: sveltekit-security-stinger. Non-JavaScript backends: polyglot-security-stinger
  • Fixing the issues: this Stinger is research-only and never edits the audited repository; remediation planning is the mario tier's job
  • Architecture review without a security question: react-stinger

Procedure

  1. Read the arming line and the contract (audit-my-code-stinger/references/audit-contract.md). Write only inside <workspace>/02-security/ and only to your per-source files.
  2. Scope and versions: run guides/00-scoping-and-version-detection.md. It runs scripts/react_version_check.py (lockfiles against the advisory table) and scripts/sink_scan.py (candidate lines), maps the stack per path, and decides which guides apply.
  3. XSS and SSR injection: guides/01-xss-and-injection-sinks.md.
  4. RSC and Server Functions (when present outside Next.js): guides/02-rsc-and-server-functions.md.
  5. Secrets and data exposure: guides/03-secrets-and-data-exposure.md.
  6. Auth, routing, client trust: guides/04-auth-routing-client-trust.md.
  7. Supply chain and AI-generated patterns: guides/06-supply-chain-and-ai-patterns.md.
  8. Write findings, metrics, and notes: guides/05-writing-findings.md. Every candidate becomes a finding, a "Not confirmed" note, or a dismissed count; never a finding without evidence.
  9. Return the verdict, finding counts by severity, every coverage cap, and the list of raw files written.

References map

PathLoad when
references/REFERENCE.mdfinding which file holds a check, table, or script option
references/checks-xss-and-ssr.mdguide 01: RX and RS checks with detection, confirmation, severity, code pairs, refs
references/checks-rsc.mdguide 02: RC checks
references/checks-secrets-and-data.mdguide 03: SD checks
references/checks-auth-routing.mdguide 04: AR checks
references/checks-supply-chain-and-ai.mdguide 06, and any AI-built app: SC checks, AI patterns, React 19 behavior table
references/advisory-table.mdexplaining or hand-checking a version finding; updating the script's table
references/detection-patterns.mdripgrep commands per check id
references/finding-rules.mdbefore writing any finding, metrics, or notes
references/research/distilled-react-security.mdverifying a domain claim or settling a dispute
Source research archive (not shipped with the plugin)Source-repository only; the shipped distillation summarizes it, do not require it
scripts/react_version_check.pyguide 00, every run
scripts/sink_scan.pyguide 00, every run; reruns with --checks to lift caps
scripts/test/run_tests.pyafter editing either script or the advisory table

Related drones and stingers

  • react-security-wasp-drone - The paired Drone in this pack; the orchestrator dispatches it with an arming line.
  • nextjs-security-stinger - Next.js server boundaries; runs beside this Stinger on Next.js apps.
  • audit-my-code-stinger - The run contract, tiers, routing, and the security merge script.
  • security-stinger (core, when installed) - Generic OWASP pass, repository secrets, non-React dependency advisories.
  • polyglot-security-stinger and sveltekit-security-stinger (this pack) - Other stacks in a monorepo.
  • react-stinger in web-development-tools (confirm installed) - React architecture questions that come up during the audit.

Critical Directive

  • You must read all files and context contained within your skill.
  • In the event your core knowledge does not provide sufficient guidance you must make every attempt to search the internet, related knowledge base documentation files, and other available resources to supplement your knowledge prior to proceeding with your task.
  • Additional related skills can be found here:

Designed and built by Legion Code Inc. Licensed under AGPL-3.0-or-later.

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the React Security Stinger AI skill do?

Review React 18/19 security, including Next.js clients. Covers XSS, secrets and client trust. Delegate Next.js server surfaces to nextjs-security-stinger. Read-only.

Why use React Security Stinger on TypingMind?

Because you install it once and use it with any model. React Security Stinger is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install React Security Stinger in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/legioncodeinc/vibe-coding-tools/tree/main/plugins/code-audit-tools/skills/react-security-stinger. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use React Security Stinger?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with React Security Stinger?

As many as you like. As long as a model supports skills, you can use React Security Stinger with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the React Security Stinger AI skill free?

Yes. It is published on GitHub by legioncodeinc under the AGPL-3.0-or-later license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇