メニュー
Modify the web report UI. Use when adding/changing dashboard views, scoring selectors, share buttons, code review panels, cost calculators, i18n strings, or any visual element.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | ui-change |
| description | Modify the web report UI. Use when adding/changing dashboard views, scoring selectors, share buttons, code review panels, cost calculators, i18n strings, or any visual element. |
Modify the single-page web report UI. This is a vanilla JS SPA with no framework dependency.
| File | Role |
|---|---|
apps/web-report/src/index.html | Static HTML skeleton |
apps/web-report/src/styles.css | All styles (uses CSS custom properties: --space-*, --border, --surface, --accent, etc.) |
apps/web-report/src/app.js | Main entry: state management, event binding, i18n, navigation |
apps/web-report/src/view-model.js | Data transformations, score calculations, weight presets |
apps/web-report/src/report/dashboard.js | Dashboard module orchestration |
apps/web-report/src/report/detail-fragments.js | Individual detail section renderers |
apps/web-report/src/i18n.js | Translation dictionaries (en + zh-CN) |
apps/web-report/src/results/loaders.js | Result loading logic |
When adding a new UI section:
index.html in the appropriate section.styles.css using existing design tokens (no hardcoded colors/spacing).detail-fragments.js and call it from dashboard.js.app.js.en and zh-CN in i18n.js.When modifying score-related UI:
DEFAULT_SCORE_WEIGHTS and SCORE_WEIGHT_PRESETS in view-model.js MUST match packages/report/src/scoring.ts exactly.view-model.js presets, launcher dropdown, preset buttons, i18n.js labels.Build: cd apps/web-report && node scripts/build.mjs or pnpm build from root.
Verify by opening apps/web-report/dist/index.html in a browser and loading a summary.json.
view-model.js match scoring.ts exactly.en and zh-CN.summary.json without errors.Plan and execute code changes using a spec-driven workflow with structured documents. Use when making non-trivial changes (multi-file, multi-step, or behavior-impacting) that need structured planning before implementation. Not for trivial single-file edits.
Create and manage changesets for versioning with @changesets/cli. Use when making changes that need a changelog entry, preparing a release, or managing package versions.
Diagnose and fix failed benchmark runs. Use when a benchmark run fails, scores are unexpected, judges show errors, or traces are incomplete.
Build the pnpm monorepo correctly respecting inter-package dependencies. Use when building, verifying changes, or troubleshooting build failures.
Write and run tests using Node.js built-in test runner (node:test) with .mjs files. Use when creating new tests, debugging test failures, or understanding test infrastructure.
Understand the vanilla JS web-report app structure, patterns, and contribution guidelines. Use when modifying the UI, adding new views, or fixing frontend bugs.