メニュー
Use when fixing System Journey Viewer frontend layout regressions in apps/web, especially menubar, toolbar rows, topbar sizing, dock/workbench clipping, overflow, wrapping, and viewport-dependent UI shell issues.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when reorganizing frontend files in apps/web, classifying components vs non-components, applying folder/naming conventions, and adding top-of-file Purpose headers for faster human/AI navigation.
Use when changing System Journey Viewer local persistence shape or semantics (localStorage UI preferences, layout persistence, snapshots, recents), including backward compatibility, storage key versioning/migration logic, tests, and user-facing behavior safeguards.
Use when capturing or regenerating System Journey Viewer visual demos and screenshots with Playwright, including local dev server setup, deterministic showcase loading, presentation/journey playback automation, and media artifact validation for README/docs/help gallery.
Use when changing System Journey Viewer export behavior (SVG, PNG, PDF, GIF, MP4, animated SVG) or presentation/player capture flows, including validation of export tests, capture state restoration, format-specific constraints, and demo-gallery impacts.
Use when tuning System Journey Viewer light/dark themes, node/text color presets, palette defaults, and visual contrast/readability in canvas, inspector, showcase/tutorial examples, or desktop shell UI.
Use when syncing System Journey Viewer documentation after feature or workflow changes, covering WORKLOG, AI_STATE, SJV Script spec, help content, README, and naming consistency (especially SJV Script terminology and English UI/docs text).
| name | sjv-ui-layout-regression-fix |
| description | Use when fixing System Journey Viewer frontend layout regressions in apps/web, especially menubar, toolbar rows, topbar sizing, dock/workbench clipping, overflow, wrapping, and viewport-dependent UI shell issues. |
Use this skill for desktop shell layout bugs in apps/web such as:
scrollHeight vs rendered height),apps/web/src/App.tsxapps/web/src/App.cssapps/web/src/layout/*apps/web/src/App.styles.test.tsApp.styles.test.ts for deterministic style contracts, and/orsrc/layout/* and unit test it.npm --workspace @sjv/web run lintnpm --workspace @sjv/web run test:runnpm --workspace @sjv/web run builddocs/WORKLOG.md and docs/AI_STATE.md when behavior/workflow changed.overflow: hidden.getBoundingClientRect() only when content can wrap.