菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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.
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.
| name | add-ui-theme |
| description | 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. |
This skill defines the process for safely introducing a new UI theme into the application.
Use this skill whenever:
Never hardcode hex colors directly into element classes.
Always use CSS custom properties (--var-name) tied to a[data-theme="my-theme"]selector.
To keep this skill lean and adhere to Progressive Disclosure, detailed CSS variable references, file modification steps, and JavaScript integration are stored in an external reference.
Before adding a new theme, you must read the detailed implementation guide:
👉 Read references/implementation.md
