원클릭으로 Manus에서 모든 스킬 실행

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 저장소 열기 Creator 저장소 보기

다운로드

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