About diagnostic-logs
A small coding skill for making diagnostic console logs consistent and easy to filter. It specifies purpose labels, JSON-stringified data, and removing temporary logs after debugging.
Key features
- 01Purposeful log messages
- 02Filterable uppercase identifiers
- 03JSON-stringified objects
- 04Remove logs after debugging
Use cases
- 01Add searchable logs during debugging
- 02Make console data easy to copy
- 03Clean up temporary diagnostics
Install
Copy the command and run it in a terminal.
$
npx skills add https:/ / github.com/ editframe/ skills --skill diagnostic-logsAfter installing, type/diagnostic-logsin Claude Code to confirm it loaded.
Details
From the project READMEDiagnostic Logs
Format
console.log('[IDENTIFIER] Clear purpose message', JSON.stringify({ object: data }));
Requirements
- Clear purpose - What is this log telling you?
- Single filterable identifier -
[UPPER_CASE]prefix (e.g.,[THUMB_STRIP],[RENDER]) - Stringified objects - Use
JSON.stringify()for easy copying from browser console - Remove when done - Delete diagnostic logs after debugging is complete
Examples
// ✅ Good
console.log('[THUMB_STRIP] Starting animation', JSON.stringify({
loadingCount: 3,
totalSlots: 10
}));
// ❌ Bad - no identifier, object not stringified
console.log('Starting animation', { loadingCount: 3 });
Comments
Markdown supported