開発のスキル

Reactやshadcn/uiで、状態管理や画面遷移を備えた複数部品の画面を制作し、Claudeの会話で共有できる単一HTMLにまとめるスキル。

• 複数の部品を組み合わせた画面制作
• 状態管理や画面遷移を加えたいとき
• Reactアプリを単一HTMLで共有

Gitのコミット履歴から、利用者に伝わる更新履歴やリリースノートを作るスキル。新機能・改善・修正などに分類し、開発者向けの記述を平易にまとめます。

• 新バージョンのリリースノート作成
• 週次・月次の製品更新をまとめたいとき
• アプリストア向けの更新説明作成

codegraphに新しいプログラミング言語への対応を追加します。構文解析の設定から情報抽出の実装、テスト、実際の3つのコードベースでの比較評価まで進めます。

• codegraphに新しい言語を追加したいとき
• 関数やインポートの抽出を検証したいとき
• 実際の3つのコードベースで効果を比べたいとき

JavaScriptが使えない環境でもページの重要な内容を読めるように、初期HTMLとnoscriptの代替表示を点検し、必要な修正を案内するスキル。

• JavaScript無効時の表示確認
• JavaScript依存機能の代替表示
• 初期HTMLの重要コンテンツの点検

通信が切れた際の案内ページを作り、service workerで事前保存して表示する仕組みを整えます。外部リソースへの依存や表示条件も点検するスキル。

• PWAにオフライン画面を追加したいとき
• 通信切断時の案内を整えたいとき
• オフラインページの事前保存を点検

ブラウザごとの標準スタイルによる表示の差を減らすため、CSSリセットの導入状況と読み込み順を点検し、画面幅や操作状態を踏まえた修正案を示します。

• ブラウザ間の表示差を調べたいとき
• 新規サイトのCSSの土台づくり
• CSSフレームワーク内蔵リセットの確認

Webページの読み込みを調べ、画像やフォントの先読み、外部サービスへの事前接続を提案するスキル。計測した遅延の原因に合わせ、リソースヒントの使い分けと追加を支援します。

• 主要画像やフォントの先読み確認
• 外部サービスへの事前接続の調整
• 次の画面で使うファイルの先読み

画面幅や解像度に合う画像を配信できるよう、srcsetとsizesを点検します。HTMLとCSSの表示幅を照合し、スマートフォンへの過大な画像配信を見直すスキルです。

• 記事画像のレスポンシブ対応確認
• スマホへの過大な画像配信の見直し
• カードやギャラリーの画像サイズ点検

文字サイズや幅、余白の固定ピクセル指定を点検し、画面幅や利用者の文字サイズ設定に合わせて表示が変わる相対単位への置き換えを支援します。

• ブラウザの文字サイズ設定への対応
• 固定幅から柔軟なレイアウトへの変更
• コンポーネント内の余白単位の見直し

Webページの画像が表示位置に合った読み込み設定になっているかを点検し、画面外の画像の遅延読み込みや、最初に見える重要画像の優先読み込みを整えるスキル。

• 画面外の画像の遅延読み込みを点検したいとき
• ヒーロー画像の読み込み優先度を確認したいとき
• 遅延読み込み画像の寸法を指定したいとき

ページの初期表示を妨げるCSSやJavaScriptを調べ、実測で原因を確かめます。読み込み順序や重要なスタイルの配置を見直し、表示の遅れを改善するスキルです。

• 読み込み中の白い画面の原因調査
• CSS・JavaScriptの読み込み見直し
• 初期表示に必要なCSSの直接記述

ページ表示の遅さを実測で確認し、重要な画像やフォントの先読み、外部サーバーへの事前接続を適切に設定して、読み込みを早める改善を支援するスキル。

• 主要画像やフォントの表示遅延の調査
• 外部サービスへの事前接続の検討
• 次の画面で使うファイルの先読み

画像を条件に応じて切り替えるpicture要素を点検し、代替表示用のimg、説明文や寸法、画像形式の指定を整え、修正後のHTMLを示すスキル。

• AVIFやWebPの代替画像を確認
• picture要素の順序と属性の点検
• 説明文や寸法がない画像指定の修正

画像やJavaScriptなどを含むページ全体の転送量を測り、読み込みを重くする原因を確認します。1500KB未満を目安に、画像やコードの削減を進めます。

• モバイル回線での読み込み遅延の調査
• ページ総容量が上限内か確認したいとき
• 重い画像やJavaScriptの軽量化

WebアプリのPWAインストール対応を点検し、HTTPSや設定ファイル、アイコンの不足を確認するスキル。オフライン応答や起動先の設定も見直します。

• PWAインストール対応の点検
• インストール案内を追加する前の確認
• アイコンのサイズと形式の見直し

外部フォントやAPIへの接続待ちを計測で確かめ、重要な接続先の事前接続を追加し、不要な指定を整理して、ページの読み込み速度改善を支援します。

• 外部フォントやAPIの接続遅延調査
• head内の事前接続指定の点検
• 不要な事前接続を整理したいとき

高精細ディスプレイで画像がぼやける原因を点検し、2倍・3倍画像の用意やHTML・CSSの指定、配信設定、読み込み方法まで確認するスキル。

• 高精細画面の画像ぼけを調べたいとき
• 画像のsrcsetを見直したいとき
• CSS背景画像を高精細対応したいとき

表示幅に対して大きすぎるWeb画像を調べ、画面サイズに合った画像配信へ修正するスキル。画像の寸法と実際の表示幅、srcsetやsizesの指定を確認します。

• スマホ向けページの過大な画像を探したいとき
• srcsetとsizesの指定を点検したいとき
• 画面幅に合う画像サイズを用意したいとき

WebページのJPEG画像が粗いプレビューから徐々に鮮明になる形式かを点検し、画像サイズや読み込み方法も踏まえて、表示体験を改善する修正案を示します。

• JPEGの読み込み中の見え方を点検
• WebPやAVIFの代替JPEG確認
• CDNやビルド時の画像配信設定の確認

件数を含む画面の文言や翻訳ファイルを点検し、単数・複数の二択では扱えない言語も含め、対象言語に合う表現へ実装を見直すためのスキル。

• 多言語画面の件数表示のレビュー
• アラビア語やロシア語の複数形対応
• 翻訳ファイルと国際化設定の点検

ページ送りのHTMLを確認し、現在のページ表示や前後のリンク、キーボード操作を点検します。読み上げソフトでも位置や移動先が分かる構造へ修正するスキルです。

• 検索結果のページ送りの点検
• キーボードでのページ移動の確認
• 読み上げ用ラベルの改善

ページの読み込み時間を測り、3秒未満を目指して遅延の原因を調べます。重い画像や通信、描画処理を実測で確認し、遅延読み込みやキャッシュなどの改善につなげます。

• ページ表示の遅さを調べたいとき
• 重いリソースや描画処理の特定
• 低速回線での表示性能の確認

HTMLの `<object>` 要素を点検し、埋め込み内容を読み込めない場合にも情報が伝わる代替テキストや代替コンテンツを整えるスキル。

• 代替内容のないobject要素の確認
• 埋め込みの読み込み失敗に備えたいとき
• 代替内容が同等の情報を伝えるか点検

Webサイトの画像容量や表示サイズ、読み込み方を点検し、形式ごとの圧縮や不要な付加情報の削除を進め、変更前後のファイルサイズを比較するスキル。

• 表示を遅くする画像を探したいとき
• 圧縮前後のファイル容量比較
• 画像の不要なメタデータ削除