技能介绍

为什么需要无源码操控

直接修改 Notrat 源代码来调整界面，意味着要面对构建链依赖、版本更新冲突、二次开发维护成本等问题。对于只想快速验证某个视觉方案，或需要在不同环境间临时切换 UI 状态的场景，改源码的门槛明显过高。NotratUI 控制技能的核心目标，是在不接触源代码的前提下，通过 MCP 工具链实时注入样式、修改组件属性、绑定事件，让界面调整像改配置文件一样轻量。

核心能力与关键步骤

技能围绕两类操作展开：样式与主题操控 和 组件行为干预。

样式注入：使用 slot_set_style 直接给任意 CSS 选择器覆盖样式，例如修改 .editor-tab.active 的边框颜色，或调整 .activity-bar-item.active::after 的指示条宽度。所有颜色值需遵循 Notrat 的 HSL 无前缀格式（如 0 0% 10%），否则会被主题 class 的更高优先级选择器覆盖。
主题切换：通过 config_toggle_theme 一键切换明暗模式，或用 config_set 直接修改 --primary 等核心 CSS 变量。注意 .theme-minimalist:not(.dark) 这类主题 class 的选择器优先级高于 :root，修改时需同时覆盖目标 class 和 :root。
组件属性修改：slot_set_props 可操作 React 组件的 props，例如将 disabled 设为 true 以禁用按钮，或修改 placeholder 文本。
模拟用户操作：ui_click 和 ui_type 可触发界面交互，适合在自动化流程中验证 UI 状态。

适用边界与注意点

组件热替换的局限性：component_modify 需要访问组件源码，仅适用于有源码权限的场景。无源码场景应优先使用样式注入和 props 修改。
选择器依赖现有结构：所有样式注入基于 Notrat 源码中已存在的 CSS 选择器，若目标元素的类名或结构在未来版本中变更，需重新逆向提取选择器。
状态同步机制：通过 ui_get_state 可获取当前激活的 tab、打开的文件等状态，但样式注入后的视觉反馈需结合 slot_clear_all 清除所有覆盖后再重新应用，避免残留样式干扰。
主题变量的连锁反应：修改 --primary 会影响所有依赖主色调的组件，如按钮、链接、聚焦环等，调整时需考虑全局影响。