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 laguagu/claude-code-nextjs-skills --skill ai-appgit clone --depth 1 https://github.com/laguagu/claude-code-nextjs-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/laguagu/claude-code-nextjs-skills/ai-app)<a href="https://agentmods.dev/skills/laguagu/claude-code-nextjs-skills/ai-app"><img src="https://agentmods.dev/badge/skills/laguagu/claude-code-nextjs-skills/ai-app/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/laguagu/claude-code-nextjs-skills/ai-app"><img src="https://agentmods.dev/badge/skills/laguagu/claude-code-nextjs-skills/ai-app.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 2 findings, up to high
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- high Privilege Escalation · line 41 Code accesses credential files (SSH keys, AWS credentials, etc.). This could indicate credential theft attempts.Fix: Remove references to credential paths. Use environment variables or secrets managers. For docs, use placeholder paths (e.g., /path/to/config). Never load .env or token files in production code paths.
- high Privilege Escalation · line 105 Code accesses credential files (SSH keys, AWS credentials, etc.). This could indicate credential theft attempts.Fix: Remove references to credential paths. Use environment variables or secrets managers. For docs, use placeholder paths (e.g., /path/to/config). Never load .env or token files in production code paths.
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.00038 | $0.00597 |
| Opus 5.5 | $0.00015 | $0.00239 |
| Sonnet 5.5 | $0.00008 | $0.00119 |
| Haiku 4.5 | $0.00004 | $0.00060 |
Grade A, and why
ai-app 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 — 49 lines — stays where its author put it; the contents beside it link to each section on GitHub.
AI application setup
Build the requested app around its users, data and operations. Keep the existing stack and SDK major unless migration is part of the task; use Bun for new JavaScript projects.
- Resolve the installed AI SDK major through
ai-sdk; useai-sdk-6orai-sdk-7for implementation. For a new app, default to AI SDK 7:ai@7,@ai-sdk/react@4and each provider package atlatest(provider majors differ; Node.js 22+). Keep v6 only when a required dependency pins it. Build new chat UI from the AI Elements patterns in shadcn/ui (https://ui.shadcn.com/docs/ai-elements); they need no v7 patch. The older elements.ai-sdk.dev library (ai-elements) will be deprecated at the end of November 2026, targets v6, and itscontext.tsxfails a v7 typecheck until patched. Read version-matchedai/docs/and provider docs before using web examples. - Use
nextjs-shadcnfor framework setup andfrontend-designfor visual direction. Compose chat UI from the shadcn/ui patterns (Message, Bubble, Message Scroller, Trace; theshadcnskill). For a chatbot, shadcn-ui/chatbot-template is a starting point after upgrading its Next.js (16.3.6) to 16.4.1+. Useai-elementsonly for components already copied from elements.ai-sdk.dev. Inspect installed source instead of assuming registry props. - Keep provider credentials and authorization on the server. Resolve model IDs from configuration or the selected provider's catalog.
- Implement the smallest complete user flow. Add persistence, approvals, attachments, search, suggestions or dashboards when the app needs them.
- Match the server stream to the client transport. Verify a second turn, relevant tool states, safe failures and mobile behavior, alongside the project's typecheck/build.
Read for the app being built
- Chatbot: conversation and stream contracts.
- Agent dashboard: execution, approval and run state.
- Examples: current official implementations.
- Project structure: boundaries without a fixed tree.
nextjs-chatbot: durable history, feedback, embedding and production checks.
What ships with it
4 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.
- 2d ago Changed · +8 lines · +6 tokens per session 60985f076f12
- 27d ago Changed · -16 lines · -34 tokens per session 372c96359928
- 1mo ago Changed · +2 lines 7c0e5e026598
- 1mo ago Changed · -233 lines 013dbbd820f0
- 1mo ago First seen · 288 lines · 66 tokens per session scan A 681bbda5f1a7
ai-app is a skill published in the GitHub repository laguagu/claude-code-nextjs-skills (70 stars, last pushed yesterday), licensed MIT. It adds 38 tokens to every session and 597 once invoked, about $0.0002 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-30.
Other skills, from other repositories
generate
Run the vg generate CLI: search models, inspect schemas and pricing, run endpoints, upload inputs, track async jobs. The base every media skill here builds on.
model-catalog
Pick a vg generate endpoint for a task, and the default endpoint IDs the media skills use when none is named.
storytelling
Build multi-shot narrative image, video and audio sequences with vg generate: storyboards, shot lists, first-to-last-frame chains, continuity.
model-prompting
Prompt a specific model family well (Kling, GPT Image, Seedance…) once the endpoint is chosen, or when its outputs keep coming back generic.
mcp-builder
DEPRECATED: This skill has been replaced by mcp-app-builder. Check if mcp-app-builder is available in the skills folder. If not, install it: npx skills install mcp-use/mcp-use --skill mcp-app-builder Use mcp-app-builder instead of this skill. Build Model Context Protocol (MCP) servers with mcp-use framework. Use when…
Cursor rules for Next
Cursor rules for Next.js development with React 19, Vercel AI, and Tailwind CSS integration.