メニュー
Implements or styles the image-scoring-backend React SPA at /ui/, Gradio design-token sync, and frontend/ components using @synthet/image-scoring-design. Use for frontend/ changes, visual components, Tailwind theming, or design:check failures—not Python backend modules unless API contract is in scope.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Bump semver + promote CHANGELOG Unreleased via compiled harness. Use for /release, version bumps, or tagging. Runs scripts/agent_skills/release_bump.py; LLM only when Unreleased is ambiguous. Never commit/push unless the user asks.
Vexlum Scoring MCP — compact search+dispatch on is-be-mcp / is-be-live and gallery is-ui-mcp / is-ui-live.
Choose CLI tools and safe patterns before repo work. Install checklist, bounded search/read commands, and confirmation gates. Use when navigating the codebase, running shell commands, or setting up agent tooling on Windows, WSL2, or macOS.
Inspect JSON, YAML, and API responses with jq, yq, dasel, curl, and httpie. Use for package.json, config.json, and backend health checks. Never output secrets or full credential-bearing config.
Backend build, test, lint, and verify workflows via WSL pytest, ruff, doctor, and docker compose. Use before claiming work complete or opening a PR. Do not invent ad hoc Python commands outside documented venvs.
Choose and run the right search tool: rg vs grep vs ast-grep vs fd vs fzf. Bounded repo navigation with ripgrep, fd, tree, bat, and structural search. Use when finding symbols, files, syntax patterns, or deciding which CLI search to use before reading or editing code.
| name | backend-frontend-ui |
| description | Implements or styles the image-scoring-backend React SPA at /ui/, Gradio design-token sync, and frontend/ components using @synthet/image-scoring-design. Use for frontend/ changes, visual components, Tailwind theming, or design:check failures—not Python backend modules unless API contract is in scope. |
frontend/ (React SPA at /ui/)design:sync, gradio_design_tokens.css)modules/*, FastAPI, DB — defer to imgscore-backend-implementergallery-ui skilldesign-tokens skill| Need | Import from |
|---|---|
| Theme CSS | @synthet/image-scoring-design/tailwind-theme.css in frontend/src/index.css |
| Label / phase colors | @/constants/labelColors (re-exports package) |
| Stage names | @/types/api → STAGE_DISPLAY, StageCode |
| Score display | formatScoreValue from @synthet/image-scoring-design |
| Embedding badge | EmbeddingSpaceIcon, EMBEDDING_SPACE_* from package |
| Phase status UI | @/components/status/PhaseStatusIcon |
| Buttons, badges, cards | @/components/ui/* |
var(--color-accent), var(--color-bg-secondary), etc., or Tailwind utilities backed by @theme — no new hex literals--color-text-on-accent, not --color-text-primaryInfo / CheckCircle2 / AlertTriangle / XCircle + matching --color-* tokenscomponents/ui primitivesFrom frontend/:
npm run design:check # Gradio CSS hash matches package
npm run design:sync # Copy gradio-snippet.css → modules/ui/
npx tsc --noEmit
From repo root (if documented in package.json): same via frontend/ scripts.
If sibling image-scoring-ui tokens.json changed:
npm run build && npm test in image-scoring-uinpm install in frontend/ (file: dependency)npm run design:sync && npm run design:check/ui/Summary, files touched, design:check and tsc results (or why not run).