Run any Skill in Manus with one click

$pwd:

vercel-nextjs-frontend

Name: Vercel Nextjs Frontend
Author: hoangnb24

// 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.

Run Skill in Manus

$ git log --oneline --stat

stars:5

forks:5

updated:April 16, 2026 at 08:07

SKILL.md

readonly

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

related-skills.json

same repository

agent-creator.md

from "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-165

qa-browser-verify.md

from "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-165

vercel-react-best-practices.md

from "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-165

vercel-shadcn-ui.md

from "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-165

stack-scout.md

from "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-165

postgres-seed-lab.md

from "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-165

package.json

"author": "hoangnb24"

"repository": "hoangnb24/ai20k-demo"

View GitHub Repository View Creator Repositories

$ install --global

$ download --local

Run Skill in Manus

$ useful --forSOC

Web DevelopersComputer and Mathematical Occupations15-1254L4

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

vercel-nextjs-frontend

Vercel Next.js Frontend

Default stance

Workflow

Focus areas

Avoid

More from this repository

More from this repository

Vercel Next.js Frontend

Default stance

Workflow

Focus areas

Avoid