Menu
Debug React components and resolve common issues in Next.js 15
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/kwkraus/my-dashboard --skill debug-componentThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Based on SOC occupation classification
Showing SKILL.md
| name | debug-component |
| description | Debug React components and resolve common issues in Next.js 15 |
When debugging components in this Next.js 15 dashboard:
"use client" vs Server Component issues:
"use client"; at the top of the fileHydration errors:
// Use client-only rendering for dynamic content
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
if (!mounted) return null;
CSS variable issues in charts:
globals.cssuseChartColorsconst colors = useChartColors();
// Use colors.chart1, colors.chart2, etc.
TypeScript errors:
interface ComponentProps {
title: string;
value: number;
optional?: string;
}
as const for literal types:changeType: "positive" as const
Import path issues:
tsconfig.json@/components/...@/lib/...@/app/...Theme not applying:
hsl(var(--color-name)):root and .dark selectorsChart not responsive:
<ResponsiveContainer width="100%" height={250}>
<LineChart data={data}>...</LineChart>
</ResponsiveContainer>
Development debugging tools:
// Console logging (remove in production)
console.log("Debug:", { props, state });
// React DevTools
// Install React Developer Tools browser extension
// Type checking
npm run lint
Common linting errors:
useEffect(() => {
doSomething(value);
}, [value]); // Add value to dependencies
Performance issues:
"use client";
import { useState, useEffect } from "react";
export default function DynamicComponent() {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return <div>Loading...</div>;
}
return <div>{new Date().toLocaleString()}</div>;
}
// Define clear interfaces
interface StatCardProps {
title: string;
value: string;
change: string;
changeType: "positive" | "negative"; // Union type
icon: React.ComponentType<{ className?: string }>;
}
export function StatCard({ title, value, change, changeType, icon }: StatCardProps) {
// Component implementation
}
"use client";
import { useEffect } from "react";
function ChartComponent() {
const colors = useChartColors();
// Debug colors
useEffect(() => {
console.log("Chart colors:", colors);
}, [colors]);
return (
<LineChart data={data}>
<Line stroke={colors.chart1} />
</LineChart>
);
}
src/app/layout.tsxsrc/app/globals.csstsconfig.jsonnext.config.tsoptimize-react-componentadd-chartadd-theme-colors