baseline-ui

baseline-ui の概要

baseline-ui ができること

baseline-ui は、Tailwind CSS プロジェクトに対して、意見のはっきりした基準線に照らして UI をレビューしたり生成したりするための skill です。AI の出力が、バラついた余白、弱いアクセシビリティ、不要なアニメーションへと流れていくのを止めたい場面に向いています。baseline-ui を入れるか迷っているなら、価値の中心は「UI のアイデアを増やすこと」ではなく、UI の判断をより厳密にすることにあります。

どんな人に向いているか

baseline-ui は、開発者、コードで作業するデザイナー、そして実用的な基準線でコンポーネント出力を整えたい AI 支援ビルダーに最適です。特に React/Tailwind スタックと相性がよく、レビューに回る前に baseline-ui skill に問題を拾わせたいときに役立ちます。チームですでに厳密なデザイントークンやコンポーネントプリミティブを運用しているなら、この skill はそれらを置き換えるのではなく、補強する役割を果たします。

何が得意か

baseline-ui のガイドは、アニメーションの制限、タイポグラフィの дисципline、アクセシビリティのプリミティブ、レイアウトのアンチパターン回避に重点を置いています。そのため、見た目を整えるだけでなく、実装を一貫させることが目的の UI Design タスクに強い skill です。プロンプトが曖昧なときでも、モデルにデフォルトで安全な判断をさせたい場合に特に有効です。

baseline-ui skill の使い方

baseline-ui をインストールして呼び出す

baseline-ui をインストールするには、リポジトリの skill インストール手順を使います: npx skills add ibelick/ui-skills --skill baseline-ui。実際の運用では、/baseline-ui または /baseline-ui <file> を参照して会話やファイルに対して呼び出す形です。UI Design のレビューに baseline-ui を使う場合は、対象のファイルや依頼内容に、実際のコンポーネント、ルート、レイアウトの文脈を含めてください。

適切な入力の形を与える

baseline-ui は、対象のコンポーネント、フレームワーク、制約レベルを最初に明確に伝えるほどよく働きます。弱いプロンプトは「このカードをもっと良くして」です。強いプロンプトは「この React/Tailwind のカードを、余白、モーション、キーボード操作、アイコンのみボタンのアクセシビリティの観点でレビューし、既存の primitives は維持して」です。後者は、baseline-ui usage において、モデルが確認すべき失敗パターンを具体化できるため有効です。

先に読むべきファイル

まず SKILL.md を読み、そのあとでプロジェクトで使われているスタックやコンポーネント規則を定義している repo ファイルを確認してください。この repository には追加の rules/、resources/、scripts/ フォルダがないため、SKILL.md が主な正本です。周辺プロジェクトに独自の primitives や tokens がある場合は、baseline-ui に出力修正を依頼する前にそれらを読んでおくとよいです。

結果をよくするワークフロー

baseline-ui は、生成を早めるだけのショートカットではなく、レビューのゲートとして使うのが効果的です。まず UI を作成させ、次に baseline-ui で skill ルールに照らして監査し、最後に指摘された部分だけを修正します。この流れは、広い再設計ではなく、簡潔なコードレベルの修正を求めるときに特に効果的です。baseline-ui skill は、実際の違反が見えるくらい具体的なタスクで最も力を発揮します。

baseline-ui skill の FAQ

baseline-ui は Tailwind CSS 専用ですか？

いいえ。Tailwind CSS が主な適合先ですが、この skill の本質は、余白、モーション、プリミティブ、アクセシビリティに関する UI 制約を強制することにあります。スタックが Tailwind を使っていなくても、一部のスタックルールは関係性が薄くなるだけで、レビューのロジック自体は役立ちます。baseline-ui のインストール価値を最大化するなら、Tailwind を前提にしたプロジェクトで使うのが最適です。

通常のプロンプトと何が違いますか？

通常のプロンプトは「きれいな UI」を求めがちですが、それでは範囲が広すぎます。baseline-ui は、アニメーション、タイポグラフィ、プリミティブ、アンチパターンを繰り返し確認できる基準線を与えるため、モデルが一貫しないパターンを勝手に作り込みにくくなります。その結果、baseline-ui ガイドは、その場しのぎの指示よりもチームのワークフローで信頼しやすくなります。

baseline-ui は初心者向けですか？

はい。ただし、どのファイルや UI 面を扱いたいかがすでに分かっている場合に限ります。初心者が最も価値を得やすいのは、具体的なコンポーネントを示して、違反点と修正案を求める使い方です。まだアーキテクチャを決めている途中なら、baseline-ui は学習ツールというより制約チェッカーのように感じられるかもしれません。

どんなときに使わないほうがいいですか？

強い実験的モーション、Tailwind デフォルト外のカスタムデザインシステム、全面的なビジュアル刷新を求めるときは、baseline-ui を使わないでください。これは基準線を守らせる skill であって、自由なブランディング支援ツールではありません。プロジェクトが意図的に一般的な UI の慣例を崩している場合、baseline-ui のフィードバックは制約が強すぎると感じられることがあります。

baseline-ui skill を改善する方法

UI の対象範囲をはっきりさせる

baseline-ui で最も良い結果を得るには、正確なコンポーネント名、状態、インタラクション範囲を指定することが重要です。モーダル、ナビゲーションメニュー、フォーム行、空状態のどれをレビューするのかを明示してください。そうすると baseline-ui skill は、プロダクトの形を推測するのではなく、キーボード操作、フォーカス処理、モーション、コンポーネント選択に集中できます。

何を変えないべきかを伝える

プロジェクトですでにコンポーネント primitive の仕組みを使っているなら、その点を明記してください。baseline-ui は、既存の primitives を優先し、同じ画面で複数のシステムを混在させない方向で動くよう設計されています。Tailwind のデフォルト、アニメーションライブラリ、既存の class ヘルパーを維持したい場合も、その制約を伝えてください。そうした条件は、提案される修正内容に実質的な影響を与えます。

根拠と修正を求める

レビュータスクでは、具体的な違反箇所、短い理由、コードレベルの修正案を要求してください。この形式は baseline-ui の想定用途と一致しており、コードレビューにそのまま使いやすくなります。最初の結果が広すぎる場合は、1 つのファイルまたは 1 つのインタラクションに絞り、同じ baseline に加えて、直したい具体的な失敗点を添えて baseline-ui を再実行してください。