skills.rest
armanisadeghi
armanisadeghiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

admin-debug-context

Wire Next.js/React admin routes to a debug context panel with live console error capture.

2|1|Updated Aug 24, 2024
Search Tags:#react#logging#nextjs#admin-debugging#debug-context#copy-context#ui-diagnostics
One-click install
npx skills add https://github.com/armanisadeghi/ai-matrx --skill admin-debug-context
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: admin-debug-context
Source: https://github.com/armanisadeghi/ai-matrx/tree/main/.cursor/skills/admin-debug-context
Command: npx skills add https://github.com/armanisadeghi/ai-matrx --skill admin-debug-context

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Wire any route or feature to the admin debug system so the floating AdminIndicator shows live debug context and enables one-click full-context copy for AI agents. Use when asked to add debug visibility, wire a route to the debug panel, add console error capture, or enable the copy-context workflow for a page.

Core Features & Use Cases

  • Auto-capture and display live route, viewport, console errors, and API activity in an admin debug panel.
  • Wire routes to the admin debug context for instant visibility during AI-assisted debugging and bug reproduction.
  • One-click Copy Full Context to export a complete snapshot for agents.

Quick Start

Use useDebugContext in your component and publish contextual data, then open the AdminIndicator Large panel to copy the full context.

Frequently Asked Questions about admin-debug-context

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I capture React console errors and route context for AI debugging in Next.js?▼

Wire routes to an admin debug context using a useDebugContext hook and AdminIndicator wrapper to auto-capture and display live route data, console errors, and API activity in a floating admin panel.

What is the best way to export full Next.js page context for AI agents?▼

Use a one-click Copy Full Context feature in the admin debug panel to export a complete snapshot of live route data, viewport details, and console errors for AI agents.

Can I use a debug context hook to wire specific Next.js routes to a live admin panel?▼

Yes, you can wire specific Next.js routes to a live admin panel by wrapping your page components with an AdminIndicator and using the useDebugContext hook to publish contextual data to the debug interface.

How do I add UI diagnostics and viewport visibility to a React admin dashboard?▼

Integrate an admin debug context system into your React dashboard to auto-capture and display live route information, viewport dimensions, and console errors in a floating admin panel.

Does the admin debug context require external dependencies to capture API activity?▼

No, the admin debug context operates with zero external dependencies, using frontmatter definitions and runtime components like the useDebugContext hook within your existing Next.js and React environment.

Why are my Next.js admin dashboard routes not showing live debug context?▼

Routes fail to show live debug context if components lack the AdminIndicator wrapper or useDebugContext hook integration, which are required to wire the route to the admin panel and auto-capture data.

Related Skills

Explore More Software Engineering Skills→
hyperjumptechhyperjumptech
1

dataqueue-react

Manage DataQueue-backed jobs in React apps with polling and progress tracking.

Official
Advanced
stoodderstoodder
1

bug-analysis

Analyze bug reports and reproduction data to generate a structured fix plan document.

Community
Advanced
bluebricks-nlbluebricks-nl

sentry-setup-logging

Configures Sentry structured logging for JavaScript, Python, and Ruby.

Official
Intermediate
olegakbarovolegakbarov
2

trpc

Implement type-safe tRPC v11 APIs with routing, middleware, and error handling.

Community
Advanced