01
このSkillでできること
- ✓余白、視覚的階層、タイポグラフィ、小さなレイアウト問題を整理する
- ✓アクセシブルなコンポーネント、キーボード操作、フォーカス挙動の方針を確認する
- ✓アニメーション、ローディング状態、エラー表示、レスポンシブな固定要素を点検する
- ✓Tailwind CSSの標準値や既存のテーマ・コンポーネントに沿ってUIの一貫性を高める
02
使い方
01
STEP 1
会話中に「/baseline-ui」と入力して制約を適用する
02
STEP 2
レビューする場合は「/baseline-ui」と入力し、対象ファイルやコードを続けて指定する
03
STEP 3
レビューでは違反箇所、重要な理由、具体的なコードレベルの修正案を求める
04
STEP 4
アニメーションを追加する場合は、明示的に依頼し、指定された制約に従う
03
Skillのインストール
初心者におすすめ
AIにこのSkillを追加してもらう
GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。
このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。
Repository:
https://github.com/ibelick/ui-skills04
このSkillを使うプロンプト例
Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。
このUIコードを /baseline-ui の制約でレビューしてください。違反箇所は該当する行またはスニペットを引用し、理由を1文、具体的な修正案を添えてください。出力例を見る
違反: アイコンのみのボタンに aria-label がありません。
理由: スクリーンリーダー利用者がボタンの目的を認識できません。
修正案: ボタンに aria-label を追加してください。05
安全性チェック
自動解析による参考情報です。Skillの安全性を保証するものではありません。
外部API通信検出あり
Shellコマンド実行検出あり
ファイル読み取り明確な記述なし
ファイル書き込み明確な記述なし
ネットワークアクセス検出あり
認証情報明確な記述なし
検出根拠を見る
- shell: ## CLI Browse and fetch skills from your terminal. ```bash npx ui-skills start npx ui-skills categories npx ui-skills list --category motion npx ui-
- network: e same interaction surface - SHOULD prefer [`Base UI`](https://base-ui.com/react/components) for new primitives if compatible with the stack - MUST add a
- network: Skills for Design Engineers. More on [ui-skills.com](https://www.ui-skills.com/) ## CLI Browse and fetch skills from your terminal. ```bash npx ui-s
06
関連Skill
verify-wink
Verify Wink
WinkのWeb UIをデスクトップとスマートフォン画面で操作し、機能や修正をユーザー視点で検証してPASS/FAILの証跡を残します。
評価確度:暫定ai-agentsclaude-codecodex
od-contribute
od-contribute(OpenDesign貢献フロー)
OpenDesignへのSkill・デザインシステム提供、ドキュメント翻訳、誤字修正・ブログ作成、バグ報告を支援し、検証後にPRまたはIssueを作成します。
↗ 急上昇agent-skillsai-designdesign-systems
agent-device
agent-device
iOS、Android、tvOS、macOS、Fire TV、Vega OS TVアプリを操作・検証するためのエージェント向け自動化スキル。
↗ 急上昇agentic-aiautomatione2e-testing