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