vanilla-web

Vanilla Web（HTML/CSS/JS）

基本制約（ルールより）

以下を必須条件として扱います。

• 「HTML/CSS/JS のみ（フレームワークなし）。」
• 「JS はモジュール化（ESM）し、責務を分割します（SRP）。」
• 「小さく焦点を絞った関数と純粋なユーティリティを優先し、グローバル状態は避けます。」
• 「完了とする前に、実行可能なファイル一式と最小限のテストを用意します。」

このスキルを有効にするタイミング

ユーザーが以下を求めた場合に有効にします。

• Vanilla JS／プレーンな HTML/CSS/JS／静的ページ
• 「フレームワークなし」、「React/Vue/Angular を使わない」
• DOM に直接実装する小さな UI コンポーネント（モーダル、タブ、ドロップダウン、フォーム検証）
• フレームワークへの依存を取り除く、または JS の複雑さを軽減するリファクタリング

出力に関する要件

1. 実行可能なファイル一式を提供します（インポートやパスの不足、TODO のプレースホルダーがないこと）。
2. 変更は小さく、テスト可能で、段階的に行います。
3. 簡潔な実行手順を示します。ローカルでの実行・検証方法と、DevTools で確認すべき項目を含めてください。

実装ワークフロー

1) 正しさを左右する点だけを確認する

実装が変わるほど要件が曖昧な場合に限り、質問は最大 3 つまでにします。 それ以外の場合は、前提を明示して進めます。

2) 構成と責務

• 次の分割を優先します。
  • index.html（セマンティックなマークアップ）
  • styles.css（または css/…）
  • js/main.js（ESM のエントリーポイント）と、コンポーネント／ユーティリティ用の js/modules/*.js
• SRP：各モジュールは 1 つのことを担当します（DOM 接続、状態、レンダリング、API、ユーティリティ）。
• 可変なグローバル状態は避けます。状態が必要な場合は、モジュール内にカプセル化し、最小限の関数だけを公開します。

3) HTML のガイドライン

• セマンティックなタグを使用します（該当する場合は header、main、nav、button、dialog）。
• アクセシビリティの基本：キーボード操作、フォーカス状態、必要な場合に限った ARIA（ARIA の過剰な使用は避けます）。

4) CSS のガイドライン

• シンプルで予測しやすい命名を優先します（BEM 風の命名は任意）。
• テーマの基本値には CSS 変数を使用します。
• 標準でレスポンシブなレイアウトにします（flex/grid と相対単位）。

5) JavaScript のガイドライン（ESM）

• type="module" と明示的なインポート／エクスポートを使用します。
• 純粋なユーティリティと小さな関数を優先します。
• リストや動的な UI にはイベント委譲を使用します。
• エラーを明示的に処理します（ネットワーク障害、DOM ノードの不足、無効な入力）。

検証チェックリスト

以下の詳細なチェックリストを使用します。

• references/checklist.md

作業を完了する際は、以下を確認します。

• 変更に起因するコンソールエラーや警告がない
• 参照されるすべてのアセットが解決される（パス／インポート）
• 機能がキーボードで操作でき、フレームワークのランタイムを必要としない

段階的な情報開示

この SKILL.md は簡潔に保ち、詳しい例やチェックリストは references/ に保存します。 大きなスタイルガイドを SKILL.md に貼り付けず、代わりにリポジトリ内の例へのリンクを示します。

推奨する補助スクリプト（任意）

• 手動での検証用に、素早く静的サーバーを起動する scripts/serve.sh

参照：

• scripts/serve.sh