naqsh は何をしますか?
v0.6。<skill> はこのスキルのベースディレクトリを意味します。スクリプトは Node ≥ 22 とローカルの Chrome/Edge が必要です。インストールは不要です。
1. ルーティング
何よりも先に、サーフェスとモードを1行で示します。
| サーフェス | シグナル | 参照ファイル |
|---|---|---|
page | ランディング、ポートフォリオ、マーケティング、プロダクト、ワンページ | references/page.md |
app | ERP、管理画面、ダッシュボード、テーブル、フォーム、設定、CRUD | references/app.md |
| モード | コードを触る? | 出力 |
|---|---|---|
build | はい、新しいUI | UI + DESIGN.md |
redesign | はい。動作、データ、文言は維持する | UI + DESIGN.md |
audit | いいえ | ファイル:行番号と修正案付きの順位付けられた指摘 |
チェックを実行する前に必ず references/rules.md を読んでください。誰も質問に答えられない場合は、自分で判断し、その理由を記録してください。
2. コンテキスト
- スタック、スタイリング、既存のトークン、フォントとその読み込み方法、テーマスイッチ(+ そのlocalStorageキー)、i18n(+ ロケールキー)、ルート、ビルドコマンド。
- 変更してよいものと、絶対に変更してはいけないもの(他のページ、共有コンポーネント、ビジネスロジック)。
- ロケール:いずれかのロケールがキリル文字を使用する場合、選択するすべての書体がそれをカバーしている必要があります。
3. ベースライン
現在の状態に対して以下の両方のチェックを実行し、出力を保持します。これはレポートの「Before」であり、実際のバグ(フォントが読み込まれない、コントラスト不足、オーバーフロー)を明らかにすることがよくあります。
node <skill>/scripts/lint.mjs <projectRoot>
node <skill>/scripts/inspect.mjs http://localhost:PORT --surface <surface> --routes ... --locales ... --themes ...
audit モード:ここから references/audit.md に従い、そこで停止します。プロジェクトファイルは編集しないでください。
4. インベントリ
- 主題: このプロダクトまたは人物だけが持つ8~12の事柄(名前、場所、実際の数字、実際の仕事)。
- 素材: 各ビジュアルスロットに対して、
real(実際のもの)、picture(正直に調達可能な画像)、absent(不在)をマークします。架空の証拠(偽のロゴ、推薦文、指標、スクリーンショット)を決して作り出してはいけません。 - オーディエンスとジョブ: 誰が見るのか、彼らが最初に何をしなければならないか、または何を学ぶ必要があるか。
5. 方向性(テイストに基づいて決定)
node <skill>/scripts/deal.mjs --surface <page|app> --options 3 --project <projectRoot>
このスクリプトは、ライブラリをユーザーのテイストプロファイル(~/.naqsh/taste.json。プロジェクトごとに <project>/.naqsh/taste.json で上書き可能)と最近の選択に対してスコアリングし、異なるファミリーから3つの方向性を提示します。
- ユーザーがいる場合は、3つの方向性(アイデア、書体、パレット、ヒーロー)を表示し、選択してもらいます。いない場合は、コンテンツに最も適したものを選び、その理由を述べてください。
deal.mjs --pick <id>は完全なシート(セクション、モーション、フォントのインポート、ライト/ダークトークン)を表示し、選択を記録します。そのシートに従って構築してください。シートの書体、パレット、ヒーローが契約です。サイズとセクションは実際のコンテンツに適応させてください。逸脱する場合は、書面による理由(例:素材の欠如)を添えてください。page:references/page.mdも読んでください。app:references/app.mdも読んでください。シートのsystemブロックがシェル、密度、KPI、テーブル、ステータス、チャートのスタイルを決定します。
ブリーフ vs テイスト。 ブリーフ内の形容詞(「落ち着いた」「ミニマル」「プロフェッショナル」)は仕事を説明するものであり、見た目を説明するものではありません。これらを満たすには、テイストプロファイルが避ける方向性を選ぶのではなく、明瞭さ、密度、動きの抑制によって実現します。ブリーフの形容詞よりも大胆だからといって方向性を決して捨てないでください。ブリーフとテイストが真に衝突する場合は、テイストを優先し、その旨を DESIGN.md に記録してください。
テイストフィードバック。 ユーザーが結果に対して好き嫌いを述べた場合、~/.naqsh/taste.json(boldness 1~5、temperature warm|cool|neutral|any、typeStyles、likes、avoid、notes)を更新し、その旨を伝えます。1つのサーフェスにのみ当てはまる好みは、その page または app ブロックに記述され、一般キーよりも優先されます。
6. フロア(決して免除されません。スクリプトが大部分をチェックします)
- すべてのロケールでi18nからの可視テキスト。架空のコピーは禁止。
- フォントが読み込まれ、すべてのロケールスクリプトをカバーすること。最も長いロケールが375pxで収まること。
- フォントの
@importは@import "tailwindcss"より上に。要素スタイルは@layer base内に。 - 水平方向のページスクロールが無いこと。
overflow-x: clipを使用し、hiddenや100vwは禁止。 - すべてのテーマでコントラスト比 ≥ 4.5:1(大きなテキストは 3:1)。フォーカスが可視であること。ターゲットサイズ ≥ 24px(44px推奨)。
prefers-reduced-motionを尊重。transition: allは禁止。transform/opacity をアニメーションに使用。- 新しいトークンはスコープ化され、触っていないページが変更されないようにすること。
7. 生成UIの「臭い」(反射的に対処。配布されたシートが許可する場合のみ免除)
デフォルトのTailwind indigo/violet、グロー、ガラス、オーロラブロブ、周回するアイコン、シャイマーボタン、グラデーションテキスト、すべての見出しの上のトラッキングされた大文字のアイブロー、同一の角丸+影のカードグリッド、丸い指標のヒーローバンド、1つの画面で同じ名前やタイトルが繰り返されること。大胆なスケール、強い色、セリフ/サンセリフのコントラストは「臭い」ではありません — 臆病さも失敗です。結果がテンプレートと見分けがつかない場合は、シートのアイデアをより強く推し進めてください。
8. ビルドループ
- トークン(スコープ化)→ メイン画面 / ヒーロー → 残り。
- 各ステップの後:
lint。メイン画面の後:ビルド、プレビュー、そのルートのみでinspect(最も広い幅と最も狭い幅、最初のロケール、両テーマ)。最後に:完全なマトリックス。毎回スクリーンショットを開いて確認します。修正、繰り返し — 最初の完全なパスの後は最大3ラウンド。変更したファイルのみを読み、ターンは短く保ちます。 - 詳細パス:
references/components.mdを読んでください。すべてのコントロールがそれに従って構築され(native-controlは免除されていない限り残さない)、署名モーメントが存在します。inspect ... --detailsを実行し、<out>/details/内のすべてのクロップを開いて、2倍表示でもそれぞれが意図的に見えるまで修正します。 - 詳細パスが完了し、ビルドがフロアFAIL 0になったら、
DESIGN.md(ドラフト)を書き、新しいコンテキストでレビューアーを起動します — エージェントツール、subagent_type: "naqsh:naqsh-reviewer"— プロジェクトルート、サーフェス、モード、方向性ID、<skill>パス、スクリーンショットフォルダ(details/を含む)、プレビューURL、inspectフラグを渡します。レビューアーのfloor、idea、fidelityの修正を適用し(その他は判断に委ねる)、チェックを再実行します。レビューは1ラウンド。評決がreworkだった場合のみ2ラウンド目を許可します。エージェントツールが利用できない場合は、agents/naqsh-reviewer.mdから自分でレビューを行い、スクリーンショットを再確認してください。 - フロアFAIL 0、すべての「臭い」が修正または免除され、プロジェクトのビルドが成功した状態で終了します。プレビューサーバーを停止します。
9. レポート
プロジェクトルート(またはユーザーが指定した場所)に DESIGN.md を作成します:提示された方向性と選択、アイデアの一文、トークン、書体、主要な決定事項、署名モーメント、Before→After のチェックカウント、理由付きの免除、判断されたチェック、未完了項目。最後に、ユーザーに何が好きで何が嫌いかを尋ね、テイストプロファイルが改善されるようにします。