bundle-size-analyzer について
フロントエンド開発向けの bundle-size-analyzer スキルで、手順の案内、コードや設定の生成、出力の検証を行います。React、Vue、CSS、アクセシビリティ、パフォーマンス最適化、モダンな Web 開発に関する相談に対応します。
主な機能
- 01バンドルサイズ分析の案内
- 02業界の慣行やパターンへの準拠
- 03コードと設定の生成
- 04一般的な基準による出力検証
活用シーン
- 01バンドル分析方法の相談
- 02フロントエンドコードや設定の生成
- 03一般的な基準に照らした出力確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/bundle-size-analyzerを入力して読み込まれたか確認します。
詳細
バンドルサイズアナライザー
概要
このスキルは、フロントエンド開発分野におけるバンドルサイズアナライザー関連のタスクを自動で支援します。
使用するタイミング
以下の場合に、このスキルが自動的に有効になります。
- リクエストで「バンドルサイズアナライザー」に言及した場合
- バンドルサイズアナライザーのパターンやベストプラクティスについて質問した場合
- React、Vue、CSS、アクセシビリティ、パフォーマンス最適化、最新のウェブ開発パターンを扱うフロントエンドスキルの支援が必要な場合
手順
- バンドルサイズアナライザーについて、段階的にガイダンスを提供します
- 業界のベストプラクティスとパターンに従います
- 本番環境で使用できるコードと設定を生成します
- 一般的な標準に照らして出力を検証します
例
例：基本的な使い方 リクエスト：「バンドルサイズアナライザーについて手伝ってください」 結果：段階的なガイダンスを提供し、適切な設定を生成します
前提条件
- 関連する開発環境が設定されていること
- 必要なツールやサービスにアクセスできること
- フロントエンド開発の基本概念を理解していること
出力
- 生成された設定とコード
- ベストプラクティスの推奨事項
- 検証結果
エラー処理
| エラー | 原因 | 解決策 |
|---|---|---|
| 設定が無効 | 必須フィールドが不足しています | 必須パラメーターについてドキュメントを確認してください |
| ツールが見つかりません | 依存関係がインストールされていません | 前提条件に従って必要なツールをインストールしてください |
| アクセスが拒否されました | アクセス権限が不足しています | 認証情報と権限を確認してください |
リソース
- 関連ツールの公式ドキュメント
- ベストプラクティスガイド
- コミュニティの事例とチュートリアル
関連スキル
フロントエンド開発スキルカテゴリーの一部です。 タグ：React、Vue、CSS、アクセシビリティ、ウェブ
コメント
Markdown 対応