mcpField
T
tauri-app-frontend-selection

tauri-app-frontend-selection

github.com/full-stack-skills開発22473 回インストール4 週間前に更新
リポジトリ

tauri-app-frontend-selection について

Tauri v2 のフロントエンド選定と初期設定を支援するスキルです。SSR や静的エクスポートの要件を整理し、フレームワーク選択とアセット読み込み先の調整を案内します。

主な機能

  1. 01SSR と SSG の要件整理
  2. 02フロントエンドフレームワークの推奨
  3. 03静的エクスポートの設定
  4. 04出力先と Tauri アセットの対応付け

活用シーン

  1. 01Tauri v2 アプリのフロントエンド選定
  2. 02静的エクスポートとアセットパスの設定

インストール

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

$npx skills add https://github.com/full-stack-skills/tauri-skills --skill tauri-app-frontend-selection

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

LICENSE.txt
agents/
openai.yaml
examples/
usage.md
templates/
basic.md
capabilities.json

詳細

このスキルを使用するタイミング

ユーザーが次の内容に言及した場合は、必ずこのスキルを使用してください。

  • Tauri v2 のフロントエンドフレームワークの選定
  • Tauri の SSG または静的エクスポートの設定
  • Vite と SSR フレームワークの比較検討

次のようなフレーズがトリガーになります。

  • 「フロントエンドの選定」、「Vite」、「Next.js」、「Nuxt」、「SvelteKit」、「SSG」、「静的エクスポート」
  • 「フロントエンドフレームワークの選定」、「静的エクスポート」、「SSG」、「Vite」、「SSR」

このスキルの使用方法

  1. SSR、SSG、静的エクスポートの要件を確認します
  2. SSR が必要な場合を除き、デフォルトで Vite を推奨します
  3. Next.js、Nuxt、SvelteKit、Qwik、Trunk の静的エクスポート設定を提示します
  4. 出力パスが Tauri のアセット読み込みと一致するようにします

出力

  • フレームワークの推奨とその理由
  • 静的エクスポート設定のチェックリスト

対象範囲

  • 境界：フロントエンドフレームワークの選定と初期化
  • 要点：静的エクスポートの設定と出力ディレクトリのマッピング

参考資料

キーワード

Tauri フロントエンド、Vite、Next.js、Nuxt、SSG、静的エクスポート

よくある落とし穴（Gotchas）

  1. バージョンの互換性：フレームワークのバージョンと依存ライブラリの互換性に注意してください。バージョンによって API が異なる場合があります。
  2. 設定ファイルの形式：設定ファイルの形式の誤りは最もよくある問題です。エディターの構文チェックを使用することをおすすめします。
  3. 環境変数：必要な環境変数がすべて正しく設定されていることを確認してください。機密情報をハードコードしないでください。
  4. 依存関係の競合：複数のバージョンが共存する場合は、依存関係の競合に注意し、lock ファイルを使用してバージョンを固定してください。
  5. パフォーマンスの落とし穴：大量のデータを扱う場合は、パフォーマンスの最適化に注意し、N+1 クエリなどのよくある問題を避けてください。

使用手順

Step 1: 環境の準備

開発環境に必要な依存関係とツールがインストールされていることを確認します。

Step 2: 初期設定

プロジェクトの要件に応じて基本設定を行います。

Step 3: コア機能の使用

サンプルコードに従ってコア機能を実装します。

Step 4: テストと検証

テストを実行し、機能が正常に動作することを確認します。

Step 5: デプロイ

開発が完了したら、デプロイと監視を行います。

コメント

Markdown 対応