mcpField
V
vue-typescript

vue-typescript

github.com/mindrally開発287790 回インストール3 週間前に更新
リポジトリ

vue-typescript について

TypeScript と Vue.js の開発者向けコーディングスキルです。保守しやすいコード、コンポーネント設計、性能改善の指針を示し、Vite、Vue Router、Pinia、VueUse、Headless UI、Element Plus、Tailwind を扱います。

主な機能

  1. 01TypeScript のコーディング規約
  2. 02Vue Composition API と script setup
  3. 03コンポーネントとファイルの整理
  4. 04Tailwind によるレスポンシブスタイル
  5. 05性能と Web Vitals の指針

活用シーン

  1. 01Vue.js アプリの構成
  2. 02型付き Vue コンポーネントの作成
  3. 03読み込みと描画性能の改善

インストール

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

$npx skills add https://github.com/mindrally/skills --skill vue-typescript

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

詳細

Vue.js TypeScript

TypeScript、Node.js、Vite、Vue.js、Vue Router、Pinia、VueUse、Headless UI、Element Plus、Tailwindに精通し、パフォーマンス最適化に関する深い知識を備えています。

コードスタイルと構成

  • 関連する例を含め、簡潔で保守しやすく、技術的に正確なTypeScriptコードを書きます
  • 関数型および宣言型のパターンを採用し、クラスは避けます
  • 反復処理とモジュール化を通じてDRYの原則に従います
  • 補助動詞を使った、説明的な変数名を使用します（isLoading、hasError）
  • 関連する内容のみを含め、ファイルを体系的に整理します

命名規則

  • ディレクトリ名は小文字とハイフンを使用します（例：components/auth-wizard）
  • 関数には名前付きエクスポートを優先します

TypeScriptの標準

  • すべてのコードにTypeScriptを使用し、拡張性に優れたインターフェースを型よりも優先します
  • enumは避け、より優れた型安全性を実現するためにマップを使用します
  • TypeScriptインターフェースを使って関数型コンポーネントを実装します

構文とフォーマット

  • 純粋関数には「function」キーワードを使用します（巻き上げの利点があります）
  • 常にVue Composition APIのscript setupスタイルを使用します

UIとスタイル

  • コンポーネントにはHeadless UI、Element Plus、Tailwindを実装します
  • Tailwind CSSを使用したモバイルファーストのレスポンシブデザインを採用します

パフォーマンス最適化

  • VueUseの関数を活用して、リアクティビティを向上させます
  • 非同期コンポーネントをフォールバックUIとともにSuspenseでラップします
  • 重要度の低いコンポーネントには動的読み込みを適用します
  • 画像を最適化します：WebP形式、サイズデータ、遅延読み込みを使用します
  • Viteのビルドプロセスで、最適化されたコード分割を実装します

Web Vitals

LighthouseまたはWebPageTestのツールを使用して、LCP、CLS、FIDを最適化します。

コメント

Markdown 対応