██████╗ ███████╗ █████╗ ██████╗████████╗
██╔══██╗██╔════╝██╔══██╗██╔════╝╚══██╔══╝
██████╔╝█████╗ ███████║██║ ██║
██╔══██╗██╔══╝ ██╔══██║██║ ██║
██║ ██║███████╗██║ ██║╚██████╗ ██║
╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝ ╚═════╝ ╚═╝
██████╗ ██╗ ██╗ █████╗ ██████╗ ██████╗ ██╗ █████╗ ███╗ ██╗
██╔════╝ ██║ ██║██╔══██╗██╔══██╗██╔══██╗██║██╔══██╗████╗ ██║
██║ ███╗██║ ██║███████║██████╔╝██║ ██║██║███████║██╔██╗ ██║
██║ ██║██║ ██║██╔══██║██╔══██╗██║ ██║██║██╔══██║██║╚██╗██║
╚██████╔╝╚██████╔╝██║ ██║██║ ██║██████╔╝██║██║ ██║██║ ╚████║
╚═════╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═════╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝
Table of contents:
- Skills
- How they fit together
- Install
- Usage
- Optional agent profiles
- Validate
- Layout
- Works with other repos
- 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.
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.
| Skill | Purpose |
|---|---|
react-api-integration |
Designs or changes React clients that talk to HTTP APIs, including request boundaries, authentication handling, errors and async UI states. |
react-guardian |
Routes work to the focused react skills for migrations, web and native interfaces, API integration and testing. |
react-interface-quality |
Improves React DOM component structure, responsive behaviour, accessibility and design-system consistency. |
react-migration |
Plans and performs React for web version upgrades and legacy API migrations. |
react-native-development |
Builds and reviews React Native applications using native components, platform-aware code and React Native tooling. |
react-performance |
Finds the real cause with measurements and applies the smallest fix. |
react-state-and-effects |
Governs state placement, Effects, keys and Hook structure. |
react-testing |
Writes or reviews tests for React components, hooks and user workflows. |
react-web-security |
Do not use for HTTP client design (react-api-integration), server code, React Native secure storage or general accessibility. |
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.
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:
| Agent | Where skills live |
|---|---|
| Claude Code | ~/.claude/skills/ or a project's .claude/skills/ |
| Codex, Cursor, Copilot, OpenCode, Windsurf | The agent's SKILL.md discovery path |
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.
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.
| Mode | What it does |
|---|---|
on |
The rules apply in every session |
auto (default) |
The rules apply only in projects that look relevant: a package.json that uses React is found |
off |
The rules do not load |
- 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.mdinto that agent's instruction file instead.
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.
| Check | What it does | On by default |
|---|---|---|
dangerGuard |
Asks before risky commands: force pushes, git reset --hard, rm -r, dropping data, docker compose down -v, publishing a package |
Yes |
secretsGuard |
Asks before writing keys, tokens or .env files |
Yes |
packageGuard |
Asks if a package about to be installed does not exist on PyPI, npm or pub.dev, because the name may be invented | Yes |
licenseGuard |
Warns after installing an npm or PyPI package with a GPL-family licence | Yes |
editSecurity |
Reminds Claude about risky code it just wrote: eval, SQL built from strings, unescaped HTML, tokens in SharedPreferences |
Yes |
promptGuard |
Warns when pasted text looks like it is trying to steer the agent | Yes |
verifyReminder |
Tells you at the end of a turn if code changed but no tests, lint or analysis ran | Yes |
linkGuard |
Warns about links that return "not found" in Markdown, HTML and JSX files written | Yes |
styleGuard |
Warns when a reply is over 200 words or uses an em or en dash (built for AI Kiwiniser's style) | No |
sessionLog |
Writes tool names and file names, never content, to ~/.claude/logs/react-guardian/ |
No |
autoCommit |
Saves tracked changes as a local commit at the end of a turn. It never pushes | No |
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.
Describe the task in plain language. The router selects a specialist when available.
| Just say… | What you get | Skill used |
|---|---|---|
| “Plan our React 18 to 19 upgrade” | A staged, project-specific migration plan | react-migration |
| “Fix this iOS and Android React Native screen” | A platform-aware native app change | react-native-development |
| “Make this form work well on mobile and by keyboard” | A focused, accessible responsive UI change | react-interface-quality |
| “Handle expired sessions from our API cleanly” | Consistent request and error handling | react-api-integration |
| “Add a regression test for this async flow” | A focused behaviour test using project conventions | react-testing |
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.
python scripts/skills_tool.py checkChecks 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.
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
React work depends on the brand. Take the words and brand rules from marketing; do not invent them. Decision order: marketing first (who it is for, how it is marketed, the words and claims), then look and feel, then the technical work. Decide the human side before the technical side. See the Works with other repos section of the router skill for when to hand off. The dependency map is skills-repos-dependency-map.md beside the repos.
Note
- Licensed under MIT (see LICENSE).
⚡ Built on the Agent Skills open format · grounded in official React documentation