Run any Skill in Manus with one click

code-inspector-init

Stars2

Forks0

UpdatedMarch 9, 2026 at 16:14

Set up or migrate code-inspector-plugin across modern frontend frameworks. Use when you need click-to-source IDE navigation, hotkey customization, or inspector troubleshooting.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

Adonis0123

Adonis0123/adonis-skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

4 files

SKILL.md

readonly

name	code-inspector-init
description	Set up or migrate code-inspector-plugin across modern frontend frameworks. Use when you need click-to-source IDE navigation, hotkey customization, or inspector troubleshooting.
metadata	{"author":"adonis"}

Code Inspector Init

Overview

在开发环境为前端项目接入 code-inspector-plugin，实现按组合键后点击 DOM 跳转到源码位置。优先给出最小改动、可复制、可回滚的迁移方案，默认使用插件原生开关策略：needEnvInspector: true + .env.local 中设置 CODE_INSPECTOR=true；但 Next.js >=15.3 主模板默认使用 hotKeys: ["altKey"] + needEnvInspector: false。

Trigger Phrases

帮我接入 code-inspector-plugin
帮我迁移 codeInspectorPlugin 到新项目
Next.js/Vite/Webpack 怎么配 code inspector
点击页面元素跳不到 IDE
Alt+Shift 没反应 / 快捷键怎么改

Decision Tree

识别框架与 bundler。

从 package.json、配置文件名、构建命令确认是 Next.js、Vite、Webpack、Rspack、Rsbuild、Esbuild、Mako、Umi、Nuxt、Astro 中哪一种。

如果是 Next.js，先判断版本区间。

<=14.x：使用 webpack 插件接入。
15.0.x ~ 15.2.x：使用 experimental.turbo.rules。
>=15.3.x（包含 16）：使用 turbopack.rules。

选择开关策略。

默认：needEnvInspector: true（推荐，迁移一致性最好）。
Next.js >=15.3 主模板特例：默认 needEnvInspector: false，并使用 hotKeys: ["altKey"] 做最小接入。
用户明确要求项目自定义开关时，再补充 ENABLE_CODE_INSPECTOR 等外层条件。

判断是否需要高级选项。

只有用户明确提出需求才调整 hotKeys、hideConsole、openIn、launchType、include/exclude、mappings、pathType、skipSnippets。

Execution Workflow

识别项目环境。

确认框架、bundler、配置文件路径、是否 dev-only 配置。

安装依赖。

给出单行命令：pnpm add -D code-inspector-plugin（如项目使用 npm/yarn，则给对应命令）。

注入配置。

从 references/bundler-recipes.md 选择对应片段。
配置中必须包含正确的 bundler 值。

设置 .env.local。

仅当模板显式使用 needEnvInspector: true 时，添加 CODE_INSPECTOR=true。
对 Next.js >=15.3 主模板（hotKeys: ["altKey"] + needEnvInspector: false）不强制配置 .env.local。

本地验证。

启动 dev。
在页面按默认组合键（多数模板为 Mac: Option+Shift / Windows: Alt+Shift；Next.js >=15.3 主模板为 Option/Alt 单键）后悬浮并点击 DOM。
观察浏览器控制台提示和 IDE 跳转结果。

故障排查。

出现 IDE 无法打开、快捷键无效、路径错误、端口冲突时，按 references/troubleshooting.md 分步排查。

Reference Routing

需要框架配置代码片段时：读取 references/bundler-recipes.md。
需要定制参数与风险评估时：读取 references/options-cheatsheet.md。
需要排障步骤时：读取 references/troubleshooting.md。
不要一次性加载全部 references，只按当前请求场景读取对应文件。

Output Contract

输出必须严格包含以下四部分，且顺序固定：

改动点清单

说明要改哪些文件、每个文件做什么。

可复制代码块

给完整可用的配置片段，不给伪代码。
代码块里保留英文 API 名与配置键。

验证命令

提供可直接执行的单行命令。
给出成功判定标准。

回滚说明

说明如何移除插件配置和环境变量。

Guardrails

默认只在开发环境启用，不在生产构建开启 inspector。
修改保持最小化，不顺带重构无关代码。
不确定框架版本时，先读取 package.json 与 lockfile 再下结论。
涉及 node_modules 源码映射时，优先使用 mappings 且给出风险说明。

More from this repository

same repository

commit

Adonis0123/adonis-skills

Generate emoji-prefixed Conventional Commit messages and focused local commits from staged changes or a single clear unstaged change.

2026-07-082

commit-push

Adonis0123/adonis-skills

Commit a focused local change set with an emoji Conventional Commit message, safely stage a clear unstaged scope when needed, then push the current branch to its remote. Use when the user asks to "commit and push", "commit push", "submit and push", "push my committed change", or wants a local commit finalized on the remote. Do not create pull requests, merge requests, releases, tags, rebases, or deployment changes.

2026-07-082

goal-gate

Adonis0123/adonis-skills

Use this skill when the user wants to decide, set, write, or use a durable coding-agent goal or /goal prompt that keeps Codex, Claude Code, or another agent working until a verifiable done condition is met. It gates autonomy, handles runtime differences, and writes copy-ready goal contracts with outcome, verification, constraints, write boundaries, iteration policy, completion evidence, and pause/ask conditions. Trigger on requests like 'should I set a goal?', 'set up a durable goal', 'give me a /goal prompt', 'turn this vague app idea into a goal', 'keep refactoring until tests pass', 'I am stepping away, have the agent finish this', migrations, refactors, ports, spec implementations, eval loops, backlog cleanup, or multi-checkpoint work. Do not use for single quick edits, running tests once, OKR/scrum goal questions, recurring reminders, or token-budget settings.

2026-06-152

branch-creator

Adonis0123/adonis-skills

Create safe Git feature or hotfix branches with concise names. Use this whenever the user asks to create a branch, start work on a new feature or fix, wants a `feat/...` or `hotfix/...` branch name, asks for a short branch slug from a task description, or wants help before beginning local Git work. Default to recommending the branch name and command first, then create only after user confirmation. Do not push, commit, rebase, or create PRs.

2026-06-112

code-plugin-architecture

Adonis0123/adonis-skills

Use when the user's pain is "adding/removing one more X means editing N files" and X is a recurring variant kind: popup, banner, modal, ad slot, payment method, AI model/tool, form field type, connector, sub-site, command, menu item, agent, extension point, or data source. Use when they want to design, refactor, review, name, or explain a pluggable mechanism using registry, interface/trait contract, runtime core, and convention folders; mention pluginize, pluggable, plugin architecture, extension point, registry pattern, or extensibility. Use when explaining the first-principles rationale, DDD/SOLID/OCP mapping, or industry analogies behind that structure. Use for cross-stack mapping to VSCode contributes, Webpack/Vite plugins, Rust/Tauri connectors, Python entry_points, or cargo features. Skip one variant's internals/styles/hooks/copy/bugs, and skip register/registry meaning DI container, user signup, or package registry.

2026-05-292

workflow-gate

Adonis0123/adonis-skills

Use BEFORE heavier workflow skills when route choice matters. Route creative work without a design doc/spec to Brainstorm; destructive or hard-to-reverse work to Discuss; unresolved decisions, Plan/Full fan-out, ship checks, unclear bugs, and fresh-eyes fix-then-re-review need this gate. Skip single-line read-only lookups, pure typo/formatting edits, trivial safe one-line fixes, and clearly safe named-skill requests. Outputs Route, Runtime skill, Fallback alias, and Execution path.

2026-05-172

name	code-inspector-init
description	Set up or migrate code-inspector-plugin across modern frontend frameworks. Use when you need click-to-source IDE navigation, hotkey customization, or inspector troubleshooting.
metadata	{"author":"adonis"}

Code Inspector Init

Overview

Trigger Phrases

帮我接入 code-inspector-plugin
帮我迁移 codeInspectorPlugin 到新项目
Next.js/Vite/Webpack 怎么配 code inspector
点击页面元素跳不到 IDE
Alt+Shift 没反应 / 快捷键怎么改

Decision Tree

识别框架与 bundler。

从 package.json、配置文件名、构建命令确认是 Next.js、Vite、Webpack、Rspack、Rsbuild、Esbuild、Mako、Umi、Nuxt、Astro 中哪一种。

如果是 Next.js，先判断版本区间。

<=14.x：使用 webpack 插件接入。
15.0.x ~ 15.2.x：使用 experimental.turbo.rules。
>=15.3.x（包含 16）：使用 turbopack.rules。

选择开关策略。

默认：needEnvInspector: true（推荐，迁移一致性最好）。
Next.js >=15.3 主模板特例：默认 needEnvInspector: false，并使用 hotKeys: ["altKey"] 做最小接入。
用户明确要求项目自定义开关时，再补充 ENABLE_CODE_INSPECTOR 等外层条件。

判断是否需要高级选项。

只有用户明确提出需求才调整 hotKeys、hideConsole、openIn、launchType、include/exclude、mappings、pathType、skipSnippets。

Execution Workflow

识别项目环境。

确认框架、bundler、配置文件路径、是否 dev-only 配置。

安装依赖。

给出单行命令：pnpm add -D code-inspector-plugin（如项目使用 npm/yarn，则给对应命令）。

注入配置。

从 references/bundler-recipes.md 选择对应片段。
配置中必须包含正确的 bundler 值。

设置 .env.local。

仅当模板显式使用 needEnvInspector: true 时，添加 CODE_INSPECTOR=true。
对 Next.js >=15.3 主模板（hotKeys: ["altKey"] + needEnvInspector: false）不强制配置 .env.local。

本地验证。

启动 dev。
在页面按默认组合键（多数模板为 Mac: Option+Shift / Windows: Alt+Shift；Next.js >=15.3 主模板为 Option/Alt 单键）后悬浮并点击 DOM。
观察浏览器控制台提示和 IDE 跳转结果。

故障排查。

出现 IDE 无法打开、快捷键无效、路径错误、端口冲突时，按 references/troubleshooting.md 分步排查。

Reference Routing

需要框架配置代码片段时：读取 references/bundler-recipes.md。
需要定制参数与风险评估时：读取 references/options-cheatsheet.md。
需要排障步骤时：读取 references/troubleshooting.md。
不要一次性加载全部 references，只按当前请求场景读取对应文件。

Output Contract

输出必须严格包含以下四部分，且顺序固定：

改动点清单

说明要改哪些文件、每个文件做什么。

可复制代码块

给完整可用的配置片段，不给伪代码。
代码块里保留英文 API 名与配置键。

验证命令

提供可直接执行的单行命令。
给出成功判定标准。

回滚说明

说明如何移除插件配置和环境变量。

Guardrails

默认只在开发环境启用，不在生产构建开启 inspector。
修改保持最小化，不顺带重构无关代码。
不确定框架版本时，先读取 package.json 与 lockfile 再下结论。
涉及 node_modules 源码映射时，优先使用 mappings 且给出风险说明。