nicksonthc
- 9 skills
- 0 followers
- 22 hours ago last updated
- ▌ Harvest Skill · nicksonthcHarvest a feature from the current repo into a reusable Claude Code skill, saved to the claude-skill sync repo and symlinked globally so it replicates to any other project. Use when the user says "save this as a skill", "harvest this", "make a skill from this feature", "extract this to a skill", "add this to my skill repo", or wants a good pattern/feature from the codebase made replicable across repos.
- ▌ Network Diagram · nicksonthc bundleRender a printable engineering-blueprint network topology diagram as a single self-contained HTML file (1920x1080, warm-paper palette, orthogonal flows, themeable accent). Use when the user asks for a network diagram, network topology, infrastructure or architecture drawing, logical network design, rack/zone layout, or a "blueprint"-style systems diagram — or mentions network-diagram, topology.html, or wants an existing network diagram revised.
- ▌ R3f Hero Camera · nicksonthc bundleCinematic camera rig for a React Three Fiber scene, built on drei CameraControls — a reusable shot vocabulary (overview, 3/4 object framing, screen punch-in, first-person standpoint, chase engage), a stutter-free follow cam, an idle attract orbit that breaks on user input, perspective↔orthographic mode switching, and a writer-priority ladder so competing camera drivers never fight. Use when adding camera fly-to / framing on selection, a follow or chase camera for a moving object, cinematic tour or demo beats, a "focus on X" button, an idle attract loop, or a top-down ortho editor view to a three.js / R3F project.
- ▌
- ▌ Interactive 3d Object · nicksonthc bundleAAA hover/select feedback for interactive objects in a React Three Fiber scene — a design-token file so the whole feel is coherent and tunable from one place, a status→color language, a geometry-agnostic ObjectFX overlay (soft hover ring, breathing status-tinted select ring, click ripple, additive glow halo, select particle burst, floating label), a delayed hover tooltip that stays glued to moving objects, and action-preview telegraphing for HUD buttons. Use when making 3D objects hoverable/clickable, adding selection rings, glow or highlight effects, status color coding, object labels or tooltips, or "show what this button will do" previews in a three.js / R3F project.
- ▌ System Status Popover · nicksonthc bundleHonest system-status indicator for a SPA + API app — a small beating status dot in the shell that opens a popover detailing backend health (endpoint, real upstream, DB, environment, version + commit, build time, latency, last check), realtime Socket.IO state (connected, transport, socket id), and frontend build provenance, backed by a /health endpoint and a git-SHA/build-time pipeline through Docker build args. Use when asked to show the backend / socket.io version and status in the frontend, add a health or connection indicator, display build info / app version in the UI, add an honest "Live" badge, or wire version + commit from git through Docker into both backend and frontend.
- ▌ Keyboard First Hotkeys · nicksonthc bundleKeyboard-first interaction system for a kiosk / scan-gun / operator-terminal React app — one hotkey catalogue that drives the bindings, the key-cap hints on buttons, and the cheatsheet dialog so they can never drift; a focus chain that always keeps focus on "the next thing the operator will touch"; and a focus guard that recovers focus when re-renders drop it. Use when adding keyboard shortcuts / hotkeys to a React app, building a scan-gun or barcode-scanner driven UI, a kiosk where the workflow is Enter-to-advance, a shortcuts cheatsheet ("press ? to see shortcuts"), or when focus keeps getting lost after re-renders / socket updates and scans go nowhere.
- ▌ Socketio Realtime Hooks · nicksonthc bundleReact hook suite for a Socket.IO realtime feed — one authenticated app-wide connection in a context provider, useSocketEvent (listeners that never rebind), useSocketRoom (auto re-join after reconnect), an echo-suppression contract so a tab is never told to re-fetch its own change (X-Client-Id header ↔ skip_sid), live presence (who is at which station/terminal), and the "socket is the fast path, a slow poll self-heals" composition. Use when adding Socket.IO / websocket realtime updates to a React app, live data that should push instead of poll, room-scoped subscriptions, "other users see changes instantly", duplicate refreshes after a user's own mutation, or presence / who's-online rosters.
- ▌ Toast Notification History · nicksonthc bundleToasts with an audit trail for a React app — a drop-in wrapper around sonner's toast that also records every notification into a capped, localStorage-backed history, stamps on WHO did it (the signed-in user) automatically, and shows the log in a floating-bell slide-over panel with an unread badge. Use when adding a notification center / notification history / bell icon to a React app, when toasts disappear before anyone reads them ("what did that error say?"), when a shared kiosk or multi-operator terminal needs actions attributed to a person, or when wiring toast notifications that must also be reviewable later.