mcpField
W
web-components

web-components

github.com/manzdev開発481 回インストール37 週間前に更新
リポジトリ

web-components について

web-componentsは、素のHTML、CSS、JavaScriptでインターフェースを構築・改修するための実装ガイドです。モジュール型ESMや小さな関数を重視し、フレームワークへの依存を避けます。

主な機能

  1. 01HTML、CSS、JavaScriptのみを使用
  2. 02モジュール型ESMとグローバル状態の回避
  3. 03ファイル構成と命名規則
  4. 04セマンティックHTMLと最新のDOM API
  5. 05CSSとJavaScriptの実践指針

活用シーン

  1. 01ネイティブなWebインターフェースの構築
  2. 02モーダル、タブ、ドロップダウンの実装
  3. 03プロジェクトからフレームワーク依存を削除

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/manzdev/web-core --skill web-components

インストール後、Claude Code で/web-componentsを入力して読み込まれたか確認します。

詳細

Vanilla Web（HTML/CSS/JS）

必須要件（譲れない条件）

  • HTML/CSS/JS のみ（フレームワークは使用しない）
  • モジュール化された JS（ESM）を使用する
  • 小さく、目的を絞った関数と純粋なユーティリティを優先する
  • グローバル状態を避ける

このスキルを有効にするタイミング（ユーザーが求めている内容）

  • Vanilla JS／プレーンな HTML/CSS/JS／静的ページ／効率性
  • フレームワークなし、React/Angular/Vue なし
  • モーダル、タブ、ドロップダウン、フォーム検証など、DOM 上に直接構築する小さな UI コンポーネント
  • フレームワークへの依存を取り除く、または JS の複雑さを減らすリファクタリング

出力に関する期待事項

  • インポートやパスの不足を避ける
  • TODO プレースホルダーを避ける
  • 変更を小さく、テスト可能で、段階的なものにする

実装ワークフロー

1) 構成

  • 次の構成を優先します。

    • src/ ソースコード
    • public/ 静的ファイル（フォント、画像など）
    • index.html メインエントリーポイント
    • main.js メイン JS エントリーポイント
    • src/css/global.css グローバルスタイル
    • src/components/ Web Components フォルダー
    • src/modules/ 再利用可能なモジュールとユーティリティの JS

  • 各モジュールは1つの役割を担います（DOM の接続、モジュールの状態、レンダリング、API、ユーティリティなど）。

  • グローバルな可変状態を避けます。状態が必要な場合は、モジュール内にカプセル化し、最小限の関数のみを公開します。

  • ファイル名には常に次の命名規則を使用します。

    • src/components/ のコンポーネントには PascalCase を使用します。クラス名はファイル名と一致させます。CSS ファイルも同様です。
    • src/modules/ のモジュールには camelCase を使用します。関数名はファイル名と一致させます。
2) HTML ガイドライン
  • 該当する場合は、セマンティックタグ（<header>、<footer>、<article>、<main>、<nav>、<button>、<dialog> など）を使用します。
  • div だらけの構成を避けます（必要最小限の要素にします）。
3) DOM ガイドライン
  • 文字列テンプレートの代わりに、スタイルの作成には CSSStyleSheet API を使用します。
  • new CSSStyleSheet() よりも import 属性の with を優先します。プレーンな文字列テンプレートよりも new CSSStyleSheet() を優先します。
  • getElement*() API よりも querySelector*() API を使用します。
  • innerHTML の代わりに setHTMLUnsafe() / getHTML() を使用します。
  • 要素の追加には、最新の DOM API（append()、prepend()、before()、after()）を優先します。それ以外の場合は、古い appendChild() API よりも insertAdjacent*() を使用します。
4) CSS ガイドライン
  • シンプルで予測しやすい命名を優先します。
  • BEM 命名よりも @scope ルールを優先します。
  • テーマの基本要素や、頻繁に再利用するデータには CSS 変数を使用します。
  • レイアウトはデフォルトでレスポンシブにします（flex/grid）。
  • !important よりも、詳細度の低い :where() を優先します。
  • 関連するブロッククラスをグループ化するには、CSS ネストを使用します。
5) JavaScript ガイドライン
  • type="module" と明示的なインポート／エクスポートを使用します。
  • デフォルトインポートよりも、名前付きインポートを優先します。
  • 純粋なユーティリティと小さな関数を優先します。
  • リストや動的 UI にはイベントデリゲーションを使用します。
  • エラー（ネットワーク障害、DOM ノードの欠落、無効な入力）を明示的に処理します。
  • ロジックを分割するため、小さなクラスメソッドを作成します。
  • コード文字列のテンプレートには、/* html */、/* css */、または /* svg */ を先頭に付けます。

検証チェックリスト

作業を終える際は、次の点を確認します。

  • 変更によって発生したコンソールエラー／警告がない
  • 参照するすべてのアセットが解決できる（パス／インポート）
  • インポートした項目を確認し、使用されていることを確かめる
  • キーボードで操作でき、フレームワークのランタイムを必要とせずに機能する

推奨スクリプト

  • servor ローカルサーバー開発を使う npm run dev を追加します

コメント

Markdown 対応