ns-frontend-design

フロントエンドデザイン

独自性のある、本番環境に耐える UI を提供します。どこにでもあるテンプレートのような見た目にはしません。

セッションの起動

../ns-harness/references/session-boot.md を参照してください。.nextstage-harness/rules/architecture-rules.md と、該当する場合はレイヤー固有のフロントエンドルールを読みます。

読み込むコンテキスト

ファイル	タイミング
docs/context/design-brief.md	常に最初に確認します。トークン、タイポグラフィ、モーションが記載されています
docs/context/stack-confirmed.md	フレームワークと CSS の方針
.nextstage-harness/rules/*frontend*	プロジェクトの規約
references/react-analytics-ui.md	React スタックに加え、KPI、チャート、タイムライン、テーブル、ソース、アラートを扱う場合

design-brief.md がない場合は、アーキテクチャルールからスタックを推測し、大規模な UI 作業に入る前に、ブランドの方向性について焦点を絞った質問を 1 つしてください。

スタックが React で、作業にダッシュボードや分析 UI が含まれる場合は、実装前に references/react-analytics-ui.md を読んでください。デフォルトのチャートライブラリは Recharts です。

使用する場面

• 新しいページ、レイアウト、コンポーネントライブラリの作成
• 既存画面のビジュアル刷新
• デザインブリーフとの整合やトークンの適用
• 「ありがちな AI UI」（紫のグラデーション、同じようなカードグリッド）の削減

ワークフロー

1. 監査 — コードベース内の既存 UI パターンをスクリーンショットまたは読み取って確認し、フレームワーク（React、Vue、Blade など）を記録します。
2. 方向づけ — design-brief.md を適用するか、最小限の方針（文字サイズ、余白、アクセント、モーションの度合い）を定めます。
3. デザイン — 構成、階層、状態（ホバー、フォーカス、空、エラー）、レスポンシブのブレークポイントを設計します。
4. 実装 — 差分を最小限に抑え、プロジェクトのファイル構成と命名に合わせます。
5. 検証 — キーボードフォーカス、コントラスト、動きを減らす設定への対応を確認します。

references/anti-slop.md と references/checklist.md を参照してください。

原則

• 画面ごとに強いビジュアルアイデアを 1 つ採用し、流行を一度に詰め込みません。
• タイポグラフィで階層を表現し、色だけに頼りません。
• 目的のあるモーション — 装飾的なループではなく、フィードバックのためのマイクロインタラクションを使います。
• デフォルトでアクセシブルに — セマンティック HTML、ラベル、フォーカスリングを使用します。

ns-spec-driven との連携

SDD のフェイススキルから呼び出された場合は、UI タスクの範囲内にとどまり、要件の策定やタスク生成に広げないでください。

禁止事項

• バックエンド API の設計やデータベーススキーマ
• MR のゲートで ns-reviewer の代わりを務めること
• プロジェクトに CSS／コンポーネントの規約がある場合に、それを無視すること