Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/giuseppe-trisciuoglio/developer-kitnpx agentmods add skills/giuseppe-trisciuoglio/developer-kit/react-patternsWrote 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/giuseppe-trisciuoglio/developer-kit/react-patterns)<a href="https://agentmods.dev/skills/giuseppe-trisciuoglio/developer-kit/react-patterns"><img src="https://agentmods.dev/badge/skills/giuseppe-trisciuoglio/developer-kit/react-patterns/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/giuseppe-trisciuoglio/developer-kit/react-patterns"><img src="https://agentmods.dev/badge/skills/giuseppe-trisciuoglio/developer-kit/react-patterns.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk pass
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.00087 | $0.02269 |
| Opus 5 | $0.00044 | $0.01135 |
| Sonnet 5 | $0.00017 | $0.00454 |
| Haiku 4.5 | $0.00009 | $0.00227 |
Grade A, and why
react-patterns 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 today.
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 — 272 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React 19 Development Patterns
Overview
React 19 patterns for Next.js App Router, Server Actions, optimistic UI, and concurrent features. See Quick Reference for API summary and Examples for copy-paste patterns.
When to Use
- Building React 19 applications with Next.js App Router
- Implementing optimistic UI with
useOptimisticoruseTransition - Creating Server Actions with form validation
- Migrating from class components to hooks
- Optimizing concurrent rendering with React Compiler
- Managing complex state with
useReduceror custom hooks - Wrapping async operations in Suspense boundaries
Quick Reference
| Pattern | Hook / API | Use Case |
|---|---|---|
| Local state | useState |
Simple component state |
| Complex state | useReducer |
Multi-action state machines |
| Side effects | useEffect |
Subscriptions, data fetching |
| Shared state | useContext / createContext |
Cross-component data |
| DOM access | useRef |
Focus, measurements, timers |
| Performance | useMemo / useCallback |
Expensive computations |
| Non-urgent updates | useTransition |
Search/filter on large lists |
| Defer expensive UI | useDeferredValue |
Stale-while-updating |
| Read resources | use() (React 19) |
Promises and context in render |
| Optimistic UI | useOptimistic (React 19) |
Instant feedback on mutations |
| Form status | useFormStatus (React 19) |
Pending state in child components |
| Form state | useActionState (React 19) |
Server action results |
| Auto-memoization | React Compiler | Eliminates manual memo/callback |
Instructions
- Identify Component Type: Determine if Server Component or Client Component is needed
- Select Hooks: Use appropriate hooks for state management and side effects
- Type Props: Define TypeScript interfaces for all component props
- Handle Async: Wrap data-fetching components in Suspense boundaries
- Optimize: Use React Compiler or manual memoization for expensive renders
- Handle Errors: Add ErrorBoundary for graceful error handling
- Validate Server Actions: Define Zod/schema validation, then test:
- Submit invalid inputs → verify rejection
- Submit valid inputs → verify success
What ships with it
7 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.
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.
- today First seen · 272 lines · 87 tokens per session scan A 4ed1d0462d12
react-patterns is a skill published in the GitHub repository giuseppe-trisciuoglio/developer-kit (343 stars, last pushed today), licensed MIT. It adds 87 tokens to every session and 2,269 once invoked, about $0.0004 per session on Opus 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-10.
Other skills, from other repositories
nextjs-on-cloudflare
Build, migrate, and deploy Next.js apps on Cloudflare Workers with vinext. Use when starting a Next.js project on Cloudflare, moving an existing app to Workers, choosing between vinext and OpenNext, or setting up vinext for Workers. For setup, migration, or deployment, install vinext's upstream skills with npx skills…
airflow-plugins
Builds Airflow 3.1+ plugins that embed FastAPI apps, custom UI pages, React components, middleware, macros, and operator links directly into the Airflow UI. Use when building anything custom inside Airflow 3.1+ that involves Python and a browser-facing interface - creating an Airflow plugin, adding a custom UI page or…
loom-react
Modern client-side React development patterns.
aksel-builder
Expert builder for Aksel, the Nav / @navikt design system — React components, design tokens, layout primitives, theming (light/dark), icons, CSS, the Tailwind preset, version migrations, Figma-to-code. Triggers — Aksel, "using/with aksel", Nav/Navikt, "designsystemet", "design system", @navikt/ds- (e.g.…
deploy-to-vercel
Deploy a Next.js application to Vercel. Covers project linking, environment variables, preview deployments, custom domains, and production deployment configuration. Use when deploying a Next.js app for the first time, setting up preview deployments for pull requests, configuring custom domains, or managing environment…
billing-sdk
Guide for building billing UI with BillingSDK - the open-source React component library for pricing tables, subscription management, usage meters, invoice history, and customer portal flows wired to Dodo Payments.