better-ui(UIディテールの磨き上げ、正確な数値を提供)

Jakub Krehel のUI磨き上げスキル:エージェントに正確な数値のセットに従って角丸、影、画像の縁取り、ボタン押下時のスケール、出入りアニメーション、アイコン切り替えを確認・修正させ、最終的に深刻度別にファイル行番号付きの問題リストを出力し、Block または Approve の結論を示す。

Jakub Krehel のUI磨き上げスキル:エージェントに正確な数値のセットに従って角丸、影、画像の縁取り、ボタン押下時のスケール、出入りアニメーション、アイコン切り替えを確認・修正させ、最終的に深刻度別にファイル行番号付きの問題リストを出力し、Block または Approve の結論を示す。

セキュリティ監査:未監査

  • スキャン未実施

理由

  • ルールで直接数値を指定:入れ子になった角丸は外側 = 内側 + パディング + 境界線幅;押下時は 0.96、150ms の ease-out でスケールし、無効状態ではスケールしない;段階的な登場アニメーションは各ブロック間隔 100ms、4px のぼかしと 12px の変位を伴い、所要時間 300ms;アイコン切り替えにはバウンス係数 0 のスプリングを使用
  • 「検出 → 修正」対照表を添付:transition-all はプロパティを明示的に記述するように変更;box-shadow の縁取りリングのみで border がない場合は透明な border を追加(強制カラーモードでは影が除去されるため);ホバースタイルは @media (hover: hover) 内に配置
  • 変位、スケール、ぼかしアニメーションは prefers-reduced-motion: no-preference の場合のみ実行し、モーション低減設定時は不透明度のグラデーションに変更;アニメーションは唯一の状態フィードバックであってはならない
  • 役割分担が明確:タイポグラフィ、アクセシビリティ、レイアウト、色は同じリポジトリ内の better-typography、better-accessibility、better-layout、better-colors に委譲;README に MIT ライセンスを明記
  • skills.sh で 24 時間あたりのインストール数 450(注目度のみを示す)

使い方

  • インストールコマンドは監査合格後に表示;インタラクションが正常で視覚的な磨き上げやコンポーネントのレビューを行う際にトリガーされ、同じリポジトリの better-accessibility と一緒にインストールするのが望ましい(モーション低減の要件はそちらが担当)
  • アカウント不要;ブラウザがない場合はコードから各状態の所要時間とイージングを読み取り、ブラウザがある場合は Animations パネルで 10% 倍速で再生し、検証できない項目は Not verified とマーク

リスク

  • 本号では未監査のため、固定で C 級とし、インストールコマンドは表示しない;SKILL.md は純粋なテキストルールであり、スクリプトやネットワークリクエストはない;skills.sh 上の第三者監査3社すべて Pass
  • 数値は作者の固定された好み(0.96 は認めるが 0.95 は認めない)であり、既存のデザインシステムと競合する場合はプロジェクトの慣習を優先し、SKILL.md でもプロジェクトの一貫した做法は問題視しない旨が明記されている
  • 参照されている surfaces.md、animations.md などのレシピファイルは今回読み込まれていない

開く · リポジトリ

Best Skills 每日数据(LinklyAI / @BlueeonY,CC BY 4.0)

最新の AI ニュースを見る