使い方ガイドへスキップ
baseline-ui作者 Julien Thibeaut

Baseline UI スキル。

Claude Code と Codex 向けのデザインレビュー用スキル。余分な装飾を取り除き、スペーシング、階層、タイポグラフィ、小規模なレイアウトの問題を修正します。

  • デザインレビュー & アクセシビリティ
  • UI コード
ibelick/ui-skills · skills/baseline-ui/SKILL.mdSKILL.md
--- name: baseline-ui description: Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass. --- ## How to use ## Stack ## Components ## Interaction ## Animation ## Typography
2026-09-14 に上流ファイルから読み込まれた冒頭部分とセクション見出し · 全 3,417 文字

01 できること

Claude CodeとCodexにおけるbaseline-ui Skillの役割

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

Baseline UIは、コードベース内でAI生成インターフェースの質の低下を止めるための、こだわりのUIベースラインを強制するレビュー用スキルです。React primitivesを使用するTailwind CSSプロジェクトを対象としており、会話内のあらゆるUI作業に対する恒常的な制約セットとして、またはファイル単位のレビューパスとしてインストールされます。

このスキルの特徴は、その語彙にあります。h-screenよりh-dvhを使う、見出しにはtext-balanceを使う、アニメーションはコンポジターのみで200ms以内に制限する、任意のz-indexの値を使わないなど、使うべき、または避けるべき正確なユーティリティとpropsを名指ししています。インターフェースの素早いクリーンアップや仕上げのパスが必要なときに使用してください。

生成されるもの

  • 各違反がなぜ重要なのかを一文で説明します。
  • それぞれの指摘事項に対する、コードレベルの具体的な修正案です。
プロンプト例を見る ↗

仕組み

  1. 01
    会話全体の制約セットとして呼び出す

    素のコマンドを実行すると、その会話内で行われるすべてのUI作業に対して、このファイルの制約が適用されます。1つのファイルだけではありません。

  2. 02
    あるいは単一ファイルを指定する

    ファイルターゲットを渡すと、スキルはレビューモードに切り替わり、そのファイルを以下に列挙するすべての制約と照合して確認します。

  3. 03
    3部構成の違反レポートを返す

    各指摘事項では、問題のあるスニペットを引用し、なぜ問題なのかを短い一文で示し、コードレベルの修正案を提案します。

  4. 04
    制約グループを順番に確認する

    このファイルは、ルールをStack、Components、Interaction、Animation、Typography、Layout、PerformanceおよびDesignに整理しており、それぞれにMUST、SHOULD、NEVERの項目が混在しています。

02 適合性を確認

baseline-ui Skill を使用するタイミング

この種のデザインレビューの作業では、Claude Code または Codex で baseline-ui スキルを使用してください。適合範囲と制限事項は、スキル自体のファイルから引用しています。

適している場合

  • 一貫したベースラインから乱れてしまったインターフェースの、簡単なクリーンアップや仕上げ作業。
  • スペーシング、階層構造、タイポグラフィ、細かなレイアウト上の問題について、特定の1ファイルをレビューする作業。

境界を知る

  • グラデーション、カスタムイージングカーブ、カスタムレタースペーシングに依存するデザイン作業。これらはすべて、明示的なリクエストがない限り制限されています。
  • キーボードやフォーカスの挙動を自前で実装すること。これは明示的にリクエストされない限り許可されません。

提供すべきもの

  • レビュー対象のファイル任意項目です。ファイルを指定すると、スキルはそのファイルのみを対象とした違反報告を行うレビューパスになります。

03 スキルの内部

baseline-uiスキルがClaude CodeとCodexに与えるルール

SKILL.md がエージェントに設定する 8 つの具体的な指示・既定値・制限 — 結果を変える部分です。

  1. Tailwind CSSのデフォルト値を守る

    カスタム値が許容されるのは、それがすでにプロジェクト内に存在している場合、または明示的にリクエストされた場合のみです。それ以外の場合、エージェントはTailwindのデフォルト値を使用しなければなりません。

  2. リクエストがない限りアニメーションは使用しない

    アニメーションはデフォルトで無効です。明示的にリクエストされた場合でも、アニメーション可能なのはコンポジタープロパティのみで、width、height、top、left、margin、paddingは対象外です。

  3. インタラクションフィードバックは200ms以内に制限する

    エントランスにはease-outを使用し、ループするアニメーションは画面外に出た際に一時停止し、prefers-reduced-motionを尊重する必要があります。

  4. プリミティブシステムを混在させない

    キーボードやフォーカスの挙動を伴うものには、Base UI、React Aria、Radixのいずれかによるアクセシブルなプリミティブが必要です。既存のプロジェクトのプリミティブが優先され、明示的にリクエストされない限り、キーボードやフォーカスの挙動を自前で再構築することは禁止されています。

  5. h-screenではなくh-dvhを使用する

    インタラクションの項目では、固定要素が safe-area-inset を尊重すること、およびエラーがアクションの発生場所の近くに表示されることも求められます。

  6. 固定の z-index スケールを使用する

    任意の z- 値は許可されておらず、正方形の要素は w- と h- のペアではなく size- を使用する必要があります。

  7. Typography のユーティリティはそのまま使用する

    見出しには text-balance、本文には text-pretty、データには tabular-nums を使用し、letter-spacing は明示的な指示がない限り変更してはいけません。

  8. デフォルトではグラデーションやグロー効果を使用しない

    グラデーションの使用には明示的な指示が必要であり、紫色や多色のグラデーションは完全に禁止されています。また、グロー効果を主要なアフォーダンスとして使用することはできません。

04 実際に使う

Claude Code または Codex に baseline-ui をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex または お使いのエージェントに baseline-ui を追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/ibelick/ui-skills --skill baseline-ui

skills/baseline-ui/SKILL.md 用の汎用的な skills CLI 形式です。リポジトリによっては独自のパスを文書化している場合があります。

スキルに最初のデザインレビュータスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt
Review [src/components/SettingsDialog.tsx] against the baseline UI constraints. We generated this dialog quickly and the spacing, hierarchy and layout feel off, so report the violations with the exact lines, why they matter, and the code-level fix for each.

出典:SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの:

  • transform と opacity 以外のプロパティがアニメーション対象になっていないことを確認します。
  • アイコンのみのボタンに aria-label が付与されており、破壊的な操作が AlertDialog の背後にあることを確認します。

OpenDesign では、baseline-ui の SKILL.md リンクからインポートします:Plugins → Add → Skill → Import from link。その後、上部バーで選択してください。

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Repository
github.com/ibelick/ui-skills ブランチ main
スキルファイル
skills/baseline-ui/SKILL.md コンテンツチェックサムは検証時に記録されました。コミット 79081ab
License
MIT LICENSE より
リポジトリスター数
8,402 GitHub スナップショットは 2026年9月14日に ibelick/ui-skills リポジトリ全体を対象に取得されました。このカタログには5つのスキルが含まれています。baseline-ui の評価や使用回数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません(2026-08-28 確認)。このページには実行記録がありません。

SKILL.md の中身

  1. 使い方2種類の呼び出しモードがあります。単純なコマンドは制約を適用し、ファイル引数を渡すと違反レポートが生成されます。
  2. スタックTailwind CSS のデフォルト設定、JS アニメーション用の motion/react、tw-animate-css、cn ユーティリティを使用します。
  3. コンポーネントアクセシブルなプリミティブのみを使用し、既存プロジェクトのプリミティブを優先します。アイコンのみのボタンには aria-label を付与します。
  4. インタラクション破壊的な操作には AlertDialog、読み込み中にはスケルトン、h-dvh、safe-area-inset を使用し、貼り付けをブロックしません。
  5. アニメーション指示がない限りアニメーションは使用しません。コンポジタープロパティのみを使用し、ease-out、200ms の上限を守り、reduced-motion を尊重します。
  6. Typography見出しには text-balance、本文には text-pretty、データには tabular-nums を使用し、tracking は変更しません。
  7. レイアウト任意の値ではなく固定の z-index スケールを使用し、正方形の要素には size-* を使用します。
  8. パフォーマンス大きな blur や backdrop-filter のアニメーションは避け、will-change の範囲を限定し、useEffect よりもレンダリングロジックを優先します。
  9. デザイングラデーションやグローによるアフォーダンスは使用せず、デフォルトのシャドウスケールとアクセントカラーを1色に絞り、既存のトークンを再利用します。
スキル自身による説明
「余白、階層、タイポグラフィ、細かなレイアウトの問題を修正することで、UI コードを素早く改善します。インターフェースに迅速なクリーンアップや磨き上げが必要なときに使用してください。」

SKILL.md の冒頭記述より。ファイル全体は約3,417文字です。GitHub で完全なファイルを読む

06 インストールする前に

baseline-ui スキルについてのよくある質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

どのようなスタックを前提としていますか?

Tailwind CSS のデフォルト設定、JavaScript アニメーションが必要な場合の motion/react(旧 framer-motion)、エントランスやマイクロアニメーション用の tw-animate-css、clsx と tailwind-merge から構築された cn ユーティリティを前提としています。

見栄えを良くするためにアニメーションやグラデーションを追加しますか?

いいえ。アニメーションは明示的に要求されない限り追加されず、グラデーションも明示的に要求されない限り使用されません。パープルやマルチカラーのグラデーションは完全に除外されます。

どのコンポーネントライブラリを許可していますか?

キーボードやフォーカスの動作を伴うものにはBase UI、React AriaまたはRadixを使用し、プロジェクトの既存のプリミティブを優先します。Base UIは、スタックと互換性がある場合、新しいプリミティブの推奨選択肢であり、1つのインタラクション表面内で複数のプリミティブ系統を混在させることは許可されていません。

Baseline UI

実際のデザインレビュータスクで baseline-ui を実行します。

OpenDesign をダウンロードし、SKILL.md リンクから baseline-ui をインポートして、上記のプロンプトを貼り付け、結果の前にプランを確認してください。

ターミナル
npx skills add https://github.com/ibelick/ui-skills --skill baseline-ui

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート/スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応