good-css スキルで AI 生成 UI のスマホ崩れを点検させる

押したあと色が残るボタン、指で押しにくいアイコン、必須欄が開いた瞬間全部赤い、など AI 任せ UI の典型を洗い出す。

手順

1. 導入: npx skills@latest add vojtaholik/good-css（プラグインと二重に入れるとスキルが2つになるので片方だけ）
2. 直し方の例（効く順に並べさせる）
   • 押したあとも色が残る → (hover: hover) and (pointer: fine) の中へ移す
   • 開いた瞬間に必須欄が全部赤い → :user-invalid に替える
   • ページ内リンクで見出しが固定メニューの下に隠れる → scroll-padding
   • アイコンボタンが小さい → 見た目を変えず押せる範囲だけ 44px まで広げる
3. 点検の頼み方: 探すのは「スマホで壊れる所・スクリプトで作り込んだ所・細かい所」の3種類。最後に「先に一覧を見せて、コードはまだ変えないで」

注意点

• リポジトリ: github.com
• メニューから新ページにたどり着けるかも別途確認する
• 関連: UI 生成は「トークン名」より「使用例」を見せる（golden set） ／ UI は「画像モック→承認→Issue→並列実装」の順で作らせる

出典

• @sumika45379 · 2026-10-13