uix-skill は何をしますか？
「生成された」のではなく「デザインされた」ように見えるUIを構築します。見た目を一度決め（DESIGN.md）、そこから構築し、スクリプトで結果を確認します。
パス: 以下の references/、data/、scripts/ のパスはすべて、このSKILL.mdを含むフォルダーからの相対パスです。スクリプトはユーザーのプロジェクトルートから node <そのフォルダー>/scripts/<名前>.mjs として実行します。スクリプトにはNode 22が必要です。
コマンド
| コマンド | 役割 |
|---|---|
/uix init | プロジェクトを読み込み、3つの質問をし、3つの方向性を提案し、DESIGN.mdを書き、lintを実行します。 |
/uix build | DESIGN.mdに従ってページ、画面、またはコンポーネントを構築し、チェックし、修正します。デフォルト。 |
/uix audit | チェックを実行し、レポートします。編集はしません。 |
/uix polish | 監査結果の上位問題を修正します。ロジック、ルート、コピーの意味は保持します。 |
/uix motion | 4つの質問に答えた後、モーションをレビューまたは追加します。 |
動詞は /uix-skill <動詞>、uix <動詞>、またはプレーンなリクエスト（「設定ページを作成して」「この画面を監査して」）として到着します。プレーンなリクエストは最も近い動詞にマッピングします。明確な一致がない場合は build とします。
ハードルール
- DESIGN.mdが存在する場合: まずそれを読み、そこから構築します。初期診断と方向性の提案はスキップします。DESIGN.mdで定義されていない色、フォント、角丸は決して発明してはいけません。
scripts/rules.mjsが実行され、Webスタックの場合はscripts/check.mjsも実行されるまでは、決して完了を報告してはいけません。チェックが実行できない場合（「チェック」セクションを参照）、unverified: <理由>と報告します。- チェック後の修復ラウンドは最大2回までです。その後、残っているものを報告します。
- 画像: プロジェクトのアセット、次にOpenverse/Wikimedia（クレジット付き）、最後にCSS/SVGアート。空のプレースホルダーは絶対に使用しません。
- 無料ツールのみ。有料API、キーは使用禁止。
- リクエストのUIスコープ外のファイルは編集しません。
/uix auditは何も編集しません。 - 以下の表に記載されているファイルのみを読み込みます。スタックファイルは1つだけ読み込みます。ただし
shadcnとnuxt-uiは例外で、そのガイドに加えてホストフレームワークのガイドも読み込みます。
実行順序
- プロジェクトを読み込む: package.json、設定、既存のスタイル、DESIGN.md、
public/またはassets/。 - スタックを検出する（以下の表）。そのガイドを読み込む。
- 初期診断。3つの質問（対象ユーザー、画面の役割、トーン）を1つのメッセージでまとめて行う。モバイルスタックの場合: トーンの質問では「落ち着いたモーション？活発なモーション？」も尋ねる；回答をDESIGN.md（
references/design-md.md）にモーションティアとして記録する。ユーザーまたはプロジェクトがすでに回答している質問はスキップする。 references/directions.mdから、トーン、密度、色温度が明確に異なる3つの方向性を提案する。選択を待つ。所有者が事前に方向性を決定している場合は提案をスキップする。- DESIGN.md（
references/design-md.md）を書き、lintを実行する。すべてのlintエラーを修正する。 references/layouts-web.md（マーケティング、コンテンツ用）またはreferences/layouts-app.md（ログイン後の画面用）から構造を選択する。- 最初のセクションを構築する。実際のコピー、実際の画像、すべてのコンポーネントの状態を含める。
- チェックする（以下参照）。エラー、次に警告を修正する。最大2ラウンド。
- 報告する。
ステップ3から5は init に属します。build は既存のDESIGN.mdを使用します。存在しない場合は最初に init を実行します。
既存のデザインシステムを優先
- DESIGN.mdが存在する場合: それを読み、lintし、そこから構築する。
- DESIGN.mdはないが、プロジェクトに独自のトークンやテーマがある場合（Tailwind設定、CSS変数、テーマファイル）:
/uix initはそれらのトークンからDESIGN.mdを（プロジェクトルートに）作成する。ユーザーが新しい見た目を要求しない限り、新しい方向性を提案してはいけない。 - どちらでもない場合: 完全な
initを実行する。 - 独自のトークンとは、フレームワークのデフォルトの初期設定を超える色、フォント、スペーシングが、Tailwind v4の
@themeブロック、Tailwind設定、CSSカスタムプロパティ、またはプラットフォームのテーマファイルに存在することを意味する。create-next-appのデフォルトの--background/--foregroundはこれに該当しない。
読み込むもの
必要になるまで、これ以外は読み込まない。
| タイミング | 読み込むもの |
|---|---|
| 任意のbuild、polish、audit | references/anti-slop.md、references/components-a11y.md |
init、またはDESIGN.mdへの書き込み | references/design-md.md |
init（方向性の提案時） | references/directions.md、次に選択された data/fonts.csv、data/palettes.csv、data/styles.csv の行 |
| マーケティング、コンテンツ、カタログページ | references/layouts-web.md |
| ダッシュボード、テーブル、フォーム、設定、認証 | references/layouts-app.md |
任意のモーション、または /uix motion | references/motion.md |
| モバイルのbuild、polish、audit | references/mobile-foundations.md、references/mobile-patterns.md |
| モバイルモーション | references/motion.md の代わりに references/mobile-motion.md |
| モバイル: アプリの安全な表示、Expo Goと開発ビルドの違い、タップとスワイプのチェック | references/mobile-testing.md |
モバイルアプリの init | data/styles.csv の代わりに data/mobile-styles.csv（選択された行） |
| 任意の画像スロット | references/images.md |
| サンプルDESIGN.mdの形状 | data/examples/ledger.md、field-notes.md、または harbor.md。1つだけ。 |
| すべてのタスク | 1つの references/stacks/<id>.md。shadcn または nuxt-ui の場合は、ホストガイドも含める（「スタック検出」セクション参照）。 |
スタック検出
最初に一致したものが優先されます（上から下）。何も一致しない場合: html-tailwind。依存関係名は正確に一致させること（nextは一致するが next-themes は一致しない）。
| シグナル | スタックID |
|---|---|
package.json に @nuxt/ui | nuxt-ui |
components.json にshadcn、または @/components/ui | shadcn |
artisan ファイル、または composer.json に laravel/framework | laravel |
package.json に nuxt | nuxtjs |
package.json に next | nextjs |
@angular/core または angular.json | angular |
package.json に astro、または astro.config.* | astro |
svelte または @sveltejs/kit | svelte |
package.json に vue | vue |
package.json に three | threejs |
package.json に react-native または expo | react-native |
package.json に react | react |
pubspec.yaml | flutter |
Compose（androidx.compose）を含む build.gradle(.kts) | jetpack-compose |
*.xcodeproj または SwiftUIを含む Package.swift | swiftui |
Avalonia を含む *.csproj | avalonia |
Uno. または Uno.WinUI を含む *.csproj | uno |
Microsoft.WindowsAppSDK を含む *.csproj | winui |
<UseWPF>true</UseWPF> を含む *.csproj | wpf |
TargetPlatformIdentifier が UAP、または Microsoft.NETCore.UniversalWindowsPlatform を含む *.csproj | uwp |
pom.xml または javafx を含む build.gradle | javafx |
| 上記のいずれでもない | html-tailwind |
Web ID: angular, astro, html-tailwind, laravel, nextjs, nuxt-ui, nuxtjs, react, shadcn, svelte, threejs, vue。残りはネイティブです。
「モバイルスタック」とは react-native、flutter、swiftui、jetpack-compose を意味します。これらのリクエストは「読み込むもの」テーブルのモバイル行も読み込みます。
より具体的なスタックが優先されます: nextjs > react、react-native > react、laravel > そのJSフロントエンド。
コンポーネントレイヤーのスタックは2つのガイドを読み込みます: shadcn とそのホストガイド（このテーブルで shadcn 行をスキップして検出された nextjs、react、astro、laravel ...）、および nuxt-ui と nuxtjs。他のプロジェクトは1つだけ読み込みます。
チェック
ユーザーのプロジェクトルートから実行します。<skill> はこのSKILL.mdが入っているフォルダーに置き換えてください。
node <skill>/scripts/rules.mjs [--design DESIGN.md] <path...>
node <skill>/scripts/check.mjs <url|file> [--widths 375,768,1280] [--out .uix/shots] [--themes attr=v1,v2]
node <skill>/scripts/images.mjs "<query>" [--count 6]
- 3つすべてがJSONを出力します。
rules.mjsは{findings, skipped}を出力します：1MB超または読み取り不能なファイルはskippedに理由とともに記録され、エラーとはなりません。check.mjsは{shots, findings, notes}を出力します。notesを読んでください（例：早期にプローブされた読み込みタイムアウト、失敗したスクリーンショット）。終了コード0: 正常。終了コード1: エラーの発見（rules.mjs、check.mjs）。終了コード2: 使用法または環境の問題（3つすべて）。images.mjsは終了コード0または2のみを返します。 - 終了コード2は決して正常結果ではなく、修復ラウンドとしてカウントしません。
check.mjsがページに到達できず、プロジェクトに明白な開発スクリプト（npm run dev等）がある場合は、バックグラウンドで1回起動してリトライします。それ以外の場合はユーザーに尋ねます。不足しているもの（Chrome、Node 22、起動していないサーバー）を具体的に伝えます。 - それでもチェックが実行できない場合、レポートは
unverified: <理由>と表示します。 - Webスタック: ソースに対して
rules.mjsを実行し、次に開発サーバーのURLまたはビルドファイルに対してcheck.mjsを実行します。幅は375、768、1280です。スクリーンショットは.uix/shotsに保存されます:<w>.pngはページ全体、<w>-<n>.pngは最大1600pxのタイルです。全体ショットは縮小されて読めなくなるため、タイルを見てください。check.mjsは最初にページをスクロールするため、スクロールで表示されるコンテンツも確認できます。 - プロジェクトが複数のテーマを定義している場合（
[data-theme]、[data-skin]、.darkなど）、--themesで渡します（例：--themes data-skin=oatmeal,roseまたは--themes class=dark）。各テーマは最後の幅でプローブされ、その発見結果にはthemeが含まれます。 - コントラストの発見結果は色のペアごとにグループ化されます（
count、sample、selectors）。各要素ではなく、トークンを修正します。 - React Native (Expo):
rules.mjsを実行し、次に実行中のMetroサーバーに対してnode <skill>/scripts/check-mobile.mjs --app exp://127.0.0.1:<port>を実行します。Androidエミュレーターの場合は--platform androidを追加します（フラグとルートファイルはスタックガイドにあります）。{shots, findings, notes}を出力し、check.mjsと同様に終了コード0、1、または2を返します。maestro missing:で始まるノートは、階層とフローが実行されなかったことを意味し、「完了できませんでした: <理由>」として報告し、成功とはみなしません。ショットは.uix/mobile-shotsに保存されます。route-not-navigatedという発見結果はエラーであり、決して正常結果ではありません: ショットは別の画面を示しています。修復ループ: 完全なマトリックスではなく、--only <routes>と1つの--devicesエントリで再チェックします。 - 他のモバイルスタック:
rules.mjsを実行します。ネイティブiOSアプリ（SwiftUI）はその後check-mobile.mjs --nativeを使用します（フラグはスタックガイドにあります）；監査パスでは--out "$(mktemp -d)"を使用します。その他はスタックファイルの「確認方法」にある手動スクリーンショットのレシピを使用します（ライト、ダーク、xxxlテキスト）。シミュレーターが利用できない場合:unverified: <理由>。2ラウンドの制限が適用されます。 - 他のネイティブスタック:
rules.mjsを実行し、次にスタックファイルの「確認方法」にある手動チェックリストを実行します。ブラウザーチェックはありません。 errorの発見結果はwarnより先に修正します。保持する warn には1行の理由が必要です。- 修復ループ: チェック、修正、再チェック。最大2ラウンド。その後停止して報告します。
- ルールIDとその修正方法は
references/anti-slop.mdにあります。また、スクリプトでは捕捉できない判断ルールもリストされているので、それらは自分で確認します。
コマンド契約
init
- プロジェクトを読み込み、スタックを検出し、そのガイドを読み込む。
- 既存のトークンまたはDESIGN.mdがある場合: 「既存のデザインシステムを優先」セクションを参照。
- それ以外の場合は3つの質問をし、明確に異なる3つの方向性を提案し、選択を待つ。
任意のスタック: コンテンツの言語（
lang、i18nファイル、コピー）を検出し、data/fonts.csvの行のうちscripts列がそれをカバーするものだけを選択する。 - DESIGN.mdを書く。Lint:
npx --yes @google/[email protected] lint DESIGN.md。エラーを修正する。 - 選択された方向性、書き込まれたファイル、およびlint結果を報告する。
build
- DESIGN.md、スタックガイド、レイアウトファイルを読み込む。
- 構造を1つ選択する。どれを選んだか、その理由を1行で述べる。
- 最初のセクションを完全に構築する。次に残りを構築する。
- チェックを実行する。最大2ラウンドで修正する。
- 報告する。
audit
- スタックを検出し、そのガイドを読み込む。
- チェックを実行する。判断ルールを確認する。
check.mjsとcheck-mobile.mjsにも--out "$(mktemp -d)"を渡し、監査でプロジェクトに何も書き込まないようにする。 - テーブルを出力する。何も編集しない。
| 変更前 | 変更後 | 理由 |
|---|---|---|
| 現在の状態 | あるべき状態 | ルールIDまたは理由 |
polish
- スタックを検出し、そのガイドを読み込む。
- 最初に監査を実行する。
- 上位の問題を、エラーから優先して修正する。ロジック、ルート、コピーの意味は変更しない。
- チェックを再実行する。最大2ラウンド。報告する。
motion
references/motion.md（モバイルスタック:references/mobile-motion.md）を読み込む。各アニメーションについて、その4つの質問（必要か、何を伝えるか、どのイージングか、どのくらいの長さか）に文章で回答する。- 明確な回答がないアニメーションは削除する。
prefers-reduced-motionの処理を追加する（スタックガイドにネイティブ相当のものが記載されている）。 - Before / After / Why のテーブルを出力する。ユーザーがモーションの追加または修正を依頼した場合のみ変更を適用し、レビューのみの場合は適用しない。
レポート
すべての実行を以下で終了します:
- 変更されたもの（ファイル）
- 残っている発見結果（各ルールIDと理由）
- スクリーンショットとタイルのパス（
.uix/shots、Webの場合）、ショットのパス（.uix/mobile-shots、モバイルの場合）、または実行された手動チェック（他のネイティブの場合） - 追加された画像クレジット