██████╗ ███████╗ █████╗  ██████╗████████╗
██╔══██╗██╔════╝██╔══██╗██╔════╝╚══██╔══╝
██████╔╝█████╗  ███████║██║        ██║
██╔══██╗██╔══╝  ██╔══██║██║        ██║
██║  ██║███████╗██║  ██║╚██████╗   ██║
╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝ ╚═════╝   ╚═╝
 ██████╗ ██╗   ██╗ █████╗ ██████╗ ██████╗ ██╗ █████╗ ███╗   ██╗
██╔════╝ ██║   ██║██╔══██╗██╔══██╗██╔══██╗██║██╔══██╗████╗  ██║
██║  ███╗██║   ██║███████║██████╔╝██║  ██║██║███████║██╔██╗ ██║
██║   ██║██║   ██║██╔══██║██╔══██╗██║  ██║██║██╔══██║██║╚██╗██║
╚██████╔╝╚██████╔╝██║  ██║██║  ██║██████╔╝██║██║  ██║██║ ╚████║
 ╚═════╝  ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═════╝ ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝

⚡ React Guardian

Table of contents:

• Skills
• How they fit together
• Install
• Usage
• Optional agent profiles
• Validate
• Layout
• Status and limits

Focused, evidence-based skills for React web and native applications.

Important

Principle: Preserve user-visible behaviour, accessibility, and the project's conventions while making the smallest evidence-based change that solves the request.

imageValidate skills imageLicense: MIT imageAgent skills imageFormat imageTooling

React Guardian routes React and React Native work into focused skills for migrations, web and native interfaces, API integration, and tests. The guidance follows the open Agent Skills format and links to official React and React Native documentation. Skills work on Claude Code, Codex, Cursor, Copilot, OpenCode, Windsurf, and other hosts that support SKILL.md.

🧩 Skills

🗺️ How they fit together

flowchart TD
    R["⚡ react-guardian<br/>shared rules and routing"]
    R --> A["react-migration<br/>version and API changes"]
    R --> B["react-interface-quality<br/>components and responsive UI"]
    R --> C["react-api-integration<br/>HTTP API clients"]
    R --> D["react-testing<br/>behavioural coverage"]
    R --> E["react-native-development<br/>native app workflows"]

Start with the router when a task spans areas or the right specialist is unclear, then use the relevant specialist skill.

📦 Install

Tip

Install react-guardian together with every sibling skill it links to. This router refers to those skills by relative path.

You can install a single specialist skill without the router if you only need that workflow.

Claude Code plugin (installs all skills and both agent profiles together):

/plugin marketplace add KinwiseNZ-DevOps/react-guardian
/plugin install react-guardian@react-guardian-marketplace

ChatGPT desktop plugin (local, skills and bundled hooks):

This repo has a portable plugin.json manifest and a repo marketplace at .agents/plugins/marketplace.json. Open this repo as a trusted project and restart ChatGPT desktop, then install React Guardian from the Plugins Directory. Review and trust bundled hook scripts before they run.

Or copy or symlink the chosen skill folders into your agent's skills directory:

To install supplied Claude Code, GitHub Copilot, or Codex profiles into a project, run python scripts/install_agents.py --host claude-code --target PATH. The installer adds profiles to their native folders and leaves unrelated files alone. Other hosts receive skills only.

Always on

In Claude Code, React Guardian loads a short ruleset into every session as soon as the plugin is installed (smallest change, preserved behaviour and accessibility, no needless upgrades). It tells you its state at the start of each session and costs roughly 450 tokens.

• Say "stop react mode" to pause it for the current session, and "start react mode" to resume.
• Ask Claude to set the saved mode to on, off or auto. It writes that word into ~/.claude/.react-guardian.mode. You can also edit that file yourself, and deleting it returns to the default (auto).
• It needs Node on the machine, because the start-up hook runs a small Node script. Without Node the hook quietly does nothing.
• Other agents have no start-up hook here. Paste skills/react-guardian/references/always-on-rules.md into that agent's instruction file instead.

Safety checks

The same hooks run a few checks while you work. Each one only asks, warns or adds a reminder; none changes your files on its own.

Switch any check with ~/.claude/.react-guardian.features.json, for example {"packageGuard": false, "sessionLog": true}, or ask Claude to write it. The saved mode (on, off or auto) applies to every check. If several of these plugins are installed, each risky action is checked once, not once per plugin.

Privacy: packageGuard and licenseGuard send package names, and linkGuard sends the links it checks, to the public registry or site. Nothing else leaves your machine. Turn those checks off if that is a concern.

🚀 Usage

Describe the task in plain language. The router selects a specialist when available.

Optional agent profiles

Each supported host receives one main react-guardian-workflow profile and one optional react-guardian-debugger helper. Planning, implementation, and test review are modes in the main profile. Names are scoped to the owning skill to avoid clashes. Other hosts receive the skills only.

✅ Validate

python scripts/skills_tool.py check

Checks frontmatter, name and folder matching, description triggers, body length, every relative link including this README and AGENTS.md, agent profile naming and count, behavioural cases, catalogue freshness, project-specific terms, and banned dash characters in file names and contents. After the starter skill is gone it also rejects leftover placeholders and setup-only paths that are tracked by Git or not ignored. Setup materials can stay on the maintainer's computer, ignored and outside the Git index.

🗂️ Layout

Repository layout

skills/<name>/SKILL.md        one folder per skill
evals/cases.jsonl             behavioural cases for every skill
evals/triggers.jsonl                  triggering tests per skill: obvious, paraphrase, unrelated
resources/agents/             optional host profiles copied by installer
scripts/install_agents.py     install supplied agent profiles
scripts/skills_tool.py        validate and refresh the catalogue
.github/workflows/            CI validation workflow
AGENTS.md                     repository rules and file map
SETUP.md                      temporary setup checklist
reference-content/            temporary, ignored setup sources

📌 Status and limits

Note

• Licensed under MIT (see LICENSE).

⚡ Built on the Agent Skills open format · grounded in official React documentation