메뉴
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).