Anthropic Claudeソフトウェア開発⭐ リポ 7品質スコア 69/100

web-components-architecture

Custom Elements v1 APIと宣言的Shadow DOMを使用して、属性駆動の状態管理とhandleEventパターン、DOMセレクションなしのWebコンポーネントを構築します。カスタム要素の作成、組み込みHTML要素の拡張、またはコンポーネントベースのアーキテクチャの実装に活用できます。querySelectorやinnerHTML、外部ライブラリは一切使用せず、Web プラットフォームのAPIのみで実装します。

description の原文を見る

Build web components using Custom Elements v1 API with Declarative Shadow DOM, attribute-driven state, handleEvent pattern, and zero DOM selection. Use when creating custom elements, extending built-in HTML elements, or implementing component-based architecture. NO querySelector, NO innerHTML, NO external libraries - pure web platform APIs only.

SKILL.md 本文

注意: このスキルのライセンスは ライセンス未確認 です。本サイトでは本文プレビューのみを表示しています。利用前に GitHub の原本でライセンス条件をご確認ください。

ウェブコンポーネントアーキテクチャ

コア原則

このスキルはウェブコンポーネント向けの厳密なアーキテクチャパターンを強制します：

ゼロ DOM セレクション: querySelector、querySelectorAll、getElementById は絶対に使用しない
属性駆動状態: すべての状態は HTML 属性を通じてフロー
this でのイベント委譲: this.addEventListener と handleEvent パターンを使用
外部依存なし: 標準ウェブプラットフォーム API のみを使用
宣言型シャドウ DOM: インスタントレンダリング用に <template shadowrootmode="open"> を使用
プログレッシブエンハンスメント: JavaScript が失敗してもコンポーネントは動作（機能低下）
自律カスタム要素よりカスタマイズ組み込み要素: アクセシビリティを保持するため、可能な限りネイティブ要素を拡張

JavaScript ベストプラクティスとの関係

このスキルはウェブコンポーネント構築のための アーキテクチャパターン を定義します。コンポーネント実装時には、このスキルを `

...

全文を GitHub の原本で見る →リポジトリ

詳細情報

作者: majiayu000
リポジトリ: majiayu000/claude-skill-registry-data
ライセンス: 不明
最終更新: 2026/5/9

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/majiayu000/claude-skill-registry-data / ライセンス: 未指定