Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add xonovex/platform --skill react-guidegit clone --depth 1 https://github.com/xonovex/platformWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/xonovex/platform/react-guide)<a href="https://agentmods.dev/skills/xonovex/platform/react-guide"><img src="https://agentmods.dev/badge/skills/xonovex/platform/react-guide/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/xonovex/platform/react-guide"><img src="https://agentmods.dev/badge/skills/xonovex/platform/react-guide.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00097 | $0.01333 |
| Opus 5.5 | $0.00039 | $0.00533 |
| Sonnet 5.5 | $0.00019 | $0.00267 |
| Haiku 4.5 | $0.00010 | $0.00133 |
Grade A, and why
react-guide scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 7d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 111 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React Coding Guidelines
Build React interfaces with focused components, explicit state ownership, and predictable effects.
Requirements
- React ≥ 19, Vite ≥ 6, Tailwind ≥ 4, Headless UI.
React 19 Essentials
- Server-first - Components run on server by default; add
'use client'only for interactivity - Form Actions - Use
useActionStateandFormDatainstead of controlled inputs - Native metadata - Use
<title>,<meta>,<link>anywhere, auto-hoisted to<head>
Quick Reference
| Feature | React 18 | React 19+ |
|---|---|---|
| Memoization | Manual (useMemo, useCallback) |
React Compiler (automatic) |
| Forward refs | forwardRef() wrapper |
ref as regular prop |
| Context provider | <Context.Provider value={}> |
<Context value={}> |
| Form state | Custom useState |
useActionState hook |
| Optimistic updates | Manual state | useOptimistic hook |
| Read promises | Not possible | use() hook |
| Conditional context | Not possible | use(Context) after conditionals |
| Form pending | Manual tracking | useFormStatus hook |
Example
// React 19 Form with Actions
"use client";
import {useActionState} from "react";
function ContactForm() {
const [state, formAction, isPending] = useActionState(
async (prev, formData) => {
const result = await submitForm(Object.fromEntries(formData));
if (result.error) return {error: result.error};
return {success: true};
},
null,
);
return (
<form action={formAction}>
<input name="email" type="email" disabled={isPending} />
<button disabled={isPending}>
{isPending ? "Submitting..." : "Submit"}
</button>
{state?.error && <p className="error">{state.error}</p>}
</form>
);
}
// ref as prop (no forwardRef needed)
function Input({ref, ...props}: {ref?: React.Ref<HTMLInputElement>}) {
return <input ref={ref} {...props} />;
}
// Context as provider
const ThemeContext = createContext("light");
function App({children}) {
return <ThemeContext value="dark">{children}</ThemeContext>;
}
What ships with it
17 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- eval-queries.json 4.5 KB
- evals.json 2.5 KB
- moon.yml 166 B
- references/accessibility.md 1.2 KB
- references/activity-effect-event.md 1.4 KB
- references/component-design.md 972 B
- references/hooks.md 1.4 KB
- references/migration-anti-patterns.md 1.4 KB
- references/migration-deprecations.md 1.3 KB
- references/migration-typescript.md 2.7 KB
- references/new-hooks.md 2.8 KB
- references/performance-optimization.md 1.1 KB
- references/react-compiler.md 458 B
- references/server-components.md 2.7 KB
- references/state-management.md 1.6 KB
- references/suspense-streaming.md 1.3 KB
- SOURCES.md 659 B
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 7d ago Changed · +2 lines 520c42c173d3
- 1mo ago First seen · 109 lines · 97 tokens per session scan A 9915348c9334
react-guide is a skill published in the GitHub repository xonovex/platform (6 stars, last pushed 5d ago), licensed MIT. It adds 97 tokens to every session and 1,333 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-08.
Other skills, from other repositories
harbor-daytona
Use Harbor's Daytona sandbox platform for computer use — creating sandboxes, taking screenshots, sending mouse/keyboard input, and building agent loops. Use when the user wants to interact with a GUI, automate a desktop, do computer use, control a browser visually, or run Claude computer use against a Daytona sandbox.
react
Use when building or reviewing a client-side React SPA bundled by Vite (React 19.2): components, where state lives, hooks, server data fetching, client routing, re-render and effect bugs. NOT App Router / server components / SSR (that is nextjs); NOT native screens (that is react-native).
ask-sonner
Sonner, the React toast library: mounting Toaster once, toast() calls, promise and loading toasts, updating, dismissing, styling, theming, dark mode, positioning. Use when toasts do not appear, appear twice, sit behind a modal, ignore Tailwind classes, or do nothing from a server action.
igniteui-wc-choose-components
Identify and select the right Ignite UI Web Components for your app UI, then navigate to official docs, usage examples, and API references.
create-custom-widget
Build a Mendix pluggable widget from scratch with React and TypeScript and package it as an .mpk. Use when no marketplace or built-in widget covers what is needed and a custom React component has to be written.
motion-lexicon
Design, build, compose, implement, review, and contribute polished product interfaces with Motion Lexicon components and motion primitives. Use this skill when a user asks for a complete React page, landing page, dashboard, settings screen, or product surface in the Motion Lexicon visual language; asks what motion…