本文へ移動
cccskills

David Dias

@thedaviddias

Staff Front-End Engineer | Front-End Architecture, Design Systems & Accessibility | Creator of the Front-End Checklist (74K+ ⭐) and serving 100K+ devs

467 スキル6 リポジトリ 7.5万

スキル(467)

検索で絞り込む

lang-attribute

無料概要あり

HTMLの言語指定を点検し、未設定・空欄・本文との不一致を見つけて修正します。多言語が混在する箇所も確認し、読み上げや翻訳に使われる言語情報を整えます。

  • ページ全体の言語指定の確認
  • 多言語コンテンツの言語切り替え指定
  • 読み上げの発音に関わる設定の点検
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

json-safety

無料概要あり

API応答や保存データを読み込むJavaScriptのJSON処理を点検し、不正な入力への例外処理と、読み取り後のデータ構造の検証を追加するスキル。

  • API応答のJSON処理を点検したいとき
  • localStorageの壊れたデータへの対処
  • プロパティ参照前のデータ構造の検証
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

nofollow-internal

無料概要あり

同じドメイン内のリンクに付いたnofollowを調べ、掲載元・リンク文言・移動先を一覧化し、属性の削除や目的に応じた設定の見直しを支援するスキル。

  • 内部リンクのnofollowを点検
  • ナビゲーションやヘッダーのリンクを確認
  • テンプレートによる一括付与を調べたいとき
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

loading-indicators

無料概要あり

データ取得や送信中の待ち時間に、処理状況が伝わる表示を点検・実装します。スピナーや仮の表示枠、読み上げ対応、読み込み完了時のレイアウトのずれまで確認します。

  • データ取得中の待機表示を付けたいとき
  • 操作の実行中に進捗を伝えたいとき
  • 読み込み状態の読み上げ対応を確認
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

meta-in-body

無料概要あり

ページのHTMLを調べ、body内などに誤って置かれたメタタグを特定して、headへの移動やスクリプトの挿入先の修正を支援するスキル。

  • CMSプラグイン変更後のタグ配置を確認
  • JavaScriptによるbody内への挿入を調査
  • robotsやOGなどの配置を点検
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

link-in-text-block

無料概要あり

本文中のリンクが色だけに頼らず見分けられるかを点検します。下線、文字色のコントラスト、ホバーやフォーカス時の表示を確認し、CSSの修正案を示します。

  • 本文リンクの下線を外す際の確認
  • リンクと本文のコントラスト確認
  • ホバーやフォーカス表示の点検
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

locale-images

無料概要あり

海外向けサイトの画像やアイコンを点検し、文化によって意味が変わる表現を見直すスキル。地域に偏りにくい素材への置換や、地域別の画像切り替えを扱います。

  • 海外展開前の画像レビュー
  • ジェスチャーや文化的記号の確認
  • 言語・地域別に画像を変えたいとき
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

lazy-loading

無料概要あり

画面外の画像・動画・iframeなどの読み込みを必要になるまで遅らせ、初期表示の負荷を抑える実装を支援します。実測と配置を確認し、変更すべき箇所を絞ります。

  • ページの初期表示が遅い原因の調査
  • 初期画面より下の画像の遅延読み込み
  • 画面外の動画や重い部品の読み込み延期
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

label-content-name-mismatch

無料概要あり

ボタンやリンクの表示文字と支援技術が使う名前を照合し、音声操作で見たとおりの名前を指定できるよう、ARIA属性の修正と確認方法を案内するスキル。

  • ボタンの表示文字と名前を照合したいとき
  • 音声操作しにくいリンクの点検
  • アクセシビリティツールで修正を確認
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

llms-txt

無料概要あり

公開ドキュメントの入口となる `/llms.txt` を点検・整備し、重要なページの選定、リンク先へのアクセス、配置場所の妥当性を確認するスキル。

  • 公開ドキュメントの入口を点検したいとき
  • 重要なAPI資料や入門ガイドの選定
  • 資料へのリンクの到達確認
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

mobile-testing

無料概要あり

スマートフォン実機とモバイル画面幅でのテスト状況を点検し、Playwrightによる主要操作のテスト追加やCIで継続的に検証できていない箇所の特定を支援するスキル。

  • CIのモバイルテストを見直したいとき
  • 主要操作のモバイルテストを追加したいとき
  • AndroidとiOSの実機確認を計画したいとき
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

modern-format

無料概要あり

Webサイトの画像形式を点検し、WebP・AVIFへの変換や代替画像の設定を支援します。表示サイズや読み込み方も調べ、具体的な修正箇所を示します。

  • JPEG・PNGの変換候補の洗い出し
  • WebP・AVIFと代替画像の設定
  • CSS背景画像の形式の見直し
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

lowercase

無料概要あり

URLに含まれる大文字を調べ、小文字への統一と301リダイレクトの設定を支援するスキル。内部リンクやサイトマップも確認し、重複URLを整理します。

  • URL内の大文字を点検したいとき
  • 新規サイトのURL統一方針を決めるとき
  • 301リダイレクトを検証したいとき
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

length

無料概要あり

記事やサイトのURLについて、長すぎるパスや深い階層、不要な語句・日付を点検し、読みやすく共有しやすい形への整理と変更時の転送設定を支援するスキル。

  • 記事タイトルから短いスラッグを作りたいとき
  • 長いURLや深い階層を点検したいとき
  • CMSやルーターのURL規則の見直し
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

llm-parsability

無料概要あり

AIがウェブページの内容を読み取りやすいか、見出しやHTML構造、JavaScriptなしでの本文表示、構造化データを点検し、改善を支援するスキル。

  • AIの回答で参照されるページの点検
  • 見出しや各節を単独で伝わる文にしたいとき
  • JavaScriptなしの本文表示の確認
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

listitem

無料概要あり

HTMLのリスト項目と親要素の関係を点検し、読み上げソフトに項目数や一覧の構造が伝わるよう、リストの入れ子やARIAの指定を修正するスキル。

  • 部品に分かれたリスト構造の点検
  • ナビゲーションの入れ子修正
  • 独自リストの親ロール確認
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

leaked-secrets

無料概要あり

ページのHTMLやJavaScript、Git履歴にAPIキーやパスワードが露出していないか点検し、漏えいした認証情報の更新と再発防止の対応を整理します。

  • ブラウザー側のAPIキー露出点検
  • Gitに記録された認証情報の調査
  • 秘密情報を使う処理のサーバー移行
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

list-structure

無料概要あり

HTMLの箇条書きや番号付きリストの親子構造を点検し、不適切な要素や入れ子を修正して、スクリーンリーダーが項目数や現在位置を正しく伝えられるようにするスキル。

  • HTMLのリスト構造を点検したいとき
  • 入れ子のリストを修正したいとき
  • 読み上げ時の案内を確認したいとき
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

mime-type

無料概要あり

Webページや画像などの配信時に、ファイルの種類とHTTPヘッダーが一致しているかを点検し、CSSやJavaScriptが読み込めない原因とサーバー設定の修正箇所を整理するスキル。

  • CSSやスクリプトの読込不良を調べたいとき
  • 静的ファイルの配信設定の監査
  • 文字コードとnosniff設定の確認
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

landmark-one-main

無料概要あり

ページの主要コンテンツを示すmain領域が一つだけあるかを確認し、重複や欠落を指摘して、スクリーンリーダー利用時の移動先を明確にするスキル。

  • ページひな型のmain領域を確認
  • 組み合わせたレイアウトのmain重複を修正
  • スクリーンリーダーで本文への移動を確認
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

link-text

無料概要あり

リンク先が単独でも伝わる文言かを点検し、曖昧な表現や読み上げ用の名前を改善します。キーボード操作やダウンロードリンクの案内も確認するスキルです。

  • 曖昧なリンク文言を直したいとき
  • 読み上げ時のリンクを点検したいとき
  • ダウンロードリンクの案内確認
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

meta-description

無料概要あり

検索結果に表示されるページ説明文を作成・点検し、未設定や重複、文字数の問題を修正します。各ページの内容と価値が伝わる固有の要約に整えます。

  • 新規ページの説明文を作りたいとき
  • 説明文の未設定や重複を探したいとき
  • 説明文の文字数やHTMLを点検したいとき
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

local-business

無料概要あり

実店舗や地域密着型ビジネスのサイトで、店名・住所・電話番号・営業時間などを検索エンジンに伝える構造化データを点検し、追加や修正を支援するスキル。

  • 地域ビジネスの構造化データ点検
  • ホームや問い合わせページへの事業情報追加
  • 飲食店や店舗に合うタイプの選択
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

legacy-js

無料概要あり

モダンブラウザに不要な旧形式のJavaScriptや互換コードを調べ、実測で負荷を確かめながら、配信方法とビルド設定の見直しを支援するスキル。

  • ページ読み込みの遅さを調べたいとき
  • 不要な互換コードの点検
  • モダンブラウザ向けビルド設定の見直し
thedaviddias/Front-End-Checklist7.5万2026年10月6日 更新

あなたのアカウントですか? GitHub 連携でクリエイターページにまとめられます