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 OrcaQubits/agentic-commerce-skills-plugins --skill nextjs-reactgit clone --depth 1 https://github.com/OrcaQubits/agentic-commerce-skills-pluginsWrote 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/orcaqubits/agentic-commerce-skills-plugins/nextjs-react)<a href="https://agentmods.dev/skills/orcaqubits/agentic-commerce-skills-plugins/nextjs-react"><img src="https://agentmods.dev/badge/skills/orcaqubits/agentic-commerce-skills-plugins/nextjs-react/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/orcaqubits/agentic-commerce-skills-plugins/nextjs-react"><img src="https://agentmods.dev/badge/skills/orcaqubits/agentic-commerce-skills-plugins/nextjs-react.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.00051 | $0.02128 |
| Opus 5 | $0.00026 | $0.01064 |
| Sonnet 5 | $0.00010 | $0.00426 |
| Haiku 4.5 | $0.00005 | $0.00213 |
Grade A, and why
nextjs-react 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 2d 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 — 201 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Next.js & React for Saleor
Before writing code
Fetch live docs:
- Web-search
site:nextjs.org docs appfor current Next.js App Router documentation - Web-search
site:docs.saleor.io storefrontfor Saleor storefront development guide - Web-search
site:github.com saleor storefrontfor the official Saleor storefront template source - Web-search
site:github.com saleor macaw-uifor MacawUI component library reference - Web-search
saleor app template Next.js saleor-app-sdkfor App development patterns - Fetch
https://docs.saleor.io/developer/app-store/overviewfor App architecture
Next.js App Router Conventions
File Conventions
| File | Purpose | Rendering |
|---|---|---|
layout.tsx |
Shared layout wrapping child routes | Server component (default) |
page.tsx |
Unique UI for a route segment | Server component (default) |
loading.tsx |
Loading UI (React Suspense) | Server component |
error.tsx |
Error boundary for route segment | Client component (required) |
not-found.tsx |
404 UI for route segment | Server component |
template.tsx |
Re-rendered layout (no state persistence) | Server component |
route.ts |
API route handler | Server-only |
Routing Patterns for Saleor Storefronts
| Route | Segment | Purpose |
|---|---|---|
/[channel] |
Dynamic channel | Multi-channel routing |
/[channel]/products |
Product listing | Category/collection pages |
/[channel]/products/[slug] |
Product detail | Single product page |
/[channel]/cart |
Cart | Shopping cart |
/[channel]/checkout |
Checkout | Checkout flow |
/[channel]/account |
Account | Customer dashboard |
/[channel]/search |
Search | Product search results |
- Use dynamic segments
[channel]for multi-channel support - Use route groups
(storefront)and(dashboard)to organize layouts
Server vs Client Components
Decision Matrix
| Criterion | Server Component | Client Component |
|---|---|---|
| Data fetching | Fetch directly (no waterfall) | Use useQuery hooks |
| SEO critical | Yes (HTML in response) | No (client-rendered) |
| Interactivity | None (static output) | Click, input, state |
| Hooks | Cannot use hooks | useState, useEffect, etc. |
| Bundle size | Zero JS sent to client | Included in JS bundle |
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.
- 2d ago First seen · 201 lines · 51 tokens per session scan A 4635f1402277
nextjs-react is a skill published in the GitHub repository OrcaQubits/agentic-commerce-skills-plugins (39 stars, last pushed 2d ago), licensed MIT. It adds 51 tokens to every session and 2,128 once invoked, about $0.0003 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-15.
Other skills, from other repositories
archestra-dev-frontend
Use when modifying Archestra frontend Next.js/React code, UI components, forms, TanStack Query hooks, generated API client usage, frontend copy, or documentation links.
dflow-phantom-connect
Build Solana wallet-connected apps with Phantom Connect SDKs and DFlow spot trading. Use when user asks to connect a Phantom wallet, integrate Phantom in React, React Native, or vanilla JS, sign messages or transactions, build token-gated pages, mint NFTs, accept crypto payments, or swap/stream tokens with DFlow.…
near-dapp
Build NEAR Protocol dApps. Use for: (1) creating new NEAR dApps with create-near-app (Vite+React, Next.js), (2) adding NEAR wallet connection to existing apps with @hot-labs/near-connect and near-connect-hooks, (3) building frontend UI for NEAR smart contracts, (4) integrating wallet sign-in/sign-out, contract calls…
weaverse-hydrogen
Build Shopify Hydrogen storefronts with Weaverse — components, schemas, loaders, theming, data fetching, React Router v7, deployment, and advanced features.
shopify-hydrogen
Core Shopify Hydrogen APIs — createHydrogenContext, cart handler, CartForm, caching strategies, pagination, SEO, variant selection, analytics, and CSP.
vtex-io-react-apps
Apply when building React components under react/ or configuring store blocks in store/ for VTEX IO apps. Covers interfaces.json, contentSchemas.json for Site Editor, VTEX Styleguide for admin apps, and css-handles for storefront styling. Use for creating custom storefront components, admin panels, pixel apps, or any…