# Yaoyorozu AI ToolBox Desk

複数の制作プロジェクトについて「いま何を進めるか」を整理する、ブラウザ内の操作可能な試作です。掲載スキルを原典から読み、実装へ手動適用したサンプルとして制作しています。

## ブリーフと設計

- 利用者：ガイドやアプリなど、複数の制作を並行して進める人。
- 主な行動：制作を選ぶ → 次のタスクを確認 → 状態を更新する。
- 範囲：検索・状態と分野の絞り込み、詳細、プロジェクトとタスクの追加・編集、優先度・進行状態の更新、端末内保存、デモのリセット。
- サンプル：Motion guide / UI UX guide / Slides guide / Game prototype。すべて架空のタスク・日付・進捗で、実際のリポジトリやサービスの状態を読んでいません。

### 実装前のデザイン方針

白い制作机に、青いフォルダーの見出しを置くイメージ。左の状態一覧、中央の制作リスト、右の選択内容を固定した役割で並べ、毎回ページを行き来せずに次の作業を選べる構造にします。

```text
状態の入口 | 今日の焦点・次のタスク
           | 検索・分野 | 選んだ制作の詳細
           | 制作リスト | タスク・進行状態
```

- 色：Desk `#f3f6fa`、Paper `#ffffff`、Ink `#172942`、Folder blue `#315dcc`、Soft blue `#e7efff`、Warm note `#fff3cd`。
- 文字：Yu Gothic UI / Hiragino Kaku Gothic ProN / Meiryo。読み続ける作業面として日本語のサンセリフを使い、英字のサービス名のみGeorgiaでアクセントを付けます。
- レイアウト：本文とフォームは左揃え。強調は「次のタスク」1か所へ集め、架空の成果指標や装飾用グラフを入れません。
- 動き：検索や一覧の切り替えは即時。ポインター操作のボタン押下だけ短い反応を返し、キーボード操作と動きを減らす設定では移動を伴う演出を使いません。
- 事前の見直し：紹介ガイドと同じクリーム色・セリフ大見出しを流用せず、作業中の可読性と選択状態が分かる青灰のアプリ画面へ変更しました。

## 適用したスキル

スキルの原典をエージェントが読み、記載された判断をこの実装へ適用しました。`npx`による導入、グローバル登録、専用スキルランタイムの起動は行っていません。

| 原典 | 確認した版 | この試作への適用 |
|---|---|---|
| [Anthropic Frontend Design](https://github.com/anthropics/skills/blob/dbd4588f9e1033efb41dad4bef2f7947c8993d44/skills/frontend-design/SKILL.md) | `dbd4588f9e1033efb41dad4bef2f7947c8993d44` | 対象者・主要行動・色と書体を実装前に決定。リストと詳細を中心にし、無関係な装飾を省く。 |
| [Emil Design Engineering](https://github.com/emilkowalski/skills/blob/2d228630ba1446365f614a108cb8252f1feda202/skills/emil-design-eng/SKILL.md) | `2d228630ba1446365f614a108cb8252f1feda202` | 頻繁な検索・選択を待たせない。押下への短い反応、動きを減らす設定、連続した操作の即時反映。 |
| [Web Design Guidelines skill](https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/web-design-guidelines/SKILL.md) | `063bee94c3f4df8453406c830b0a7df0f2860278` | 下記ガイドラインを取得し、フォーム、フォーカス、URLの状態、エラーと空状態を点検。 |
| [参照ガイドライン](https://github.com/vercel-labs/web-interface-guidelines/blob/434b7f91364665f2f733b310ec54809bf8f37937/command.md) | `434b7f91364665f2f733b310ec54809bf8f37937` | ラベル、フィールド別エラー、最初のエラーへのフォーカス、ダイアログからの復帰、リセット確認、長文折り返し。 |
| [UI Skills / fixing-accessibility](https://github.com/ibelick/ui-skills/blob/9a0cb1e610e3a1a4f0f2723bf2e7680ac1b89cf5/skills/fixing-accessibility/SKILL.md) | `9a0cb1e610e3a1a4f0f2723bf2e7680ac1b89cf5` | 初回実装を見直し、必須フィールドのnative required、制作行の読み上げ情報、一覧のul/liを追加。 |

確認日：2026-10-13。適用箇所の構造化した記録は[skill-application.json](skill-application.json)。原典スキルの本文・サンプルコードは同梱していません。各原典の条件はルートの[ATTRIBUTION.md](../../ATTRIBUTION.md)を参照してください。

## 使い方

`index.html`を開くか、リポジトリのルートから以下を実行します。

```powershell
python -m http.server 8080 --bind 127.0.0.1
```

ブラウザで `http://127.0.0.1:8080/examples/studio-desk/` を開きます。外部API、フォント、画像、フレームワーク依存はありません。

保存先は同じブラウザ・同じオリジンのlocalStorage、キーは `studio-yebisu-desk-v1` です。クラウド同期や他端末との共有はありません。`file:`で直接開いた場合の保存可否はブラウザによって異なります。保存に失敗した場合は画面に表示します。

検索条件と選択中プロジェクトはURLのフラグメント（`#`以降）に反映します。公開サーバーの検索クエリへ入力文を送らないための選択です。URLを人に渡す場合は、フラグメントの検索語も一緒に渡る点に注意してください。

「デモを初期状態に戻す」は確認後、このサンプル専用キーだけを書き換えます。編集中の内容を閉じる場合は、変更を破棄するか確認します。

タスクのチェックとプロジェクトの状態は別に管理します。すべてのタスクをチェックしても、制作を自動で「完了」にしません。1つの制作につき100タスク、全体で100プロジェクトまでの試作です。

## 検証

```powershell
node examples/studio-desk/test_model.cjs
```

ロジックの20項目を検証しました。入力の空白・長さ・日付・選択値、複数条件検索、進捗、次のタスク、保存データの往復と不正データを対象にしています。

ブラウザでは追加・編集、必須エラーとフォーカス、状態・優先度の変更、タスク追加と完了、再読み込み後の保持、検索0件、Escを使った閉じ方と起点への復帰、確認付きリセットを確認しました。390×844の表示では横方向のはみ出しがなく、編集ダイアログは画面内に収まっています。動きを減らす設定ではボタンの移動トランジションが0秒になることも確認しました。

### アクセシビリティの局所レビュー

| 変更前 | 変更後 | 理由 |
|---|---|---|
| 必須をラベル内の文字でだけ表示 | プロジェクト名・タスク名にnative `required`を付加 | 支援技術にも必須条件が伝わるようにする。 |
| 制作行の読み上げが名前と「詳細を開く」のみ | 状態・タスク完了数を名前へ含める | 詳細を開く前に比較できるようにする。 |
| 一覧コンテナー内にボタンだけを配置 | `ul` / `li`の中へ操作ボタンを配置 | 制作一覧と次のタスクの集合を伝える。 |

ロジック検証、ブラウザでの操作確認、視覚的なレビューを分けています。実機スマートフォン、読み上げソフト、複数ブラウザ横断試験、正式なWCAG適合判定は行っていません。これは操作可能な試作であり、本番採用済みのタスク管理サービスや、スキル導入前後の品質比較実験ではありません。