「action」の検索結果

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

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

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

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

画像や内容を切り替えるカルーセルを点検し、自動再生の停止、キーボード操作、読み上げ通知、動きを抑える設定への対応を確認・修正するスキル。

• 自動再生スライドの停止操作の点検
• キーボードだけでの操作確認
• スライド変更の読み上げ通知の確認

CSSに散らばる色・余白・文字サイズの指定を見つけ、共通のCSSカスタムプロパティへ整理します。テーマ変更や画面幅ごとの表示を確認しながら修正を提案します。

• 重複する色や余白の整理
• ブランド変更に向けたCSS整備
• ダークモード用の値の見直し

本番配信するCSSの空白やコメントを削ってファイルを小さくするために、圧縮の適用状況やビルド設定を点検し、画面幅ごとの表示も確認するスキル。

• 本番CSSの圧縮状況の確認
• ビルド工程に圧縮を追加したいとき
• PostCSSの出力を見直したいとき

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

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

パンくずリストのHTML構造と現在地の指定を点検し、サイトの階層を画面読み上げでも理解できるよう、適切な要素とARIA属性を整えるスキル。

• パンくずの読み上げ対応を点検したいとき
• 共通部品が出力するHTMLの確認
• 構造化データと表示内容の整合確認

Webページを紙に印刷したときの読みやすさを点検し、印刷用CSSを整えます。ナビや広告の非表示、文字サイズ、改ページ、外部リンクのURL表示を確認します。

• Webページを紙で読みやすくしたいとき
• 印刷時にナビや広告を隠したいとき
• 印刷の文字・改ページ・URL表示の調整

ブラウザーに届くHTMLの文字コード宣言を点検し、UTF-8の指定漏れや配置の問題を見つけ、日本語や特殊文字の文字化けを防ぐために修正するスキル。

• 日本語や特殊文字の文字化け調査
• 公開前の文字コード宣言の確認
• 共通テンプレートのHTML出力点検

カードなどの部品が配置先の幅に合わせて表示を変えるよう、CSSを点検・修正します。画面幅に依存する指定を見直し、異なる配置での再利用を支援するスキル。

• カードをグリッドとサイドバーで使いたいとき
• メディアクエリを書き換えたいとき
• 配置先の幅ごとに表示を点検したいとき

フォームの結果やカート更新など、画面内で変わる情報が読み上げ利用者に伝わるかを点検し、ARIAライブリージョンの属性と通知の優先度を見直すスキル。

• フォーム結果とエラーの読み上げ点検
• カート更新を読み上げで伝えたいとき
• 読み込み状態や状況通知の点検

ボタンやリンクなどに、操作内容や移動先が伝わる名前が付いているかを点検します。表示テキストやaria-labelの不足を指摘し、具体的な修正案を示します。

• 名前のないボタンやリンクの検出
• 曖昧なラベルの見直し
• 共通部品の操作名のレビュー

存在しないページに訪れた人を検索や主要ページへ案内する、独自の404ページを作成・点検するスキル。表示内容に加え、HTTPステータスの正しさも確認します。

• 独自の404ページを作りたいとき
• リンク切れ時の検索・案内の整備
• 存在しないページの200応答の確認

補足説明を表示するツールチップを、キーボードや画面読み上げでも使えるよう点検し、HTML属性、表示・終了操作、コントラストを見直すスキル。

• ツールチップのキーボード操作の点検
• 補足説明の読み上げを確認したいとき
• 表示操作とEscapeキー終了の点検

折りたたみ式のアコーディオンをキーボードや読み上げで利用できるよう、ボタンと開閉状態の属性、見出し構造、実際に出力されたHTMLを点検・修正するスキル。

• 折りたたみ部分のキーボード操作確認
• 読み上げで開閉状態を伝えたいとき
• 共通のアコーディオン部品の見直し

フォームのエラーや完了通知、リアルタイム更新が読み上げでも伝わるよう、実際に表示されるHTMLの属性、表示時間、閉じる操作を点検するスキル。

• フォームエラーの読み上げ確認
• 完了通知の表示時間を見直したいとき
• リアルタイム通知の点検

OpenSpecの仕様・タスク・設計と実装を照合し、作業漏れや要件とのずれ、テスト不足を重要度と修正案付きで報告して、アーカイブ前の確認を支援するスキル。

• アーカイブ前に未完了タスクを確認
• 仕様と実装のずれを見つけたいとき
• シナリオのテストと設計への適合を確認

OpenSpecの利用者向けドキュメントを、専用の文体ガイドに沿って作成・改稿します。手順と参照情報を整理し、必要な答えを見つけやすいページに整えます。

• OpenSpecの操作ガイド作成
• コマンドの参照ページ整理
• ドキュメントの読みやすさ改善

教材やREADME、マニュアル向けに、実際のシステム名やログを根拠とした静的SVG図を作るスキル。9種類の図と統一した色・矢印で仕組みを説明します。

• READMEにシステム間の通信図を載せたいとき
• マニュアルで状態遷移を説明したいとき
• ログや仕様からデータの流れを図示

画面のない環境でターミナルアプリを操作し、表示を待って不具合を再現・検証するスキル。画面の記録やPNG撮影、操作テストの作成にも対応します。

• 画面なしでCLIの不具合を再現したいとき
• 対話型プロセスをバックグラウンド実行
• ターミナルの操作テスト作成

Web画面の新規作成や改修で、見た目、配置、動き、使いやすさを整えるスキル。デザイン方針を文書化し、実装と実ブラウザでの表示・性能確認まで進めます。

• 参考画像やサイトからLPを作りたいとき
• 既存の管理画面の配置や見た目の改善
• アニメーションや操作時の反応の追加

Web画面・ターミナルUI・ページ文書の見た目と操作状態を検証。画面幅や明暗テーマを変えた画像を根拠に、項目ごとの合否を整理するスキル。

• UI変更後の表示確認
• デザイン見本との比較
• 日本語の文字切れ・改行の点検

GitHubの未対応IssueとPRを全件調査し、コードや履歴の根拠リンク付きレポートに整理します。不具合の判定や修正案、マージ判断の材料をまとめます。

• 未対応IssueとPRの棚卸し
• 不具合が修正済みか確認したいとき
• PRのマージ判断に向けた事前確認

opencodeのコマンド、HTTPサーバー、イベント、端末画面を検証し、保存済みの会話をID・タイトル・本文で調べます。用途別のスクリプトで確認を進めるスキル。

• コマンドとHTTPサーバーの確認
• フックに関わるイベントの観測
• 端末画面の起動と入力の確認