mcpField
L
lavish-axi

lavish-axi

github.com/kunchenguidドキュメント4.3k46 回インストール今日更新
リポジトリ

lavish-axi について

lavish-axi は、エージェントがインタラクティブな HTML をブラウザー上のレビュー画面にするためのスキルです。注釈、プロンプトのキューイング、フィードバックの取得に対応します。

主な機能

  1. 01HTML のレビューセッション
  2. 02要素やテキストへの注釈
  3. 03プロンプトのキューとフィードバック取得
  4. 04成果物向けプレイブック

活用シーン

  1. 01技術計画への意見収集
  2. 02インタラクティブな試作のレビュー
  3. 03ビジュアルレポートへの注釈

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/kunchenguid/lavish-axi --skill lavish-axi

インストール後、Claude Code で/lavish-axiを入力して読み込まれたか確認します。

詳細

Lavish Editor

Lavish Editor を使うと、エージェントはリッチな HTML 成果物を、人が共同でレビューできる画面に変換できます。リッチでインタラクティブなページを使うと理解しやすくなる複雑な回答をユーザーに提示する場合は、Lavish Editor の利用を検討してください。まずユーザーのリクエストに沿ったインタラクティブな HTML 成果物を生成し、次に npx -y lavish-axi <html-file> を実行します。ユーザーは内容を視覚的に確認し、要素や選択したテキストに注釈を付け、プロンプトをキューに追加して、npx -y lavish-axi poll を通じてフィードバックを返せます。

lavish-axi をグローバルにインストールする必要はありません。npx -y lavish-axi <html-file> で実行してください。 lavish-axi の出力に lavish-axi で始まる後続コマンドが表示された場合は、代わりに npx -y lavish-axi ... として実行してください。

使用する場面

ユーザーがビジュアル成果物、HTML による解説、インタラクティブなプロトタイプ、レビュー画面、製品または技術計画、比較、レポート、ブラウザーを使ったフィードバックループを求めた場合は、lavish-axi を使用してください。

ワークフロー

  1. HTML 成果物を作成します(デフォルトの保存先は作業ディレクトリ内の .lavish/<name>.html です)。
  2. npx -y lavish-axi <html-file> を実行し、ブラウザーでレビューセッションを開始または再開します。
  3. npx -y lavish-axi poll <html-file> を実行し、ユーザーの注釈やキューに追加されたプロンプトをロングポーリングで取得します。
  4. フィードバックを反映し、次に --agent-reply "<message>" を付けて再度ポーリングし、ブラウザーで返信してやり取りを続けます。
  5. レビューが完了したら、npx -y lavish-axi end <html-file> を実行します。

ビジュアルの指針

  • 最も重要な判断事項、リスク、トレードオフ、次のアクションがひと目でわかるよう、視覚的な階層を使います。
  • 長い文章ではなく、セクション、カード、表、図、注釈付きのコード例、並列比較などの視覚的な構成を活用します。
  • タイポグラフィ、余白、色、レイアウトを意図的に選び、成果物に明確な方向性を持たせます。
  • 水平方向のはみ出しを防ぎます。狭い画面を意識してレイアウトを設計し、グリッドやフレックスの子要素には minmax(0, 1fr) と min-width: 0 を使い、長いラベルやステータステキストは適切に折り返すか、省略表示します。

プレイブック

以下のいずれかについて、焦点を絞った詳細なガイダンスを確認するには、npx -y lavish-axi playbook <id> を実行します。

  • diagram - 関係、フロー、状態、アーキテクチャを図にする
  • table - 密度の高い情報を、ひと目で確認できるレビュー画面にする
  • comparison - 選択肢、トレードオフ、現状と目標の動作を示す
  • plan - 実装前に製品または技術計画を説明する
  • diff - コードや PR の変更点を根拠と調査結果とともに提示する
  • input - 判断事項、選択肢、好み、トリアージ、スコープ、その他の構造化されたフィードバックを成果物内でユーザーから収集する必要がある場合に使用します
  • slides - スライドが求められた場合に、意図を持ってプレゼンテーションを作成する

コマンドとルール

  • npx -y lavish-axi <html-file> を実行して、Lavish Editor のセッションを開始または再開します
  • ユーザーが別の場所を指定しない限り、HTML の成果物は現在の作業ディレクトリ内の .lavish/ に作成します
  • Lavish はローカルの express.js サーバーを通じて HTML ファイルを配信します。HTML から画像、CSS、フォント、ローカルスクリプトなど、ほかのファイルシステム上のアセットを参照する必要がある場合は、それらを HTML ファイルと同じディレクトリにコピーし、そのディレクトリからの相対パスで参照します。アセットのパスの先頭に / を付けないでください。ルートパスは機能しません
  • npx -y lavish-axi poll <html-file> を実行して、ユーザーからのフィードバックを待ちます
  • npx -y lavish-axi end <html-file> を実行して、セッションを終了します
  • npx -y lavish-axi stop を実行して、バックグラウンドサーバーを停止します(アイドル状態になったとき、または接続中のクライアントがいない状態で最後のセッションが終了した後にも、自動的に停止します)
  • npx -y lavish-axi playbook <playbook_id> を実行して、成果物に特化したガイダンスを確認します
  • Lavish はデザインシステムを自動で挿入しません。成果物はポータブルな状態に保たれるため、lavish-axi を実行せずに直接開いても同じように表示されます。デザインシステムは次の優先順位で選択してください:(1)ユーザーが特定の外観やデザインシステムを指定した場合は、それに従います。(2)指定がない場合、現在のプロジェクトにデザインシステムやスタイルの規約がすでにあれば、それに合わせて成果物をプロジェクトに馴染ませます。(3)それ以外の場合は、CDN から利用できる Lavish 推奨の Tailwind CSS ブラウザーランタイム v4 と DaisyUI v5 を優先します。コピーして使える CDN スニペットとコンポーネントのリファレンスは、npx -y lavish-axi design を実行すると確認できます。ユーザーから明示的な指示がない限り、スタイルを手書きするより、この CDN スニペットを優先してください
  • ユーザーがビジュアル成果物、HTML の解説、インタラクティブなプロトタイプ、レビュー用画面、製品または技術の計画、比較、レポート、あるいはブラウザー上でのフィードバックループを求めた場合は、lavish-axi を使用します

コメント