mcpField
Q
quasar-foundation

quasar-foundation

github.com/heyeddi-comデザイン・UI015 回インストール2 日前に更新
リポジトリ

quasar-foundation について

アプリのシェル、レスポンシブなナビゲーション、タッチ操作、モバイルやデスクトップのビルド対象を扱う Quasar デザインスキルです。Vue アプリの枠組みを設計するチーム向けで、データコンポーネントやカラートークンは別のスキルに委ねます。

主な機能

  1. 01レスポンシブなアプリフレーム
  2. 02スワイプ対応のサイドナビゲーション
  3. 03モバイルのタッチ操作
  4. 04Capacitorとデスクトップのビルド対象
  5. 05コンポーネントの責務に関する指針

活用シーン

  1. 01ヘッダーやドロワーを含むアプリシェルの構築
  2. 02プルツーリフレッシュやスワイプタブの追加
  3. 03モバイル用ボトムシート操作の作成
  4. 04CapacitorやTauriのビルド設定

MCP 対応

Quasar MCP サーバーに接続している場合、コンポーネントのプロパティをそこで確認するよう案内します。設定については @vue-design-system を参照します。

インストール

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

$npx skills add https://github.com/heyeddi-com/heyeddi-skills --skill quasar-foundation

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

同梱ファイル

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

manifest.json
reference.md
context/
ANTI_PATTERNS.md
EXAMPLES.md
PROSE_ANTI_SLOP.md
VOCABULARY.md
scripts/
_skill_cli.py
README.md

詳細

Quasar Foundation

Capacitor（モバイル）および Tauri または Electron（デスクトップ）向けのレスポンシブなアプリケーションフレーム、モバイルのタッチジェスチャー、ドロワー操作、プラットフォームラッパーです。

このスキルだけが開かれた場合は、最初に @vue-design-system を読み込んでください。データグリッド、複雑なピッカー、メニューは @primevue-aura の範囲です。カラーは @aura-design-tokens の範囲です。モーションは @motion-physics の範囲です。

エージェントがこのスキルを有効にする場合

  • ヘッダー、フッター、レスポンシブなサイドドロワー、ページコンテナーなど、アプリケーションの足場を定義するとき。
  • プル・トゥ・リフレッシュ、スワイプ可能なタブ、ボトムシートが必要な、タッチ操作を優先するモバイルレイアウトを作成するとき。
  • マルチプラットフォームのターゲットビルド（quasar build -m capacitor、quasar build -m tauri）を設定するとき。

インストール

npm install quasar @quasar/extras
npm install -D @quasar/vite-plugin

Vite と main.js の読み込み順序を含むハイブリッド設定については、@primevue-aura を参照してください。Quasar のコア CSS を最初に読み込みます。Quasar コンポーネントで PrimeVue のデータコンポーネントを置き換えないでください。

コンポーネントの責務

Quasar は次のプリミティブに限って使用してください。

コンポーネントのカテゴリQuasar のプリミティブ理由
レイアウトフレーム<q-layout>、<q-page-container>、<q-page>ビューポートの計算とネイティブのセーフエリア処理を自動で行います。
サイドナビゲーション<q-drawer>タッチスワイプ、レスポンシブなブレークポイント、ミニモードの切り替えを標準で備えています。
アプリケーションバー<q-header>、<q-footer>、<q-toolbar>手動の CSS なしで、固定位置とエレベーションを処理します。
モバイル操作<q-bottom-sheet>、<q-fab>、<q-pull-to-refresh>ハードウェアに最適化されたタッチリスナーです。

手順

  1. 対象がシェル、ドロワー、バー、またはモバイルジェスチャーであることを確認してください。テーブル、ツリー、セレクト、メニューの場合は、作業を中止して @primevue-aura を読み込んでください。
  2. <script setup> と上記のプリミティブを使用してください。生の div と固定位置指定でシェルを再現しないでください。
  3. ブランドカラーには --q-primary を使用します。これは @aura-design-tokens によって PrimeVue に橋渡しされます。Quasar のパレットを 16 進数で別途設定しないでください。
  4. シェルができたら、表示時と押下時のフィードバックに @motion-physics を読み込んでください。
  5. Quasar MCP サーバーに接続されている場合は、プロパティを独自に推測する前に、そこでコンポーネントのプロパティを確認してください。設定については @vue-design-system を参照してください。

タスクが完了したら：次に使うスキルを提案する

このスキルに関するユーザーの依頼を完了したら、次に実行する内容を提案してください。

  1. 次を実行します。

    python .agents/skills/heyeddi/scripts/suggest_next_skill.py --current-skill quasar-foundation --project-root .

  2. スクリプトの ### Next step ブロックを、最終回答に含めてください。

コメント

Markdown 対応