New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Nextjs Expert

by RightNow-AI in RightNow-AI/openfang

Next.js expert for App Router, SSR/SSG, API routes, middleware, and deployment

Apache-2.0Auto-check passedFrontend & Design

Install Nextjs Expert

skills CLI
$ npx skills add RightNow-AI/openfang --skill nextjs-expert -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install RightNow-AI/openfang nextjs-expert --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/RightNow-AI/openfang.git skills-src && mkdir -p .claude/skills && cp -r skills-src/crates/openfang-skills/bundled/nextjs-expert .claude/skills/nextjs-expert && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
nextjs-expert
GitHub stars
18k
Token cost
~822 tokens
SKILL.md length
433 words
Files
1
Skills in repo
68
Repo updated
First seen
Licence
Apache-2.0

At a glance

Next.js expert for App Router, SSR/SSG, API routes, middleware, and deployment

  • Frontend & Design work in your project
  • SKILL.md covers Key Principles, Techniques, Common Patterns and Pitfalls to Avoid
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Nextjs Expert is an agent skill from RightNow-AI/openfang. Next.js expert for App Router, SSR/SSG, API routes, middleware, and deployment

Its SKILL.md is about 820 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. It works with Next.js. The repository describes itself as: Open-source Agent Operating System. The licence is Apache-2.0.

When your agent uses it

  • Frontend & Design work in your project

Example prompts

  • “/nextjs-expert”

What it can do on your machine

Read from SKILL.md and the folder at commit acf2587. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Nextjs Expert loads about 822 tokens when it runs. Until then it costs about 23 tokens; SKILL.md has 433 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~23
When it runs · the whole SKILL.md, loaded when a task matches
~822

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from RightNow-AI/openfang at commit acf2587, republished under its Apache-2.0 licence (© RightNow-AI). 433 words, ~822 tokens.

Download SKILL.mdSave it as .claude/skills/nextjs-expert/SKILL.md (or your agent's skills folder).
name
nextjs-expert
description
Next.js expert for App Router, SSR/SSG, API routes, middleware, and deployment

Next.js Expert

A seasoned Next.js architect with deep expertise in the App Router paradigm, server-side rendering strategies, and production deployment patterns. This skill provides guidance on building performant, SEO-friendly web applications using Next.js 14+ conventions, including Server Components, Streaming, and the full spectrum of data fetching and caching mechanisms.

Key Principles

  • Prefer Server Components by default; only add "use client" when the component requires browser APIs, event handlers, or React state
  • Leverage the app/ directory structure where each folder segment maps to a URL route, using layout.tsx for shared UI and page.tsx for unique content
  • Design data fetching at the server layer using async Server Components and fetch with Next.js caching semantics
  • Use generateStaticParams for static pre-rendering of dynamic routes at build time, falling back to on-demand ISR for long-tail pages
  • Keep client bundles small by pushing logic into Server Components and using dynamic imports for heavy client-only libraries

Techniques

  • Structure routes with app/[segment]/page.tsx, using route groups (parentheses) to organize without affecting URL paths
  • Implement loading.tsx and error.tsx boundaries at each route segment to provide instant loading states and graceful error recovery
  • Use Route Handlers (app/api/.../route.ts) with exported GET, POST, PUT, DELETE functions for API endpoints
  • Configure middleware in middleware.ts at the project root with a matcher config to intercept requests for auth, redirects, or header injection
  • Optimize images with next/image (automatic srcSet, lazy loading, AVIF/WebP) and fonts with next/font (zero layout shift, self-hosted subsets)
  • Enable ISR by returning revalidate values from fetch calls or using revalidatePath/revalidateTag for on-demand cache invalidation
  • Set up next.config.js with redirects, rewrites, headers, and the experimental options appropriate to your deployment target
Show full SKILL.md (166 more words)Show less

Common Patterns

  • Parallel Routes: Use @named slots in layouts to render multiple page-level components simultaneously, enabling dashboards and split views
  • Intercepting Routes: Place (..) convention routes to show modals on navigation while preserving the direct URL as a full page
  • Server Actions: Define async functions with "use server" for form submissions and mutations without building separate API routes
  • Streaming with Suspense: Wrap slow data-fetching components in Suspense boundaries to stream HTML progressively and improve TTFB

Pitfalls to Avoid

  • Do not use useEffect for data fetching in Server Components; fetch directly in the component body or use server-side utilities
  • Do not place "use client" at the layout level unless every child truly requires client interactivity, as this opts out the entire subtree from server rendering
  • Do not confuse the Pages Router (pages/ directory) patterns with App Router conventions; they have different data fetching and routing models
  • Do not skip setting proper cache headers and revalidation times, as stale data and unnecessary re-renders degrade both performance and user experience

© RightNow-AI, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in crates/openfang-skills/bundled/nextjs-expert of RightNow-AI/openfang.

Open the folder on GitHubat commit acf2587

Compare with similar skills

Nextjs Expert next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Nextjs Expert compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Nextjs Expert this skillRightNow-AI/openfang18k—~822Automated safety check: PassApache-2.0
Vercel Servicesvercel/vercel-plugin301—~3kAutomated safety check: PassCustom licence
Deploy Frontendbutterbase-ai/butterbase-skills534—~2.8kAutomated safety check: PassMIT
Microfrontendsvercel/vercel-plugin301—~1.3kAutomated safety check: PassCustom licence
React Best Practices V2diegosouzapw/awesome-omni-skills159—~3.5kAutomated safety check: PassMIT
Cloudflare Workers Frameworkssecondsky/claude-skills227—~1.4kAutomated safety check: PassMIT

Similar skills

  • Vercel Services

    vercel/vercel-plugin

    Official

    Configure and troubleshoot Vercel Services for multiple frontends and backends in one project.

    301 GitHub stars~3k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Deploy Frontend

    butterbase-ai/butterbase-skills

    A skill your agent uses when deploying a frontend (React, Next.js, or static HTML) to a live URL on Butterbase, or when troubleshooting deployment issues like MIME type errors or blank pages

    534 GitHub stars~2.8k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Microfrontends

    vercel/vercel-plugin

    Official

    Guide for building, configuring, and deploying microfrontends on Vercel.

    301 GitHub stars~1.3k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • React Best Practices V2

    diegosouzapw/awesome-omni-skills

    Vercel React Best Practices workflow skill. An agent skill from diegosouzapw/awesome-omni-skills.

    159 GitHub stars~3.5k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

  • Cloudflare Workers Frameworks

    secondsky/claude-skills

    Framework integration for Cloudflare Workers. An agent skill from secondsky/claude-skills.

    227 GitHub stars~1.4k tokensUpdated 11 days ago
    Frontend & DesignAuto-check passed

  • Vercel Optimize Audit

    vercel-labs/agent-skills

    Official

    Runs a metrics-first audit of a deployed Vercel project, gating investigations on real signals to produce ranked, citation-backed cost and performance recommendations.

    32k GitHub starsUsed in 8 repos~4.3k tokens
    DevOps & CloudAuto-check passed

More from RightNow-AI/openfang

All 68 skills in this repo

  • Playwright Browser Automation Patterns

    RightNow-AI/openfang

    Reference of CSS selectors, step-by-step web workflows and error recovery tactics for an agent that browses, fills forms and compares prices on live sites.

    18k GitHub stars~1k tokensUpdated 3 mo ago
    Auto-check passed

  • Intelligence Collection Methodology

    RightNow-AI/openfang

    Reference knowledge for open-source intelligence collection: the collection cycle, source reliability tiers, search query patterns and entity extraction.

    18k GitHub stars~2.1k tokensUpdated 3 mo ago
    Auto-check passed

  • Lead Generation Research Guide

    RightNow-AI/openfang

    Reference knowledge for AI lead generation: building an ideal customer profile, researching prospects on the web, enriching lead records and finding email formats.

    18k GitHub stars~1.8k tokensUpdated 3 mo ago
    Auto-check passed

  • Video Clipping Reference

    RightNow-AI/openfang

    Command reference for cutting clips from online video: yt-dlp downloads, whisper transcription, SRT subtitle files and ffmpeg processing, with Windows, macOS and Linux differences.

    18k GitHub stars~4.1k tokensUpdated 3 mo ago
    Auto-check: warnings

  • Forecasting Expert Knowledge

    RightNow-AI/openfang

    Reference knowledge for AI forecasting: superforecasting principles, a signal taxonomy, confidence calibration rules and reasoning chains for making and tracking predictions.

    18k GitHub stars~2.5k tokensUpdated 3 mo ago
    Auto-check passed

  • Deep Research Methodology

    RightNow-AI/openfang

    Reference knowledge for AI deep research: a five-phase process, strategies by question type, CRAAP source scoring, cross-referencing, synthesis and citation formats.

    18k GitHub stars~2.6k tokensUpdated 3 mo ago
    Auto-check passed

Works with

Categories

Questions about Nextjs Expert

What does Nextjs Expert do?

Next.js expert for App Router, SSR/SSG, API routes, middleware, and deployment. Nextjs Expert is an agent skill from RightNow-AI/openfang.

When should I use Nextjs Expert?

Nextjs Expert fits situations like: frontend & Design work in your project.

How do I install Nextjs Expert in Claude Code?

Run `npx skills add RightNow-AI/openfang --skill nextjs-expert -a claude-code`. Or copy the skill folder (crates/openfang-skills/bundled/nextjs-expert in RightNow-AI/openfang) into .claude/skills/nextjs-expert in your project. Claude Code loads it when a task matches its description.

How do I install Nextjs Expert in Codex?

Run `npx skills add RightNow-AI/openfang --skill nextjs-expert -a codex`. Or copy the skill folder (crates/openfang-skills/bundled/nextjs-expert in RightNow-AI/openfang) into .agents/skills/nextjs-expert in your project. Codex loads it when a task matches its description.

Can I use Nextjs Expert in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add RightNow-AI/openfang --skill nextjs-expert -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/nextjs-expert, .gemini/skills/nextjs-expert, .github/skills/nextjs-expert and .opencode/skills/nextjs-expert in your project.

What does Nextjs Expert need to run?

SKILL.md names no scripts, command-line tools or credentials: Nextjs Expert is instructions for the agent only.

Does Nextjs Expert access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Nextjs Expert safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Nextjs Expert use?

Nextjs Expert is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Nextjs Expert use?

About 822 tokens (SKILL.md is roughly 3.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Nextjs Expert?

Skills that share tags, products or a category with Nextjs Expert: Vercel Services (vercel/vercel-plugin, 301 stars), Deploy Frontend (butterbase-ai/butterbase-skills, 534 stars), Microfrontends (vercel/vercel-plugin, 301 stars) and React Best Practices V2 (diegosouzapw/awesome-omni-skills, 159 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Nextjs Expert?

RightNow-AI (a GitHub organization) maintains it in RightNow-AI/openfang, which has 18,216 GitHub stars. The repository holds 68 skills in this directory. The repository was last updated on July 2, 2026.

Source: RightNow-AI/openfang on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.