AIに自分の画面を審査させるスキル better-interface を読んだ。自分では何も決めず、6人の専門家に順に回すだけだった

AIに画面を作らせたあと、「何となく変だけど、どこがなのか分からない」で止まることがあります。jakubkrehel さんのスキル集 better-* は、その「どこが」を、場所つきの表にして返してくる審査役でした。

9月26日の最初の記事では、7つの中の1つとして軽く触れただけでした。今回はこのスキル集だけを、GitHubの本体と、Macに入れてある写しの両方で読み直しています。

★は10月15日に測って7,928。9月26日は7,175だったので、19日で753増えています。ライセンスはMIT、最後に更新されたのは10月13日でした。

リポジトリには14個のスキルが入っています。README にあるのは、better-interface、better-ui、better-typography、better-colors、better-accessibility、better-layout、better-writing の7つの better-* と、PR を見る interface-review、壊れ方を試す break、Figma から作る build-design など。今回は、見た目を審査する better-* を中心に読みました。

いちばん面白かったのは、一番上の better-interface が、自分では規則をひとつも持っていないことです。SKILL.md には、指揮だけが自分の仕事で、アクセシビリティの規則は better-accessibility のもの、と書いてあります。他のスキルの規則を重ねて書くことも、上書きすることも禁止。

回す順番は決まっていて、アクセシビリティ、レイアウト、文言、文字、色、部品の磨き、の順です。土台の失敗が、見た目の細かい話に埋もれないように、とあります。

指摘は1件ごとに、ファイルと行番号と、今の書き方を引用します。指摘は全部で15件まで。水増しはしない、と書いてあって、「短くても本物の点検のほうが、長くて見せかけの報告よりよい」。

重さは HIGH・MEDIUM・LOW の3段。そして、見つけた時点で必ず HIGH にする項目が13個あります。一部を並べます。

最後は Block か Approve の二択。HIGH が1つでも残れば Block。点検していない領域に Approve を出してはいけない、とも書いてあります。ソースは書き換えず、指摘を表で返すだけです。

直し方の提案にも順番があって、「消す」「標準の部品を使う」「今あるトークンを使う」「値を直す」「足す」の5段。足す前に、消せないかを先に考えさせる作りです。

それぞれのスキルには、規則が数字つきで書いてあります。拾えたものを並べました。

ここで一つ、恥ずかしい発見がありました。Macに入れてある better-* を、GitHubの今の版と比べたら、7つ全部が違っていたんです。

手元は8月末のコミット（267330e）で、入れた9月26日には最新でした。ところがその後、GitHubでは28コミット進んでいました。

増えた中身を見出しで比べると、審査の基準そのものが変わっています。better-accessibility には「基準で指摘する」という節が加わりました。指摘には WCAG 2.2 のAまたはAAの番号か、支援技術を使う人が実際にできなくなる作業を書くこと。44pxという目安は「おすすめ」であって、指摘にはしない、と。

better-ui には、「入力のたび・行のホバー・タブの切り替えにはアニメーションを付けない」「ホバー専用の見た目は hover が使える端末だけに」といった節が増えています。古い版を回していたら、私が見ていたのは、古い基準の審査でした。

入れ直しは、まだしていません。やったら、同じ画面で指摘が変わるかを書きます。

各スキルの末尾には、「この書き方を見つけたら直す」という検出の表があります。そのうち3つを、このサイトのコード（app・components・lib の321ファイル）に grep で当てました。スキルを回したわけではなく、ただ数えただけです。

ここから先は、慎重に読んでください。この数字は「候補」で、実際に指摘になるかは、中身を見ていないので分かりません。outline-none は、横に focus-visible で別の輪を付けていれば問題になりません。

ただ、面白いのは scale の19行です。次の記事の Emil Kowalski さんのスキルは、押したときの縮みは0.95〜0.98ならよいとしています。同じ19行が、better-ui では直す対象で、あちらでは問題なし。どちらの基準で審査するかで、結果が変わります。

1つは日本語です。better-* の SKILL.md 7本と、Mac側の better-typography の資料のどこにも、日本語や CJK を指す語は0件でした。このサイトのブログまわりのコードには、行間を leading-[1.7] から [1.95] にしている所が合わせて8か所あります（うち [1.7]・[1.8]・[1.85] が6か所）。本文は1.5〜1.6、というスキルの範囲の外です。1行60〜75文字も、欧文の数え方だと思いますが、日本語でどう読むかは書いてありません。

もう1つは動きです。better-accessibility は、視差効果を減らす設定のときは、視差と自動再生を完全に止めろ、と書いています。うちは「視差効果を減らす」がオンでも動きを止めず、ちらつきや点滅だけを外す方針にしています。ここは従いません。

審査役は「ここがおかしい」と言うだけなので、作る側のスキルと違って、ぶつかっても採るものを選べます。入れるなら、作るためではなく、作ったあとに回す用です。

README に書いてある入れ方は2通りです。

SKILL.md を一度読んでから入れてください。★は安全の保証ではありません。

better-interface を、このサイトの実際の画面に回して、指摘の表を出すところまでは、まだやっていません。数えたのは検出の表の3項目だけです。

指摘は15件までという上限が、大きな画面で足りるのかも分かりません。better-writing は日本語の文言をどこまで見られるのかも、まだ試していません。

次は、Emil Kowalski さんの動きのスキルです。これまでの記事はAIに入れる便利なSkillsに、ほかの開発の話はブログにあります。「このスキルを試してほしい」というものがあれば、お問い合わせから教えてください。