build-professional-workbench

超高速なマルチ職種ワークベンチ構築スキル

名称を変えただけのダッシュボードシェルではなく、職種を中心とした業務プロダクトを構築してください。既存のアーキテクチャがある場合は維持してください。新規の純粋な Web ビルドでは、assets/reference-workbench-template/ を起点として、教育向けの参照ドメインを完全に置き換えてください。

開始

1. 依頼を新規構築、拡張、再設計、監査のいずれかに分類します。
2. 職業、組織、役割、ユーザー、業務オブジェクト、ライフサイクル、意思決定、リスク、承認、プライバシーの境界、デプロイモードを推定します。欠けている選択肢がプロダクトに重大な影響を与える場合に限り、質問してください。
3. 必要なリファレンスのみを読みます。
   • 新規構築では必ず deployment-modes.md を読みます。
   • シェル、モジュール、ページの契約については workbench-architecture.md を読みます。
   • ドメインパターンの選択や組み合わせについては profession-profiles.md を読みます。
   • KPI、グラフ、分析ページについては dashboard-catalog.md を読みます。
   • ビジュアル、モーション、キャンバス、ナビゲーション、レスポンシブ対応については design-interaction.md を読みます。
   • ユーザーがデータを作成、編集、削除、配置、注釈付け、インポート、添付できる場合は local-persistence.md を読みます。
   • レコードの生成と最終受け入れの前に data-and-validation.md を読みます。
4. 新規のオフラインプロジェクトでは、次を実行します。

python3 scripts/scaffold_professional_workbench.py <target> --profile <profile> --profession "..." --organization-name "..." --role-name "..." --user-name "..." --deployment-mode local-offline

5. 足場は出発点として扱います。すべてのルート、レコード、ワークフロー、グラフ、コントロール、永続化経路、ドメイン残存物のチェックに合格するまで、納品しないでください。

職種をモデル化する

• 役割の主な名詞を定義します。案件、顧客、患者、プロジェクト、候補者、アカウント、コンテンツ、資産、実験、注文、インシデント、または同等のオブジェクトなどです。
• ライフサイクルの状態、担当者、引き継ぎ、期限、意思決定、例外条件、証拠、承認を定義します。
• 個人の業務、チーム運用、共有リソース、分析、管理・コンプライアンスを分けます。
• 組織、役割、期間、地域、チーム、ポートフォリオのコンテキストを常に見えるようにします。
• ナビゲーションには、意味を明確に伝える日本語のラベルを使用します。アイコンは意味を補強するものに限ります。
• profession-profiles.md からプロファイルを1つ選ぶか、複合的な役割には複数のプロファイルを組み合わせます。実際の役割に裏付けられた責務のみを残してください。

完全なページを構築する

• すべてのナビゲーション項目に、タイトル、コンテキスト、アクション、十分な密度のレコード、ステータス、独自の分析ダッシュボードを備えた完全なページを用意します。
• プレースホルダー、3行だけのテーブル、名前を変えて繰り返すカード、装飾的なグラフ、機能しないボタンは避けてください。
• 一貫性のある決定論的なデモ用レコードを使用し、シミュレーションデータであることを明記します。
• 適切な通常、空、読み込み中、警告、エラー、無効、期限超過、競合、承認、確認の各状態を含めます。
• レコード数の多いページでは、検索、絞り込み、並べ替えに対応し、ページネーションまたは制御されたスクロールを設けます。
• 主要なレコードを直接編集できるようにします。作成、更新、削除は、テーブル、詳細、エクスポート、ダッシュボードで共通して使用するデータソースに反映させます。
• 日付、期間、フィルター、セグメントのコントロールは、実際のレコードに作用させます。見た目だけのコントロールは不具合です。
• 現在の絞り込み済みレコードを、安定したヘッダー付きでエクスポートします。インポートでは、形式、行構造、上限、マージまたは置換の意図を検証します。最初にプレビューを表示し、失敗時には現在のデータを変更しないでください。
• 主要な業務オブジェクトを、一覧、詳細、ワークフロー、ダッシュボードの各ページでたどれるようにします。

ダッシュボードに明確な違いを持たせる

• 各ページで、異なる業務上の問い、KPI セット、グラフの組み合わせ、診断、操作、配色バリエーションを用意します。
• 時系列にはトレンド、カテゴリには棒グラフ、密度にはヒートマップ、フローにはサンキー図、関係性にはネットワーク、プロファイルにはレーダーチャートまたは平行座標、スケジュールにはガントチャート、分布にはヒストグラムまたは箱ひげ図を使います。
• 各ダッシュボードは、主役となるグラフ1つ、3～4個の KPI、補助的な診断、ランキング形式またはセグメント別の表示、範囲コントロール、ツールチップ、簡潔な解釈で構成します。
• グラフは同じ表示中のレコードに紐付け、アクセシブルなテキスト要約を用意します。
• 財務、医療、法律、安全、コンプライアンスに関する出力は、あくまで意思決定支援として扱い、専門家による判断を自動化するものではありません。

Quiet Luxury A を適用する

• ユーザーが別のビジュアルの方向性を選択しない限り、付属の css/premium-minimal.css を最終カスケードレイヤーとして使います。
• 温かみのあるアイボリーの背景、インクグリーンのタイポグラフィ、彩度を抑えたセージのアクセント、セリフ体のディスプレイタイトル、システムサンセリフ体のコントロール、細い罫線、ゆとりのある余白を保ちます。
• 入れ子状の角丸カードや濃い影よりも、エディトリアルな階層構造と配置を優先します。
• シェルは落ち着いた印象にし、テキストラベルを付けます。分析用ダッシュボードは明るくし、ダークグラファイトは空間的なヒーローまたは無限キャンバスに限定します。
• ヒートマップは、5段階の正方形セルを使い、密度を保ちながらも落ち着いた表示にします。
• 状態を明確にできる場合は、ホバーによる確認、フォーカス、選択、詳細表示への移動、詳細ドロワー、モーダル、パン／ズーム、段階的な情報開示を使います。
• モーションは短く、中断可能にし、prefers-reduced-motion が設定されている場合は無効にします。
• キーボード操作、視認できるフォーカス、セマンティックなコントロール、タッチ操作向けレイアウト、印刷／レポート表示を維持します。
• 新しい組織や職種に合わせて、--workbench-folio、コンテキストセレクター、ヒーローの文言を調整します。
• 参照用のヒーロー画像はテキストとして js/hero-media.js に埋め込まれているため、Skill は Red Skill との互換性を維持し、生成されたサイトは完全にオフラインで動作します。

ローカル優先の永続化を必須にする

• 作成、編集、削除、並べ替え、注釈、下書き、設定、レイアウトの変更は、検証後に現在のコンピューターへ自動保存します。
• 最初の意味のある描画より前に、保存済みの状態を復元します。保存に成功していないのに保存通知が表示されるのは不具合です。
• 小さな JSON レコードと下書きには、付属の js/local-persistence.js を使います。添付ファイル、大規模なコレクション、オフラインキューには IndexedDB を使います。
• 各ワークベンチに名前空間を設定し、保存レコードをバージョン管理して、スキーマ変更時にはマイグレーションを追加します。
• 保存中、保存済み、失敗、容量超過の状態を表示します。書き込みに失敗したデータを通知なしに破棄してはいけません。
• バージョン管理された JSON エクスポート、マージ／置換のセマンティクスに基づく検証済みのアトミックなインポート、添付ファイル管理、確認を伴うデータ消去を用意します。インポートが部分的に適用された場合はロールバックします。
• デモ用の初期データは個人のレコードと分離します。シークレットは保存せず、ブラウザーのストレージが暗号化されていると主張しないでください。
• local-offline では、単一デバイスと単一ブラウザーに限られることを明示します。team-server または enterprise では、認証済み API とサーバーデータベースを正本として使います。詳しくは deployment-modes.md を参照してください。

付属の実装を使用する

参照用テンプレートでは、CDN を使わない純粋な HTML/CSS/JavaScript によって、複数領域のテキストナビゲーション、56 個のモジュールエントリー、詳細なレコード、Quiet Luxury A、空間的なヒーロー、無限キャンバス、アクティビティヒートマップ、カスタムカーソル、ルート遷移のモーション、22 種類のグラフ、編集可能なテーブル、名前空間付き localStorage、自動保存、バージョン管理されたバックアップ／インポート、ダイアログ、フォーム、レスポンシブ動作、印刷用スタイルを提供します。

参照用のドメイン名、ナビゲーション、レコード、ワークフロー、KPI、シミュレーション上の人物、ヒーローの文言はすべて置き換えてください。タイトルだけを変更して、教育分野以外のワークベンチとして公開してはいけません。

検証

1. このスキルを Red Skill にアップロードする準備をする際は、python3 scripts/validate_redskill_package.py . を実行します。
2. 生成されたワークベンチに対して、python3 scripts/validate_professional_workbench.py <project-path> を実行します。
3. ネイティブの構文チェックまたはビルドチェックを実行します。
4. すべてのナビゲーション項目が完全なページに移動し、それぞれ異なるダッシュボードを表示することを確認します。
5. レコードの密度、ページ間の一貫性、運用フィルター、フォーム、詳細、ワークフローの状態、キーボード操作を確認します。
6. オフライン配信に向けて、ローカルアセットと file:// での動作を確認します。
7. 追加 → 再読み込み、編集 → 再読み込み、削除 → 再読み込み、エクスポート → クリア → インポート、不正なインポートの拒否、ストレージ障害の報告を確認します。
8. Node.js を利用できる場合は、node scripts/test_local_persistence.js <project-path> を実行します。
9. 教育分野以外のプロファイルでは、教育分野に関する記述が残っていないことを必須とします。
10. ブラウザーで確認できる場合は、ビジュアル QA とインタラクション QA を実施します。ファイルの存在や構文チェックの成功を、ビジュアル面での合格と同一視してはいけません。
11. パス、デプロイモード、職業、役割、モジュールとダッシュボードの網羅状況、CRUD／フィルター／インポート／エクスポートの結果、永続化の結果、検証結果、残る制約を報告します。

ガードレール

• 外部への書き込み、承認、メッセージ送信、取引、公開を行う権限があると推測してはいけません。
• シミュレーションデータを実データとして提示したり、機密性の高い識別情報を公開したりしてはいけません。
• 専門家による確認なしに、重大な影響を伴う意思決定を自動化してはいけません。
• オフライン配信物に外部 CDN を使用してはいけません。
• 選択したデプロイモードのアーキテクチャ、セキュリティ、受け入れの各ゲートに合格するまで、production_ready を false のままにします。
• ユーザーから依頼された場合、または現在のサイト構築指示でホスティングが必要な場合を除き、公開やデプロイを行ってはいけません。