一键在 Manus 中运行任何 Skill

vercel-nextjs-frontend

星标4

分支5

更新时间2026年4月16日 08:07

Repo-local bridge skill for Next.js frontend work. Use when a dedicated agent is handling App Router UI changes, layouts, metadata, route-aware rendering, or Server/Client Component boundaries.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

hoangnb24

hoangnb24/ai20k-demo

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Vercel Next.js Frontend

Use this skill as the repo-local bridge for the session's vercel:nextjs guidance.

Default stance

Treat App Router patterns as the default unless the codebase clearly uses Pages Router in the touched area.
Preserve Server Component and Client Component boundaries intentionally.
Prefer route-aware fixes over local hacks inside leaf components.
Reach for official Next.js guidance or the session's vercel:nextjs skill when framework behavior might be version-sensitive.

Workflow

Inspect the target route, layout, and nearby shared components before editing.
Decide whether the work belongs in a Server Component, Client Component, Server Action, or route handler.
Make the smallest change that fits the repo's routing and rendering patterns.
Keep metadata, loading, error, and empty states consistent with the surrounding app structure.
Verify with the smallest relevant local command and a browser check when UI behavior changes.

Focus areas

App Router routing and nested layouts
loading, error, and not-found states
metadata and route-level configuration
data fetching and cache-aware UI rendering
Server Action and route handler boundaries

Avoid

Mixing Pages Router and App Router patterns in the same change without a clear reason
Adding use client broadly when a narrower client boundary is enough
Hiding routing or data-flow issues inside presentational components

同仓库更多 Skills

同仓库

agent-creator

hoangnb24/ai20k-demo

Create new persistent Codex agents for this repo when asked to add a specialist agent, define a reusable subagent role, scaffold `.codex/agents/*.toml`, or wire the agent to local skills and MCP servers.

2026-04-164

qa-browser-verify

hoangnb24/ai20k-demo

Browser-first QA skill for local web apps. Use when exploring an application, smoke-testing routes, checking whether a page loads, validating a user flow, reproducing a UI bug, or confirming a fix. Prefer the local `agent-browser` CLI for screenshots, snapshots, console checks, navigation, and basic interactions.

2026-04-164

vercel-react-best-practices

hoangnb24/ai20k-demo

Repo-local bridge skill for React TSX reviews. Use when a dedicated agent is checking component quality, hooks usage, accessibility, and performance risks after frontend changes.

2026-04-164

vercel-shadcn-ui

hoangnb24/ai20k-demo

Repo-local bridge skill for shadcn/ui work. Use when a dedicated agent is composing UI, extending the design system, or adding shadcn components in a Next.js frontend.

2026-04-164

stack-scout

hoangnb24/ai20k-demo

Research the current best implementation pattern before making code changes. Use when Codex needs up-to-date guidance for a feature, integration, bugfix, or upgrade, especially around Next.js, AI SDK, Gemini, Drizzle, Bun, Docker, or other stack pieces that may have changed recently.

2026-04-164

postgres-seed-lab

hoangnb24/ai20k-demo

Turn plain-language requests into transient query or mutation scripts for the local seeded Postgres database in this repo. Use when Codex needs to inspect, clean up, backfill, bulk update, or analyze demo_orders or other local seed data, preferably through DOCKER MCP code-mode and otherwise through js_repl without requiring a checked-in script.

2026-04-164

name	vercel-nextjs-frontend
description	Repo-local bridge skill for Next.js frontend work. Use when a dedicated agent is handling App Router UI changes, layouts, metadata, route-aware rendering, or Server/Client Component boundaries.

Vercel Next.js Frontend

Use this skill as the repo-local bridge for the session's vercel:nextjs guidance.

Default stance

Treat App Router patterns as the default unless the codebase clearly uses Pages Router in the touched area.
Preserve Server Component and Client Component boundaries intentionally.
Prefer route-aware fixes over local hacks inside leaf components.
Reach for official Next.js guidance or the session's vercel:nextjs skill when framework behavior might be version-sensitive.

Workflow

Inspect the target route, layout, and nearby shared components before editing.
Decide whether the work belongs in a Server Component, Client Component, Server Action, or route handler.
Make the smallest change that fits the repo's routing and rendering patterns.
Keep metadata, loading, error, and empty states consistent with the surrounding app structure.
Verify with the smallest relevant local command and a browser check when UI behavior changes.

Focus areas

App Router routing and nested layouts
loading, error, and not-found states
metadata and route-level configuration
data fetching and cache-aware UI rendering
Server Action and route handler boundaries

Avoid

Mixing Pages Router and App Router patterns in the same change without a clear reason
Adding use client broadly when a narrower client boundary is enough
Hiding routing or data-flow issues inside presentational components