一键在 Manus 中运行任何 Skill

nexus-debug-frontend

星标6

分支0

更新时间2026年3月1日 21:18

Troubleshooting steps and debugging protocols for Next.js (App Router), React state, and React Flow visualization in Project Nexus. Use this when fixing UI bugs, routing errors, or hydration mismatches.

安装

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

在 Manus 中运行

来源

MAX-786

MAX-786/project-nexus

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

下载

在 Manus 中运行

Next.js & React Debugging Protocol

1. Server vs. Client Boundary Errors

Symptom: "Event handlers cannot be passed to Client Component props" or "useState is not defined".
Action: Ensure any component using hooks (useState, useEffect), onClick handlers, or browser APIs has "use client" at the very top of the file.
Action: If passing data from a Server Component to a Client Component, ensure all props are serializable (no functions, dates must be strings).

2. Next.js Caching & Stale Data

Symptom: New data is saved to Supabase, but the /dashboard still shows old data.
Action: Next.js aggressively caches route segments. Use revalidatePath('/dashboard') after a mutation, or explicitly opt out of caching in the page using export const dynamic = 'force-dynamic';.

3. React Flow Rendering Issues

Symptom: Nodes overlap completely, or the canvas is blank/invisible.
Action: Ensure the parent container of the <ReactFlow /> component has strict dimensions (e.g., h-full w-full with a fixed height wrapper).
Action: If using auto-layout (dagre), ensure the layout function runs after the nodes are fetched and mapped.

4. Hydration Mismatches

Symptom: "Text content does not match server-rendered HTML."
Action: Check for browser-only APIs (window, localStorage) being executed during the initial server render. Wrap them in a useEffect or check typeof window !== 'undefined'.

同仓库更多 Skills

同仓库

nexus-docs-manager

MAX-786/project-nexus

Rules for creating, updating, and managing project documentation. Use this skill when analyzing Git commits, updating the README, writing API specs, or acting as the Technical Writer for Project Nexus.

2026-03-096

nexus-github-cli

MAX-786/project-nexus

Act as an autonomous project manager and lead developer. Use the GitHub CLI (`gh`) to orchestrate the entire development lifecycle: tracking tasks on Project Boards, organizing Sprints via Milestones, documenting progress via Issue Comments, and executing code changes via Pull Requests.

2026-03-046

nexus-code-quality

MAX-786/project-nexus

Rules for ESLint, Prettier, and TypeScript strictness. Use this skill when writing new files, refactoring code, or debugging build failures caused by type errors.

2026-03-046

nexus-deployments

MAX-786/project-nexus

Deployment protocols for Vercel (Next.js Web App), Chrome Web Store packaging (Plasmo Extension), and Supabase production migrations. Use this when setting up CI/CD, preparing a release, or configuring deployment environment variables.

2026-03-046

nexus-git-workflow

MAX-786/project-nexus

Guidelines for Git branching, commit messages (Conventional Commits), and Pull Request structures. Use this skill when asked to commit code, create a branch, or write a PR description.

2026-03-046

nexus-marketing-growth

MAX-786/project-nexus

Guidelines for generating marketing copy, Reddit posts, Hacker News launches, and growth strategies for Project Nexus. Use this skill when asked to write public-facing content, launch announcements, or analyze product-market fit.

2026-03-026

name	nexus-debug-frontend
description	Troubleshooting steps and debugging protocols for Next.js (App Router), React state, and React Flow visualization in Project Nexus. Use this when fixing UI bugs, routing errors, or hydration mismatches.

Next.js & React Debugging Protocol

1. Server vs. Client Boundary Errors

Symptom: "Event handlers cannot be passed to Client Component props" or "useState is not defined".
Action: Ensure any component using hooks (useState, useEffect), onClick handlers, or browser APIs has "use client" at the very top of the file.
Action: If passing data from a Server Component to a Client Component, ensure all props are serializable (no functions, dates must be strings).

2. Next.js Caching & Stale Data

Symptom: New data is saved to Supabase, but the /dashboard still shows old data.
Action: Next.js aggressively caches route segments. Use revalidatePath('/dashboard') after a mutation, or explicitly opt out of caching in the page using export const dynamic = 'force-dynamic';.

3. React Flow Rendering Issues

Symptom: Nodes overlap completely, or the canvas is blank/invisible.
Action: Ensure the parent container of the <ReactFlow /> component has strict dimensions (e.g., h-full w-full with a fixed height wrapper).
Action: If using auto-layout (dagre), ensure the layout function runs after the nodes are fetched and mapped.

4. Hydration Mismatches

Symptom: "Text content does not match server-rendered HTML."
Action: Check for browser-only APIs (window, localStorage) being executed during the initial server render. Wrap them in a useEffect or check typeof window !== 'undefined'.