スキルを探す

大きなJavaScriptの配信ファイルを点検し、初期表示に不要な機能やライブラリを必要な場面で読み込む形へ分割して、読み込み待ちの表示も整えるスキル。

• 大きなJavaScriptの分割候補を探す
• グラフやエディターの読み込みを遅らせる
• ページごとの読み込みコードの点検

CSSを無効にしても内容を理解し操作できるか、HTMLの読み順や見出し、フォームのラベルを点検し、見た目に依存した構造の修正を支援するスキル。

• CSS無効時の使いやすさの確認
• 読み順や見出し構造の見直し
• フォームのラベルやエラー表示の点検

ページを開いてすぐ見える重要画像の読み込み順を点検し、画像サイズや遅延読み込み、優先度指定を見直して、主要コンテンツの表示改善を支援するスキル。

• ヒーロー画像の読み込み優先度の点検
• 初期表示画像の遅延読み込みを調べたいとき
• DevToolsで画像の修正を確認したいとき

読み込み中に画像や広告でページの配置がずれる原因を測定し、表示領域の確保やフォント・アニメーションの見直しで、誤クリックや読書の中断を減らす改善を支援します。

• 読み込み中に内容が動く原因を調べたいとき
• 画像・埋め込み・広告の表示領域を確保
• フォントやアニメーションの安定性確認

実際のブラウザでページの読み込みや描画を測定し、遅さの原因となる通信・スクリプト実行・レイアウト処理を特定して、改善点を検討するスキル。

• ページの読み込みが遅い原因の調査
• 端末や回線条件ごとの性能比較
• 開発やCI/CDへの性能監査の導入

SharedArrayBufferなどに必要なクロスオリジン分離を点検。セキュリティヘッダーと外部リソースの互換性を調べ、ブラウザーでの成立を確認するスキル。

• SharedArrayBufferの利用要件確認
• COEP導入前の外部リソース調査
• ポップアップや埋め込みへの影響確認

CSS変数を使うアニメーションやグラデーションを点検し、@propertyで値の型・初期値・継承を定義して、滑らかな変化を支援するスキル。

• グラデーションを滑らかに動かしたいとき
• CSS変数を使う画面効果の点検
• デザイントークンの型と継承の設定

行と列を同時にそろえる画面レイアウトを見直し、CSS Gridへの置き換えや、画面幅・内容に応じて配置が変わるグリッドの設計を支援するスキル。

• 二次元のFlexboxやfloat配置の見直し
• 画面幅に応じたカード一覧の配置
• 入れ子の要素を親グリッドにそろえたいとき

CSSの配色定義を点検し、色の明るさを人の見え方に合わせて調整できるoklch()を使って、統一感のある濃淡やダークモードの配色を整えるスキル。

• CSSの共通配色を整理したいとき
• 見た目の明るさがそろう濃淡の作成
• ダークモードやホバー色の設計

フロントエンドがAPIに期待する応答を契約としてテストにまとめ、Pactでバックエンドとの整合性を検証し、別々に変更・デプロイする際の確認を支援するスキル。

• フロントエンドとAPIの整合性テスト導入
• サービスを個別にデプロイできるか確認
• 遅いE2Eテストの一部を置き換えたいとき

検索エンジンに正規ページを伝えるcanonical URLの転送を点検し、HTTP応答と表示後のHTMLを確認して最終URLへの直接指定を支援するスキル。

• canonical URLの転送を確認したいとき
• URL変更後のcanonicalタグの点検
• 正規URLを生成するテンプレートの確認

ページの初期表示を待たせるCSSの読み込みを点検し、必要なスタイルの埋め込みや後回しの読み込みを支援します。画面幅や操作状態ごとの表示も確認しながら修正を検討します。

• 初期表示を遅らせるCSSを調べたいとき
• 最初に必要なCSSと後回しのCSSの整理
• preloadやmediaによる読み込みの点検

ページの初期表示を遅らせるリソース取得の依存関係を計測し、重要なCSSの埋め込みや必須ファイルの先読みで、通信の待ちが連鎖する構造を見直すスキル。

• ページの初期表示が遅いとき
• リソース取得の依存関係の点検
• 重要CSSの埋め込みや先読みの検討

公開前のHTMLに残る開発用コメント、デバッグコード、ログ、仮の要素を点検して除去します。必要なコメントを残しながら、機密情報の露出も確認するスキルです。

• 本番公開前にHTMLを整理したいとき
• コメント内の機密情報を点検したいとき
• デバッグログや仮の要素の削除

各ページのcanonicalタグを確認し、URLの表記違いやパラメータで重複するページについて、検索エンジンに伝える正規URLの設定を整えるスキル。

• 各ページのcanonicalタグの点検
• パラメータやドメイン表記による重複URLの確認
• 正規URLを追加・修正したいとき

Web記事の事実・数値・引用に信頼できる出典があるかを点検し、関連する外部リンクや説明的なリンク文言の追加、公開ページでの確認を支援するスキル。

• 記事の事実や数値の出典を点検したいとき
• 公式情報や研究へのリンクを追加したいとき
• 出典リンクの文言を見直したいとき

Webページの文字や入力欄の枠、アイコンなどの色のコントラストを点検し、操作中の状態も含めてWCAGの基準を満たす配色への修正を支援するスキル。

• 文字と背景の配色を点検したいとき
• 入力欄の枠やアイコンの視認性確認
• ホバーやフォーカス時の色の確認

CSSの上書き競合を点検し、`@layer`でスタイルの優先順を明示する構成へ整理して、複雑なセレクターや`!important`への依存を見直すスキル。

• CSSの上書き競合を調べたいとき
• デザインシステムのスタイル優先順を設計
• ユーティリティ中心のCSSから段階的に移行

HTMLのhead内でCSSとJavaScriptの読み込み順を点検し、画面幅や操作状態ごとの表示も確かめながら、表示の遅れや装飾のちらつきへの修正案を示すスキル。

• 装飾のない画面が一瞬見える原因の調査
• head内のCSSとJSの順序確認
• スクリプト遅延と重要なCSSの点検

記事やブログの公開日・更新日を点検し、読者向けの日付表示と検索エンジン向けの構造化データを整え、本文の実質的な変更に合う更新日の管理を支援します。

• ブログ記事の日付表示の点検
• Article JSON-LDへの日付追加
• CMSテンプレートの日付処理確認

記事の著者紹介に経験・資格・専門プロフィールへのリンクがあるかを確認し、表示後のHTMLや構造化データも含めてSEO上の改善箇所を示すスキル。

• 記事の著者紹介を点検したいとき
• 資格や専門プロフィールの記載改善
• HTMLや構造化データの著者情報監査

記事やページの著者情報を検索エンジンに伝える構造化データを点検し、名前や外部プロフィールの設定、本文との関連付けを公開ページの出力まで確認するスキル。

• 記事ページの著者情報を点検したいとき
• 著者の外部プロフィールとの関連付け
• テンプレートの著者マークアップ確認

画面や共通部品のアクセシビリティを自動テストで確認し、テスト不足の指摘やCIへの組み込みを通じて、構造・属性の問題と変更による不具合を見つけるスキル。

• 共通部品の検査範囲の見直し
• 画面操作テストへの検査追加
• CIでのアクセシビリティ検査

フォームへの自動フォーカスを点検し、読み込み直後に説明文を飛ばして入力欄へ移る動作を見直します。利用者の操作を起点にフォーカスを移す修正も提案します。

• 説明文のあるフォームの点検
• 読み込み時の意図しないスクロール調査
• 利用者の操作後にフォーカスを移したいとき