ux-component-states
✓ホバー、フォーカス、アクティブ、無効、読み込み、エラー状態などの対話型コンポーネントの状態パターン。ボタン、入力、カード、またはインタラクティブな要素を構築するときに使用します。 （プロジェクト）
SKILL.md
Interactive state management for web components. This skill covers visual feedback for all interaction states, ensuring components feel responsive and accessible.
Custom elements are "undefined" until JavaScript loads and registers them. Use :not(:defined) to prevent Flash of Unstyled Content (FOUC):
Important: Element references are stored during construction - NEVER use querySelector.
ホバー、フォーカス、アクティブ、無効、読み込み、エラー状態などの対話型コンポーネントの状態パターン。ボタン、入力、カード、またはインタラクティブな要素を構築するときに使用します。 （プロジェクト） ソース: matthewharwood/fantasy-phonics。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/matthewharwood/fantasy-phonics --skill ux-component-states- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
ux-component-states とは？
ホバー、フォーカス、アクティブ、無効、読み込み、エラー状態などの対話型コンポーネントの状態パターン。ボタン、入力、カード、またはインタラクティブな要素を構築するときに使用します。 （プロジェクト） ソース: matthewharwood/fantasy-phonics。
ux-component-states のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/matthewharwood/fantasy-phonics --skill ux-component-states インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/matthewharwood/fantasy-phonics
詳細
- カテゴリ
- *クリエイティブ
- ソース
- skills.sh
- 初回登録
- 2026-02-01