Communitygithub.com

taste

ライブのWebアプリのUIを監査・修正し、変更前後のレポートを生成するスキルです。

taste とは?

tasteは、開発中のWebアプリケーションのUIを監査・クリーニング・改善するためのツールです。指定されたモード(修正、クリーンアップ、改善、編集、作成)とTier(A/AA/AAA)に基づいて、各ビューのスクリーンショットを取得し、ルールベースの指摘事項(ソースファイルと行番号付き)を生成します。その後、元のリポジトリを直接変更せずに、独立したブランチを持つクローンリポジトリに修正を適用し、before/afterレポート(HTML)を出力します。各指摘事項はUX/DX/AXへの影響を評価され、悪化するものは自動的に却下されます。ノイズベースのガード機構により、元のアプリの動的要素による誤検出を防ぎます。Stageshowスキルと連携して、クリーンアップ後のUIを製品ショーケースに利用することもできます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/madebyjred-sudo/taste/tree/HEAD/skill

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

taste は何をしますか?

ライブのWebアプリを監査(ビューごとのスクリーンショット、ソース付きの指摘事項、Tierスコア)し、独立したブランチを持つクローンに修正案を生成、before/afterレポートを作成します。分析対象のリポジトリには決して書き込みを行いません。

使用すべきタイミング

  • 開発サーバーがあるリポジトリのインターフェースのレビュー、クリーンアップ、修正、改善を依頼された場合。
  • 実際のリポジトリに反映する前に、UI変更のビジュアルテストを行いたい場合。

プロファイルとワールド

  • perfiles/REPO.json (tasteリポジトリ内): mundo (shift | personal)、perfil (libre | estricto)、url、arranque、lecturas_permitidas (読み取りのみを行うPOSTリクエストの{metodo, ruta}リスト。それ以外はブロックされます)、previo ({nombre, puerto, comando}: サーバー起動前に必要な設定。例: 開発データベースへのSSHトンネル。tasteはポートが閉じている場合にトンネルを開き、自身が開いたもののみを閉じます)、entorno (サーバー用の追加変数。定期的なバッチ処理など、書き込みを行うバックグラウンドジョブを無効化します)。
  • 1回の実行では、biblioteca/externaと自身のワールドのライブラリのみを読み取ります。他のワールドのライブラリは読み取りません。
  • 厳格モード (estricto、クローズドブランドのクライアント製品向け): トークン、ブランド、部品を決して変更しないでください。

Tier

A (最小限)、AA (デフォルト、A + AA)、AAA (すべて)。Tierのスコアは、そのTierとそれより下位のTierの指摘事項を使用します。

5つのモード

モード説明
correccionレイアウトや部品を変更せずに指摘事項を修正します
limpieza削除のみ行います: スローガン、ヘルプテキスト、セカンダリラベル、重複、デッドスタイル。vos形をtú形に変更し、emダッシュを除去します
mejora現在のスキーム内で磨き上げます
edicion--pedido TEXTO で指定された内容のみを実行します
creacionライブラリから新しい画面またはコンポーネントを作成します

エンドツーエンドの流れ

  1. taste MODO --repo RUTA --tier AA [--solo VISTA] [--agente ninguno|claude] [--pedido TEXTO] 監査を実行し、ビューごとに paquete/VISTA.md を作成し、CORRIDA/arbol に taste/YYYYMMDD-HHMM-MODO ブランチでクローンを作成し、CORRIDA/TAREA.md を作成します。--agente ninguno を指定すると、エージェントに貼り付けるためのフレーズが出力されます。
  2. TAREA.md と各パッケージ(スクリーンショット、ファイル:行番号付きのルールベースの指摘事項、適用されるルール、インスピレーション、同じパターンのコンポーネント)を読み取ります。
  3. CORRIDA/criterios.json を作成します: 各指摘事項、または同じルールのグループに対して1つのエントリ。各エントリには、regla (reglas.jsonのID、または inspo:ID)、criterio (命令形のフレーズ)、por_que (ファイル:行番号のソース付き)、ux、dx、ax (mejora | igual | empeora + 5単語)、accion、componente、archivos、estado、motivo_descarte が含まれます。
    • UX、DX、またはAXを悪化させるものは却下されます (tasteが強制します)。
    • クリーンモード (limpieza) では、quitar 以外はすべて propuesto になります。
  4. ツリー内で aplicado ステータスのもののみを適用し、各基準またはグループに対して1つのコミットを作成します。プッシュは行いません。
  5. ツリーの型チェックを実行します (tsconfig がある場合は npx tsc --noEmit)。
  6. taste comparar --corrida CORRIDA: ツリーをポート+1で起動し、同じビューを繰り返し、capturas/despues にスクリーンショットを撮り、再検出、ガードの実行、informe.html の生成を行います。

ベースノイズ

監査は各ビューを同じツリー上で2回キャプチャし、vista.ruido にビューが単独でどれだけ変化するか(動的データ、時計、遅延読み込み)を記録します。ガードはこのノイズを、変更されていないビューの0.5%の上限に加算します。--sin-ruido を指定するとスキップされます(実行速度は約2倍になりますが、ガードが必要以上に厳しくなります)。各キャプチャは新しいブラウザコンテキストを使用します。クリックによって残された状態(localStorageの折りたたみバーなど)は次のビューに引き継がれません。

レポートの読み方

  • 上部: Tierごとのグローバルスコア (before、after、デルタ)。デルタ付きのビューインデックス。
  • ビューごと: デスクトップとモバイルのbefore/after、各基準 (ルール、ソース、ux/dx/ax、ステータス)。
  • ガードが no ok、またはデルタが負の値: ブランチを取り込まないでください。理由を確認してください。
  • ブランチの取得: git fetch CORRIDA/arbol BRANCH_NAME

シーン: 製品の表示 (Stageshow)

Tasteは実際のアプリをクリーンアップします。表示するため (ランディングページのヒーロー、フィーチャーカード、アニメーションデモ) には、Benji Taylorの stageshow スキルをそのまま、Tasteのルールを追加で適用して使用します。これは別のコマンドではありません。

  • デフォルトのフレーム: gold finder-glass (シーン860x440、ウィンドウ40/40/780/480で下部がはみ出し、コンパクト400x340、ウィンドウ20/20/460/400で右と下部がはみ出し、角丸14、3層の背景をブランドカラーに変更)。ジオメトリとキャプチャ: biblioteca/externa/golds/marco-finder-glass.md。
  • 構築前に、テストセッション (読み取り専用) で実際のアプリをキャプチャし、CSSトークンを取得します。
  • 承認されたシーン = ワールド固有のgold。biblioteca/<mundo>/escenas/ にあります (2つ目の作業ワールドの場合は TASTE_BIBLIOTECA_SHIFT にも)。
  • リハーサル: Stageshowの film.mjs --gate は参考であり、最終判定ではありません (自身のgoldでも半分は合格します)。
  • Tasteでクリーンアップした後、シーンはクリーンアップされた画面上に構築されます: まず製品、次にその表示方法。

注意点 (Trampas)

  • ビューがエラーになった場合は、vista.error を確認してください: bloqueada POST /api/... は、lecturas_permitidas にないPOST読み取りを示します (コードを読んで書き込みがないことを確認した場合のみ追加してください)。500 は通常、データベースまたはトンネルのダウンが原因です。previo の注記を corrida.notas で確認してください。
  • ツリーは元の node_modules をリンクしています。ツリーに依存関係をインストールしないでください。

関連スキル