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 tmolavi/mcp-agent-skills-hub --skill react-nextjs-developmentgit clone --depth 1 https://github.com/tmolavi/mcp-agent-skills-hubWrote 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/tmolavi/mcp-agent-skills-hub/react-nextjs-development)<a href="https://agentmods.dev/skills/tmolavi/mcp-agent-skills-hub/react-nextjs-development"><img src="https://agentmods.dev/badge/skills/tmolavi/mcp-agent-skills-hub/react-nextjs-development.svg" alt="Measured on agentmods" 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.00033 | $0.01427 |
| Opus 5 | $0.00016 | $0.00714 |
| Sonnet 5 | $0.00007 | $0.00285 |
| Haiku 4.5 | $0.00003 | $0.00143 |
Grade A, and why
react-nextjs-development 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 4d 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 — 234 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React/Next.js Development Workflow
Overview
Specialized workflow for building React and Next.js 14+ applications with modern patterns including App Router, Server Components, TypeScript, and Tailwind CSS.
When to Use This Workflow
Use this workflow when:
- Building new React applications
- Creating Next.js 14+ projects with App Router
- Implementing Server Components
- Setting up TypeScript with React
- Styling with Tailwind CSS
- Building full-stack Next.js applications
Workflow Phases
Phase 1: Project Setup
Skills to Invoke
app-builder- Application scaffoldingsenior-fullstack- Full-stack guidancenextjs-app-router-patterns- Next.js 14+ patternstypescript-pro- TypeScript setup
Actions
- Choose project type (React SPA, Next.js app)
- Select build tool (Vite, Next.js, Create React App)
- Scaffold project structure
- Configure TypeScript
- Set up ESLint and Prettier
Copy-Paste Prompts
Use @app-builder to scaffold a new Next.js 14 project with App Router
Use @nextjs-app-router-patterns to set up Server Components
Phase 2: Component Architecture
Skills to Invoke
frontend-developer- Component developmentreact-patterns- React patternsreact-state-management- State managementreact-ui-patterns- UI patterns
Actions
- Design component hierarchy
- Create base components
- Implement layout components
- Set up state management
- Create custom hooks
Copy-Paste Prompts
Use @frontend-developer to create reusable React components
Use @react-patterns to implement proper component composition
Use @react-state-management to set up Zustand store
Phase 3: Styling and Design
Skills to Invoke
frontend-design- UI designtailwind-patterns- Tailwind CSStailwind-design-system- Design systemcore-components- Component library
Actions
- Set up Tailwind CSS
- Configure design tokens
- Create utility classes
- Build component styles
- Implement responsive design
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.
- 4d ago First seen · 234 lines · 33 tokens per session scan A 83066977a7a4
react-nextjs-development is a skill published in the GitHub repository tmolavi/mcp-agent-skills-hub (8 stars, last pushed 12d ago), licensed MIT. It adds 33 tokens to every session and 1,427 once invoked, about $0.0002 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-03.
Other skills, from other repositories
nextjs-app-router-patterns
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
web-data-fetching-graphql-apollo
Apollo Client GraphQL patterns — normalized cache and type policies, queries, mutations with optimistic updates, pagination, fragments, subscriptions, and Suspense hooks.
nextjs-fullstack
Use for Next.js App Router, React Server Components, server actions, API routes, auth, database integration, caching, deployment, or full-stack product features.
fullstack-guide
A development guide for building full-stack applications with React and TypeScript on the frontend and Node.js and Supabase on the backend. It covers component structure, data loading, routing, styling, performance, and TypeScript practices.
fullstack-developer
Modern web development expertise covering React, Node.js, databases, and full-stack architecture. Use when: building web applications, developing APIs, creating frontends, setting up databases, deploying web apps, or when user mentions React, Next.js, Express, REST API, GraphQL, MongoDB, PostgreSQL, or full-stack…
fullstack-coder
Full-stack implementation agent that writes complete, production-ready code following an approved architecture and schema. Triggers on: write the code, implement features, build the app, code the MVP, generate codebase.