01
このSkillでできること
- ✓UIの余白・階層・タイポグラフィをレビューする
- ✓小さなレイアウト問題を特定し、コードレベルの修正案を示す
- ✓アクセシビリティ、操作、アニメーション、レイアウトの制約を適用する
- ✓Tailwind CSSを前提にUIの一貫性を整える
02
使い方
01
STEP 1
会話中に`/baseline-ui`を指定して制約を適用する
02
STEP 2
`/baseline-ui`に対象ファイルや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を使わせやすくなります。自動発動型では必須とは限りません。
/baseline-ui このUIをレビューし、違反箇所、重要性、コードレベルの修正案を示してください。出力例を見る
違反: `h-screen`を使用
理由: ビューポートの動的な高さに対応しにくいため。
修正案: `h-dvh`を使用する。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