菜单
画像（PNG）からUI要素の整列（縦中央揃い / 左端揃い / 間隔均等 等）を画素単位で静的判定するスクリプトを、命題ごとに新規実装してから走らせる skill。LLM の主観で「揃ってる」と誤判定するのを防ぐためのメタ手法。固定スクリプトを呼ぶのではなく、検証したい命題ごとに ROI / 判定式 / debug overlay を設計し直す。scripts/ にケース別の参考実装（中央揃い / 左端揃い）を同梱。トリガー：「中央寄せ判定」「縦揃え確認」「左端揃え判定」「centering check」「alignment check」「画像で揃ってるか確認して」
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/TeXmeijin/agent-skills --skill centering-judge命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | centering-judge |
| description | 画像（PNG）からUI要素の整列（縦中央揃い / 左端揃い / 間隔均等 等）を画素単位で静的判定するスクリプトを、命題ごとに新規実装してから走らせる skill。LLM の主観で「揃ってる」と誤判定するのを防ぐためのメタ手法。固定スクリプトを呼ぶのではなく、検証したい命題ごとに ROI / 判定式 / debug overlay を設計し直す。scripts/ にケース別の参考実装（中央揃い / 左端揃い）を同梱。トリガー：「中央寄せ判定」「縦揃え確認」「左端揃え判定」「centering check」「alignment check」「画像で揃ってるか確認して」 |
LLMは画像の「微妙なズレ」を主観で判断しがちで、自分に都合よく「揃っている」と誤判定してしまう。 このskillの本質は 「画素単位で客観的に判定するスクリプトを毎回新規実装する」 というメタ手法。
汎用判定スクリプトは存在しない。整列の命題はレイアウトによって変わるため、 毎回以下を回す:
「✅ 揃ってる」と返答する前に、 必ず命題に応じた判定スクリプトを書いて実行する。 検出されたずれを曖昧表現で濁さず、 px 数値で言い切る。 LLM の目視判定のみで「揃った」と答えてはいけない。
例:
「揃ってるか確認して」だけで実装に入らない。 何と何の何かを必ず明示してから着手する。
--row label y_top y_bot 形式で ROI を人手指定する方が堅実。 自動検出を入れるのは「同じレイアウトを大量に検証する」ときだけ整列判定の共通パターン:
| 命題 | 主要アルゴリズム |
|---|---|
| 縦中央揃い (行内) | 各要素の bbox 中心 y を計測、 基準要素との差を比較 |
| 左端揃い (複数行) | 各行で content 最左 x を計測、 max - min を delta_max とする |
| 右端揃い (複数行) | 同上で最右 x |
| 間隔均等 (縦/横) | 連続要素の bbox 間 gap を計測、 max - min を delta_max とする |
| 中央寄せ (コンテナ内) | コンテナ bbox 中心と中身 bbox 中心の差を計測 |
毎回ゼロから書くのではなく、 以下のパーツを再利用する。
from PIL import Image
import numpy as np
img = Image.open(image_path).convert("RGB")
arr = np.array(img)
is_content = arr.min(axis=2) < 230 # 白背景: RGB 最小値 < 230 を content とみなす
dark mode の画像なら閾値を逆転 (arr.max(axis=2) > 30 等)。
is_content.sum(axis=1) → 行に何かが描かれているかis_content.sum(axis=0) → 列に何かが描かれているかprofile を bool 化 (> 閾値) してから、 連続する True 区間を抽出。 隣接 run の gap が merge_gap_threshold 未満なら統合する後処理を入れる。 この閾値が要素境界の感度を決める。
検出結果を必ず画像に重ねて保存する。 数値だけだと読者は信用しないので、 視覚的証拠を添える:
from PIL import ImageDraw
overlay = img.copy()
draw = ImageDraw.Draw(overlay)
draw.rectangle([l, t, r, b], outline=(255, 0, 0), width=2)
draw.line([(0, center_y), (w, center_y)], fill=(255, 0, 0), width=1)
overlay.save(debug_out)
print(json.dumps(result, indent=2, ensure_ascii=False)) # 再現性のため JSON も
print(f"\n=== VERDICT: {verdict} ===")
for d in details:
print(d)
sys.exit(0 if verdict == "PASS" else 1 if verdict.startswith("SOME") else 2)
終了コード規約: 0 = ALL OK / 1 = SOME FAIL / 2 = ERROR (検出不能等)。
実換算 = delta / device_pixel_ratio. 両方の数値を提示--vertical-margin, --cluster-merge-x-gap, --max-avatar-height 等を変えてリトライscripts/ 配下のスクリプトは 参考実装。 そのまま呼んで「揃ってる/揃ってない」を返すための固定ツールではない。 「こういう命題にはこう書いた」例として読み、 別命題なら別スクリプトを書く。
命題: 「画像左の円形アイコンと、 その右に並ぶ要素群の縦中心 y が揃っているか」
主要仮定:
アルゴリズム: avatar 自動検出 → 縦範囲を基準に右側を縦方向 profile で分割 → 各要素の bbox 中心 y を avatar 中心 y と比較 → |delta| > threshold で FAIL
踏襲できる部分:
cluster_merge_x_gap での要素分割 / debug overlay / 終了コード規約踏襲できない部分:
命題: 「縦に並ぶ複数行 (各行が左にアイコン + 右にテキスト) で、 テキスト左端 x が揃っているか」
主要仮定:
アルゴリズム: 行 ROI ごとに各列の content profile → 連続 True ブロック抽出 (gap < gap_threshold で統合) → 各行で 2 番目のブロックの左端 x を比較 → delta_max > threshold で FAIL
踏襲できる部分:
踏襲できない部分:
items-center 抜け命題: 「左アイコンと右側要素群の縦中心 y が揃っているか」 → left_circle_vs_right_row_center_y.py 型
検出結果: 左アイコンと右側要素群の中心が 9px (@2x) = 4.5px (@1x) ずれていた
原因:
<div className={'flex'}> {/* items-center 抜け! */}
<div className={'mr-2'}>...左アイコン 40px固定...</div>
<div className={'flex items-center ...'}>...内側はOK だが...</div>
</div>
align-items: stretch で、 隣接する縦長要素 (バッジ等) の高さに引っ張られて内側 div が 50px に拡張修正: 外側 div に items-center 追加
命題: 「行内に並ぶバッジ群の縦中心 y が、 基準要素の中心 y と揃っているか」 → left_circle_vs_right_row_center_y.py 型
検出結果:
原因: SVG 内部に「アイコン本体 + 下方向に伸びるラベル/リボン」があり、 SVG 画像の幾何中心は視覚的な「アイコン本体の中心」より下に位置. flex items-center で SVG 幾何中心を揃えると、 視覚的にはアイコン本体が上に見える
修正: SVG 自体は触らず (影響範囲が広い)、 呼び出し側で wrap して下にオフセット:
{showBadgeA && (
<span className={'relative top-px'}> {/* +1px 下に */}
<BadgeA />
</span>
)}
{showBadgeB && (
<span className={'ml-1 relative top-[3px]'}> {/* +3px 下に */}
<BadgeB />
</span>
)}
オフセット値は (@1x換算ずれ量) を四捨五入 して top-[Npx] で指定。 呼び出し側の特定ページだけ補正できる。
命題: 「3 行 (各行が左にアイコン + 右にテキスト) で、 テキスト左端 x が揃っているか」 → multi_row_text_left_x_after_icon.py 型
検出結果:
修正: 全行のテキストwrapper に ml-1 を統一して隙間を揃える:
<IconA size={24} className={'text-gray'} />
<div className={'ml-1'}><ContentA ... /></div>
<IconB size={24} className={'text-gray'} />
<Text className={'ml-1 inline-block ...'}>...</Text>
修正後: text_left=224px で 3 行完全一致 (delta_max=0px → PASS)
left_circle_vs_right_row_center_y.py がエラーで動かない」「結果が直感と合わない」となったら、 命題とスクリプトの仮定が合っていない。 新規スクリプトを書くlist | None を使う)PJ管理フロー（長期記憶＋Threadの積み上げ）を任意リポジトリに展開するスキル。デフォルトでは `.claude/my-projects/<slug>/` 配下にProject長期記憶（CLAUDE.md）とThread（OBJECTIVE.md→OUTPUT.md）を積むが、runner / repo 方針に応じて `.agents/my-projects/` 等へカスタム可能。トリガー：「<slug>を再開」「続きやる」「PJ立ち上げ」「新スレッド作って」「OUTPUT書いて」「pbcopyして」「PJクローズ」「このやりとりをPJ管理下に置きたい」「○○PJに合流させたい」「PR/Issueから In Progress PJを作って」「pj-flow にマイグレ」「pj-flow の挙動を直したい」「pjflow」。Claude Code / Codex Agent Skill 両対応。
Create publication-safe redacted images from screenshots or other images that contain internal, private, or company-specific text. Use when the user asks to mask, redact, hide, anonymize, or sanitize sensitive information in an attached/local image, especially when they want selective text masking, public-release screenshots, article images, or iterative "消しすぎ/もっと隠して" adjustment. Always prefer writing a purpose-built script for the specific image before running ffmpeg/ImageMagick, rather than manually guessing rectangles.
Codex CLI (codex exec) を直接呼び出して rescue（診断・修正）、review（差分レビュー）、adversarial-review（敵対的レビュー）のいずれかを実行する。ユーザーが明示的に /codex-exec、codex-exec、「codex に投げて」「codex でレビュー」「codex rescue」等と呼んだときだけ発動する。会話コンテキストに codex 的ニュアンスが出ただけでは自動起動しない。