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 Aarvion-AI/stackwise-skills --skill react-expertgit clone --depth 1 https://github.com/Aarvion-AI/stackwise-skillsWrote 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/aarvion-ai/stackwise-skills/react-expert)<a href="https://agentmods.dev/skills/aarvion-ai/stackwise-skills/react-expert"><img src="https://agentmods.dev/badge/skills/aarvion-ai/stackwise-skills/react-expert/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/aarvion-ai/stackwise-skills/react-expert"><img src="https://agentmods.dev/badge/skills/aarvion-ai/stackwise-skills/react-expert.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.00134 | $0.02266 |
| Opus 5.5 | $0.00054 | $0.00906 |
| Sonnet 5.5 | $0.00027 | $0.00453 |
| Haiku 4.5 | $0.00013 | $0.00227 |
Grade A, and why
react-expert 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 1mo 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 — 146 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React Expert
Turns Claude into a senior React 19 + Next.js 15 App Router engineer who defaults to Server Components, keeps client boundaries minimal, and never ships legacy patterns.
When to Use This Skill
- Add or modify routes, layouts, and components in a Next.js 15 App Router project
- Implement mutations with server actions,
useActionState, and progressive-enhancement forms - Decide where the Server/Client Component boundary goes and fix boundary/hydration errors
- Wire client-side data fetching with TanStack Query v5 (including SSR hydration)
- Choose and implement state management (server state vs Zustand vs Context vs URL state)
- Add Suspense boundaries and streaming to slow pages; fix waterfalls
- Write or fix tests for components, hooks, and server actions in an RSC codebase
Core Workflow
- Analyze - Read
package.json(confirm React 19 / Next 15, check forbabel-plugin-react-compiler,@tanstack/react-query,zustand),next.config.ts, and the nearestlayout.tsx/existing components to learn conventions. Identify whether the code you will touch runs on the server, the client, or both - this decides every pattern below. - Design the boundary - Default to Server Components. Push
"use client"to the smallest leaf that needs interactivity; pass Server Component output through aschildren/props rather than importing server code into client files. Fetch data on the server where possible; mutations go through server actions. - Implement - TypeScript only, function components only, current APIs only:
use()for promises/context in render,useActionStatefor action state, ref as a normal prop (noforwardRef), no manualuseMemo/useCallback/memowhen React Compiler is enabled. Load the matching reference file (table below) before writing unfamiliar patterns. - Verify types/lint - run
npx tsc --noEmitandnpx next lint(ornpx eslint .if the project migrated to the ESLint CLI); fix all reported issues and re-run until clean before proceeding. - Test - run the project's test command (
npx vitest runornpx jest); write or update tests for the change followingreferences/testing.md; fix all failures and re-run until clean. - Prove it works - run
npx next build(catches server/client boundary violations, missing Suspense arounduseSearchParams, and dynamic API misuse that dev mode tolerates); fix all reported issues and re-run until clean. For behavior changes, startnpx next devand exercise the route.
What ships with it
5 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.
- 1mo ago First seen · 146 lines · 134 tokens per session scan A ba74665085a3
react-expert is a skill published in the GitHub repository Aarvion-AI/stackwise-skills (5 stars, last pushed 1mo ago), licensed MIT. It adds 134 tokens to every session and 2,266 once invoked, about $0.0005 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-08-31.
Other skills, from other repositories
prism-component
Implement a reusable, accessible, typed component from a design spec. Use when asked to "create a component", "build a widget", "implement this design", or "reusable UI element".
senior-frontend
Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.
artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
nextjs-ssr-patterns
Default command for population on a fresh worktree or after a git pull that includes a lockfile change: npm ci — lockfile-respecting, deterministic install. Run from the project root. This is the form CI workflows and Dockerfiles use. The bare npm install form is acceptable only when the lockfile is known-stale or for…
vite-spa-patterns
Default command for population on a fresh worktree or after a git pull that includes a lockfile change: npm ci — lockfile-respecting, deterministic install. Run from the project root. This is the form CI workflows and Dockerfiles use. The bare npm install form is acceptable only when the lockfile is known-stale or for…
power-design
POWER, Demônio do Sangue, assume design e front-end. Use ao pedir /power-design, design, UI, UX, front-end, landing page, dashboard, componente, layout, responsivo, CSS (vanilla), Tailwind, React/Next, design system, DESIGN.md, tipografia, paleta, animação, acessibilidade, revisar ou redesenhar interface, "nível alto…