baseline-ui

Baseline UI

UIコードの余白、階層、タイポグラフィ、小さなレイアウト問題を点検・修正し、短時間で仕上がりを整えるスキル。

AIスキル大辞典による日本語要約
品質評価85/100評価確度:十分
人気度(GitHub Star) 100発掘スコア 55
01

このSkillでできること

  • ✓余白、視覚的階層、タイポグラフィ、小さなレイアウト問題を整理する
  • ✓アクセシブルなコンポーネント、キーボード操作、フォーカス挙動の方針を確認する
  • ✓アニメーション、ローディング状態、エラー表示、レスポンシブな固定要素を点検する
  • ✓Tailwind CSSの標準値や既存のテーマ・コンポーネントに沿ってUIの一貫性を高める
02

使い方

01
STEP 1

会話中に「/baseline-ui」と入力して制約を適用する

02
STEP 2

レビューする場合は「/baseline-ui」と入力し、対象ファイルやコードを続けて指定する

03
STEP 3

レビューでは違反箇所、重要な理由、具体的なコードレベルの修正案を求める

04
STEP 4

アニメーションを追加する場合は、明示的に依頼し、指定された制約に従う

03

Skillのインストール

このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。

Repository:
https://github.com/ibelick/ui-skills
04

この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