Communitygithub.com

thedaviddias/interstitials(インタラクティブ要素)

モーダル、オーバーレイ、ポップアップ、Cookieバナー、ニュースレター登録ダイアログ、プロモーションオーバーレイなどのCSSおよびJavaScript実装に適用されるスキルです。`position: fixed`、大きなz-index付きの`position: absolute`、背景オーバーレイ、ページ読み込み時またはその直後にモーダルを表示するJavaScriptをチェックします。SEO(Google)とアクセシビリティ(WCAGフォーカス管理)の両方を考慮します。

interstitials(インタラクティブ要素) とは?

このスキルは、Webサイト上のインタラクティブ要素(モーダル、オーバーレイ、ポップアップ、Cookieバナー、ニュースレター登録ダイアログ、プロモーションオーバーレイなど)の実装を分析・最適化するためのものです。CSS的な実装(`position: fixed`、大きなz-indexを持つ`position: absolute`、背景オーバーレイ)とJavaScriptによる表示制御(ページ読み込み時やその直後の表示)の両方をチェックします。主な目的は、GoogleのSEO評価に悪影響を与える可能性のある要素を特定し、WCAGガイドラインに準拠したフォーカス管理などのアクセシビリティ問題を解決することです。汎用的なスキルであり、Claude Code、Cursor、Codexなど様々なAIエージェントプラットフォームで利用可能です。開発者はこのスキルを使用することで、UXを損なわず、検索エンジンとアクセシビリティのベストプラクティスに準拠したインタラクティブ要素を実装できます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/thedaviddias/Front-End-Checklist/tree/main/skills/interstitials

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

interstitials(インタラクティブ要素) は何をしますか?

モーダル、オーバーレイ、ポップアップ、Cookieバナー、ニュースレター登録ダイアログ、プロモーションオーバーレイなどのCSSおよびJavaScript実装に適用されるスキルです。position: fixed、大きなz-index付きのposition: absolute、背景オーバーレイ、ページ読み込み時またはその直後にモーダルを表示するJavaScriptをチェックします。SEO(Google)とアクセシビリティ(WCAGフォーカス管理)の両方を考慮します。

関連スキル