mcpField
V
vue-frontend-expert

vue-frontend-expert

github.com/caomeiyouren開発12107 回インストール今日更新
リポジトリ

vue-frontend-expert について

MomeiBlog の開発者向けに、コンポーネント、スタイル、ローカライズ、プロジェクトの UI 規約を扱う Vue フロントエンドスキルです。レスポンシブ対応やダークモード、ページ単位の SEO メタデータを案内します。

主な機能

  1. 01Vue Composition API のパターン適用
  2. 02BEM による疎結合な SCSS 作成
  3. 03i18n による UI テキスト管理
  4. 04PrimeVue コンポーネントの利用
  5. 05ダークモードとレスポンシブ対応
  6. 06ページ単位の SEO メタデータ追加

活用シーン

  1. 01ローカライズ対応の記事カード作成
  2. 02インラインスタイルを避けた Vue コンポーネントの実装
  3. 03SEO メタデータ付きレスポンシブページの構築

インストール

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

$npx skills add https://github.com/caomeiyouren/momei --skill vue-frontend-expert

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

詳細

Vue フロントエンドエキスパートスキル（Vue フロントエンドエキスパートスキル）

能力（Capabilities）

  • Composition API：一貫したパターンで <script setup lang="ts"> を記述します。
  • SCSS BEM：BEM（Block Element Modifier）の命名規則に従い、高度に疎結合なスタイルを記述します。
  • I18n 駆動：$t() または useI18n() の使用を必須とします。
  • PrimeVue の活用：プロジェクトの UI コンポーネントライブラリを使いこなします。
  • ダークモード対応：ダークモードに適応するスタイルを記述します。

指示（Instructions）

  1. スタイル規約：インラインスタイルと !important の使用を固く禁じます。グローバル変数と Mixins を必ず参照してください。
  2. レスポンシブデザイン：コンポーネントがモバイルとデスクトップの両方で正常に動作することを確認してください。
  3. SEO 最適化：ページレベルのコンポーネントには useHead または definePageMeta を必ず含めてください。
  4. UI テキスト：中国語または英語のハードコードは禁止です。

使用例（Usage Example）

入力：「記事カードコンポーネントを作成してください。」 動作：article-card.vue を作成し、BEM を使って SCSS を記述して、タイトルとボタンに i18n キーを設定します。

コメント

Markdown 対応