Stock UI 監査
生成されたインターフェースやスターターキットのインターフェースには、共通した見た目があります。インディゴまたはバイオレットのアクセント、紫から青へのヒーローグラデーション、あらゆる場所でのInter、すりガラスカード、ナビ内の絵文字など。これら自体は間違っていません。問題は、プロダクトから来た選択ではなく、テンプレートに付属した選択であることです。このスキルは、静的スキャナーでそれらの選択を見つけ、判断によって分類します。スキャナーが候補を生成し、トリアージのみが結果を生み出します。
このスキルは、選ばれていないデフォルトを削除します。ブランドを発明するものではありません。プロダクトにまだビジュアルの方向性がない場合は、そのように伝え、デフォルトを別のデフォルトに置き換えるのではなく、方向性を求めてください。
スキャンの前に
- ブリーフ、デザイントークン、テーマまたはコンポーネントライブラリの設定を読んでください。プロダクトが要求したすべての色、フォント、コンポーネントをメモします。これらは、スキャナーがフラグを立てた場合でも保持されます。
- リクエストからモードを決定します。
- Review: 結果のみを報告します。何も編集しません。
- Cleanup: 確認された結果を修正し、ユーザーが指定した範囲（ページ、コンポーネントフォルダ、アプリ全体）内のみに限定します。範囲外で気付いたことは、修正せずに報告します。
- スキャン範囲を選択します。UIをレンダリングするソースフォルダであり、リポジトリ全体ではありません。
スキャナーの実行
bun <this skill's directory>/scripts/scan.mjs [--json] [--fail-on high|medium|low] <paths>...
Node 22以降でも動作します。ディレクトリを走査し、依存関係、ビルド、カバレッジの出力、および圧縮ファイルをスキップし、.html .css .scss .js .ts .jsx .tsx .vue .svelte .astroを読み取ります。スキャンしたファイル数を出力します。終了コード0は、重大度のしきい値（デフォルトはhigh）に達したものがなかったことを意味し、1は達したものがあったこと、2は使用方法が間違っているか、スキャンしたファイルがゼロであることを意味します。2は決してクリーンな結果ではありません。バイオレットアクセント、単一のストックフォント、または絵文字アイコンで実行を失敗させる必要がある場合は、--fail-on mediumを渡してください。明示的に要求されない限り、スキャナーをCIゲートとして追加しないでください。
| ルール | 重大度 | 検出対象 |
|---|---|---|
purple-blue-gradient | high | すべてのストップがクールな色相で、少なくとも1つがバイオレットを含むグラデーション（CSSまたはTailwindの from-/to- クラス内） |
violet-accent | medium | 計算された色相がインディゴからパープルの範囲に収まる hex, rgb, hsl, oklch または bare HSL トークン、および Tailwind の indigo/violet/purple クラス |
gradient-text | medium | background-clip: text および bg-clip-text |
single-stock-font | medium | スキャンセット内の2つ以上の宣言で唯一の名前付きフォントとして使用されている1つのストックサンセリフ（Inter、Roboto、Poppinsなど） |
emoji-icon | medium | 見出し、ボタン、リンク、ナビアイテム、または icon/label/title フィールド内の絵文字 |
neon-glow | medium | ゼロオフセットで広いぼかしの影が彩度の高い色で使われているもの、および Tailwind の色付き影 |
frosted-glass | low | backdrop-filter: blur() および backdrop-blur |
library-default-token | low | Bootstrap、Material、MUI、Ant Design、Chakra、shadcn/ui、Viteスターターからの未変更のデフォルトプライマリ |
tracked-caps | low | 広い文字間隔の大文字テキスト |
フォントルールは1回の実行ですべてのファイルを横断してチェックするため、UIスコープ全体をまとめてスキャンしてください。ファイルを1つずつスキャンすると非表示になります。
すべての一致をトリアージする
フラグが立てられた各行を開き、その要素が何のためのものかを確認するのに十分な周辺を読んでください。各一致には、正確に1つの判定を下します。
- 未選択のデフォルト: ブリーフ、トークン、履歴のいずれもそれを要求しておらず、スターターテンプレートのように見えます。これは結果です。
- 意図的な選択: ブリーフ、トークンファイル、ブランドガイド、またはコミットメッセージが誰かがそれを選んだことを示しています。それを保持し、証拠を記録します。
- 誤検出: 一致がルールが想定する動作をしていません。例えば、シンタックスハイライトテーマ内のバイオレット色相、コンテンツが多いモーダルの背景のぼかし、またはユーザー生成のサンプルデータ内の絵文字など。そのままにし、理由を説明します。
- 未解決: 誰かがそれを選んだかどうか判断できません。結果ではなく、何も変更しません。不足しているものと、それを解決する質問を報告します。
実際の問題の修正
- 行ではなく原因を修正します。5つのバイオレットの16進数は通常、1つのアクセントトークンが欠けていることを意味します。プロダクトのパレットとタイポグラフィを一度定義し、コンポーネントをそれを指すようにします。
- コンテンツに役立つ代替案を選択します：保持されるコントラスト、重要なアクションを示すアクセント、読み込み負荷に適したタイプ。
- スキャナーの範囲を外れるように値を微調整しないでください。例えば、色相を数度シフトしたり、16進数を同等の
oklch()に置き換えたりすることです。色が間違っているなら変更します。正しいならそのままにし、理由を記録します。 - スキャンを通過させるために、ブランドカラー、ステータスカラー（成功、警告、エラー）、またはフォーカスインジケーターを変更しないでください。これらは意味を持ちます。意図的なものとして記録します。
- 絵文字アイコンは、プロジェクトの既存のアイコンセットに置き換えます。ユーザーが同意した場合にのみ、新しいアイコン依存関係を追加します。
スキャナーが見られないもの
レンダリングされたページを読んでこれらを確認してください。パターンマッチでは見つかりません。
- すべて同じ中央揃えの見出し、サブタイトル、2つのボタンで構成されたセクション
- 各カードにアイコン、タイトル、テキスト行がある3カードフィーチャーグリッド
- メイン見出しの上にある小さなバッジまたはピル
- 太い色付きの左ボーダーでマークされたカード
- 大きな数字の統計バナー（「10k+ users」「99.9% uptime」）
- 番号付きの「1, 2, 3」ステップセクション
- ブリーフが要求したライトオプションなしで強制されたダークテーマ
- すべての表面で同じ大きな角丸とソフトシャドウ
- プロジェクトのスケールを無視したスペーシングとタイプサイズ
- どのプロダクトでも説明できるコピー
検証
- 同じスコープでスキャナーを再実行し、残った各一致に記録された判定があることを確認します。
- 重要なサイズ（狭いスマートフォン幅と少なくともデスクトップ幅）で、プロダクトが出荷するすべてのテーマでレンダリングされたUIを確認します。
- クリーンなスキャンは、アクセシビリティ、レイアウト、全体的な品質については何も述べていません。変更したもののコントラストとフォーカス状態を確認します。
UIをレンダリングできなかった場合は、レビューは静的なもののみであったと言います。
レポート
レポートは次の順序で記述します。
- スキャン範囲、スキャンしたファイル数、モード、スキャナーの終了コード。
- 修正された結果（またはレビューモードでは提案された結果）。それぞれ
file:line、ルール、置き換えた内容を含めます。 - 意図的なものとして保持された一致。それぞれの証拠を含めます。
- 未解決の一致。それぞれ不足しているものとそれを解決する質問を含めます。
- 誤検出。それぞれ理由を1行で説明します。
- スキャナーが見られない問題（見つかった場合）。
- 検証方法：再実行結果、表示したサイズとテーマ、または「静的のみ」。