mcpField
S
semantic-html-first

semantic-html-first

github.com/kemiljk開発6162 回インストール1 週間前に更新
リポジトリ

semantic-html-first について

semantic-html-firstは、インターフェース開発者向けに、操作にはネイティブHTML要素を優先するスキルです。標準のキーボード操作、フォーム動作、アクセシビリティの意味付けに基づく実装・レビュー指針を示します。

主な機能

  1. 01操作に合うネイティブ要素の選択
  2. 02ARIAによるネイティブな意味付けの補足
  3. 03明示的な要素構成の優先
  4. 04ネイティブ疑似クラスによる状態のスタイル設定
  5. 05DOM内のセマンティック要素の確認

活用シーン

  1. 01ボタンやリンクに適したHTMLの選択
  2. 02ネイティブな開閉領域や一時オーバーレイの構築
  3. 03キーボード操作と無効状態のレビュー
  4. 04フォーム送信とスクリーンリーダー向け意味付けの確認

インストール

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

$npx skills add https://github.com/kemiljk/skills --skill semantic-html-first

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

詳細

セマンティック HTML を最優先に

セマンティック HTML はインターフェースの基盤です。ネイティブ要素を使えば、別途実装しなくてもキーボード操作、フォームへの参加、無効時の動作、アクセシビリティのセマンティクスを利用できます。

基本方針

  1. インタラクションに合ったネイティブ要素から始めます。
  2. ARIA は、div／span でネイティブのセマンティクスを再構築するためではなく、ネイティブのセマンティクスを補うために使います。
  3. 実際の要素が分かりにくくなる場合は、マジックな asChild のポリモーフィズムより、明示的なコンポジションを優先します。
  4. 並行する data-* の状態システムを使う前に、ネイティブの疑似クラス（:disabled、:checked、:open、:invalid）で状態をスタイリングします。
  5. ライブラリのプリミティブが存在する場合は、DOM 内に本物のセマンティック要素を出力するか確認します。

推奨／非推奨

推奨非推奨
<button type="button">必要もないのに使う <div onClick> ／ <span role="button">
ナビゲーションには <a href>JS で遷移するだけの、ボタン風にスタイリングした div
<details> ／ <summary>独自のキーボード操作コードを使うカスタム開示 UI
<dialog> ／ Popover APIフォーカスやトップレイヤーの動作と競合するモーダル div
ネイティブの <form> コントロールEnter／Space／無効状態を無視するクリック可能な行

判断ガイド

  • アクションを実行する： button
  • 別の場所へ移動する： a[href]
  • 関連コンテンツの表示を切り替える： details または開示ボタン＋制御対象の領域
  • 一時的なオーバーレイでのタスクが必要： dialog または popover
  • 入力を受け取る： form 内のネイティブなフォームコントロール

レビューチェックリスト

  • ネイティブ要素で実現できますか？
  • 追加コードなしで Tab によるフォーカス移動が機能しますか？
  • ボタンは Enter／Space で動作しますか？
  • 無効状態では、操作が正しくブロックされ、公開状態も適切ですか？
  • スクリーンリーダーのロールは、視覚的なコントロールと一致していますか？
  • フォームコントロールはフォームと一緒に送信／リセットされますか？
  • カスタム ARIA はプラットフォームの仕様を書き換えるのではなく、補足するものですか？

関連エッセイ

  • セマンティックウェブについて
  • セマンティック HTML を最優先にしたライブラリを作った理由

コメント

Markdown 対応