anthemflynn/ccmp

Debug and fix common issues in Three.js, React Three Fiber, and 3D asset pipelines. Use when encountering visual bugs, performance problems, loading failures, or unexpected behavior. Covers black screens, Z-fighting, memory leaks, shader errors, and physics glitches.

Test-Driven Development workflow with session integration. Use when implementing features/bugfixes to enforce RED-GREEN-REFACTOR discipline. Integrates with session-management for enhanced TDD session tracking, checkpoints, and metrics.

Git-native session lifecycle management for software development. Use when starting/resuming coding sessions, creating checkpoints, tracking objectives and blockers, generating handoffs between sessions, or needing context preservation across work sessions. Provides intelligent onboarding for AI coding agents by loading comprehensive project context.

Frontend website debugging toolkit using Chrome DevTools Protocol with Playwright/WebKit fallbacks. Use this skill when: (1) Debugging CSS, HTML, or JavaScript issues on a webpage, (2) Taking screenshots to verify visual changes, (3) Inspecting DOM structure or console errors, (4) Testing responsive layouts, (5) Extracting selectors for automation, (6) Self-debugging frontend work Claude has created, (7) User says "debug this page", "check my site", "why doesn't this look right", or "fix the frontend". Supports Chrome (primary) and Safari/WebKit (via Playwright). Designed for agent-driven debugging loops.

Enables autonomous context management for codebases through claude.md files. Use when creating, maintaining, or synchronizing AI agent context. Provides tools and workflows for monitoring context health, detecting staleness, and updating intelligently. Helps Claude work proactively as a context manager.

Generate comprehensive project health and status reports for rapid developer onboarding. Use when starting sessions, checking project health mid-work, or needing overview of git status, open work items, and suggested next actions.

Optimize and prepare 3D assets for web delivery. Use this skill when working with GLTF/GLB files, compressing 3D models, optimizing textures, setting up Blender exports, or preparing assets for Three.js/R3F. Covers GLTF workflows, Draco/meshopt compression, texture optimization, LOD generation, and performance profiling.

Build 3D applications with React Three Fiber (R3F), the React renderer for Three.js. Use this skill when building 3D scenes with React, using declarative JSX for 3D objects, integrating Three.js with React state/lifecycle, or using Drei helpers. Covers Canvas setup, hooks, Drei utilities, performance patterns, and state management for 3D React apps.