메뉴
How to safely edit and validate Symphonee's dashboard renderer. The served js/app.js and mind-ui.js are GENERATED build outputs -- edit the source under dashboard/public/app/src/shell/ or mind-ui/src/, rebuild, then validate.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
When the user asks what is going on with the site they are building, drive the in-app browser Tools endpoints to start the dev server, read console + server + network logs, inspect/eval the page, and report -- all inside Symphonee, no Chrome needed.
The disciplined way to make and land a code change in a Symphonee-managed repo -- branch, implement, verify, show the diff as its own step, then commit. Use for any implement/fix/refactor task that ends in a commit.
Turn a correction, a gotcha, or a procedure you just did well into a durable SKILL.md so every future session of every CLI inherits it. This is how the system improves its own behaviour, not just its knowledge.
Engineered, not rushed -- profile and understand the system before changing it, find root cause not symptoms, then implement deliberately. Use for any non-trivial fix or feature where the right design is not obvious.
When a task matches an installed plugin or a structured connector, use its REST routes -- never re-solve it by hand or shell out to a third-party CLI. Ask the user before invoking a plugin.
For substantial or autonomous multi-step work, commit to a reviewable contract -- intent, a plan with acceptance criteria, then execute proving each unit with evidence -- instead of improvising. Use for overnight/large tasks or anything that must be auditable.
| name | Verify a frontend edit |
| description | How to safely edit and validate Symphonee's dashboard renderer. The served js/app.js and mind-ui.js are GENERATED build outputs -- edit the source under dashboard/public/app/src/shell/ or mind-ui/src/, rebuild, then validate. |
| when | editing the dashboard renderer (app/src/shell/*.js, mind-ui/src/*.js, dashboard/public/index.html, or styles/app.css) |
| tags | frontend, verification, quality, build |
The dashboard renderer is BUILT from source. The two big served files are generated -- never hand-edit them; your change is wiped on the next build.
dashboard/public/index.html -- markup + a few SMALL bootstrap inline <script>
blocks (localStorage migration, theme pre-apply, panel-state, boot overlay). The
main logic is NOT inline anymore.dashboard/public/styles/app.css -- all styles.dashboard/public/js/app.js -- GENERATED. Source = app/src/shell/*.js (cohesive
concern files: terminals, files, git, orchestrator, notes, work-items, browser,
apps-tab, themes, command-palette, ...) concatenated per app/src/shell/manifest.json.
Flat single global scope; 327 inline on* handlers call its functions by bare name.dashboard/public/mind-ui.js -- GENERATED. Source = mind-ui/src/*.js, REAL ES
modules (import/export) bundled by esbuild.npm run build:renderer (or node scripts/build-renderer.js; --watch for dev).app/src/shell/*, mind-ui/src/*), the small inline
scripts in index.html, or styles/app.css.app/src/shell/<concern>.js or mind-ui/src/<module>.js. If you cannot find the
function, grep the parts/modules. Do NOT edit js/app.js or mind-ui.js directly.npm run build:renderer. For mind-ui, a clean esbuild build PROVES the
cross-module wiring (a missing import is a build error). For app.js, the build
concatenates the parts.node --check the edited source file AND the built output
(node --check dashboard/public/js/app.js / mind-ui.js).app.js parts share ONE flat global scope (concatenation). Top-level function
declarations are global (and reachable by inline handlers); top-level let/const
are shared across parts but are NOT window properties -- an inline onclick
must call a FUNCTION, not read a bare let.mind-ui modules are isolated ES modules: a symbol used across files must be
exported and imported. Shared mutable state lives on the single exported
state object (never reassign an imported binding).index.html's inline <script> blocks: node --check can't read
HTML, so extract each block and run it through new vm.Script(code).ship-a-change (show the diff as its own step, etc.). Commit BOTH
the source and the rebuilt output.dashboard/public/js/app.js or dashboard/public/mind-ui.js --
they are generated; edit source + rebuild.node --check is necessary but not sufficient: only a live reload
catches runtime/GUI breakage.npm run build:renderer with no error).node --check passes on the source and the built output.