VizCode

Capture a hard-won lesson so the same mistake is never repeated, and recall past lessons before risky actions. Use this skill whenever an error → root-cause → fix cycle just completed, the user corrected a wrong assumption, something cost real debugging time, or the user says "記下來 / remember this / don't make this mistake again" or runs /learn. Also consult it BEFORE editing parsers, job_manager, running builds, or other operations where past pitfalls exist.

Scan a codebase and optionally run semantic analysis + MCP server. Trigger on /vizcode, /vizcode --parse, /vizcode --ai.

Add or improve language support in VIZCODE - covers import/dependency edges, function/class node detection, file type shape, and legend entries. Use when adding a language, fixing parsing, strengthening cross-file edges, or diagnosing missing dependencies.

Add a new API endpoint to server.py. Use this skill whenever adding a new GET or POST route — including new data queries, file operations, or any HTTP handler in the VIZCODE local server.

Add a new UI theme to the visualizer application. Use this skill whenever the user asks to create a new visual theme, change the color scheme, or adjust global CSS appearance variables like dark mode or specific color palettes.

Adjust CSS styles in the VIZCODE frontend. Use this skill whenever the user wants to change colors, spacing, fonts, borders, backgrounds, shadows, border-radius, opacity, or any visual appearance of nodes/panels/UI elements. Trigger on requests like "change color", "adjust spacing", "border too thick", "background color", "font size", "pill too tall", "section color", "border radius", etc.

Code style guidelines for the CodeViz project. These rules must be followed whenever adding or modifying any Python or JavaScript code. Use this skill whenever writing or reviewing code in this project.

Debug and fix rendering issues in the Cytoscape-based graph visualizer (static/viz.js + static/features/graph/*). Use this skill whenever there are visual bugs in the dependency graph — including node positioning, edge rendering, color/shape incorrect, click events not working, zoom/pan broken, label truncation, or any canvas-related bugs in launcher.html / viz.js / graph_*.js. For Galaxy-view bugs use the galaxy-workflow skill instead.

Work on the Galaxy view in CodeViz. Use this skill whenever the user mentions Galaxy view, Galaxy button effects, background precompute, ForceAtlas2 layout, noverlap, Sigma/graphology rendering, Galaxy performance, Galaxy UX timing, or files under static/features/galaxy_view/. Also use it for Galaxy-specific bug fixes, architecture questions, or tuning when the normal graph view is not the topic.

Translate English text, UI elements, documents, or code comments into fluent Traditional Chinese (zh-TW). Make sure to use this skill whenever the user asks for translation to Chinese, requests localization of a file, or needs to rewrite English content into natural-sounding Traditional Chinese.

Implement stateful UI default-behaviours with preference overrides. Make sure to use this skill whenever you are implementing, debugging, or refactoring visualizers, graph UIs, toggleable visibility of nodes/levels, expand/collapse all actions, or restoring view state via history navigation (Prev/Next). It ensures fresh navigation applies user preferences while history navigation perfectly restores the snapshot.