npm - @careerchain/stdd - Versions diffs - 0.1.0 - Mend

@careerchain/stdd 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/assets/.claude/skills/generating-wireframes/examples/toc-list.html ADDED Viewed

@@ -0,0 +1,538 @@
+<!-- 汎用サンプル（toC）: 検索つき一覧画面。固有名詞なし。 -->
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>一覧（toC） - ワイヤーフレーム</title>
+  <style>
+/*
+ * wireframe.css — STDD 汎用ワイヤーフレーム デザインシステム
+ *
+ * 目的:
+ *   低忠実度（low-fidelity）のワイヤーフレームを、技術スタック非依存の
+ *   素の HTML + CSS で表現するための共通スタイル。
+ *
+ * 方針:
+ *   - グレースケール基調。ブランドカラー・装飾は持たない（実装の自由度を縛らない）。
+ *   - レイアウト・情報設計・主要文言（タイトル / ボタン / 項目ラベル）の合意形成に用いる。
+ *   - モバイルファースト。768px 以上でデスクトップレイアウトに展開する。
+ *   - 各画面 HTML の <head> 内に <style> として直接埋め込む（CSS 単体ファイルは作らない / 自己完結 HTML）。
+ *
+ * 使い方:
+ *   components の各クラス（wf-*）を組み合わせて画面を組む。
+ *   クラス一覧は同ディレクトリの SKILL.md / templates/screen.html を参照。
+ */
+/* ===== Reset / Base ===== */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+:root {
+  --wf-ink: #2b2b2b;        /* 主要テキスト */
+  --wf-muted: #777;         /* 補助テキスト・プレースホルダ */
+  --wf-line: #c9c9c9;       /* 枠線 */
+  --wf-fill: #f2f2f2;       /* 面（薄） */
+  --wf-fill-2: #e4e4e4;     /* 面（中） */
+  --wf-fill-3: #d2d2d2;     /* 面（濃）/ primary ボタン */
+  --wf-bg: #ffffff;
+  --wf-radius: 4px;
+  --wf-gap: 12px;
+  --wf-pad: 16px;
+}
+body {
+  font-family: -apple-system, "Segoe UI", "Noto Sans JP", "Hiragino Sans", sans-serif;
+  color: var(--wf-ink);
+  background: #eaeaea;
+  line-height: 1.5;
+  font-size: 14px;
+}
+/* ===== ラベル（画面名・状態名の注記） ===== */
+.wf-screen-label {
+  max-width: 1100px;
+  margin: 16px auto 0;
+  padding: 0 16px;
+  font-size: 12px;
+  color: var(--wf-muted);
+  letter-spacing: 0.04em;
+}
+.wf-screen-label strong {
+  color: var(--wf-ink);
+  font-size: 13px;
+}
+/* ===== Page shell ===== */
+.wf-page {
+  max-width: 1100px;
+  margin: 8px auto 32px;
+  background: var(--wf-bg);
+  border: 1px solid var(--wf-line);
+  border-radius: var(--wf-radius);
+  overflow: hidden;
+}
+/* モバイル枠（幅 390px 固定）でプレビューしたい場合に付与 */
+.wf-page--mobile {
+  max-width: 390px;
+}
+/* ===== Header（グローバルヘッダー） ===== */
+.wf-header {
+  display: flex;
+  align-items: center;
+  gap: var(--wf-gap);
+  padding: 12px var(--wf-pad);
+  border-bottom: 1px solid var(--wf-line);
+  background: var(--wf-fill);
+}
+.wf-header__logo {
+  font-weight: 700;
+  padding: 6px 10px;
+  border: 1px solid var(--wf-line);
+  border-radius: var(--wf-radius);
+  background: var(--wf-bg);
+}
+.wf-header__nav {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  color: var(--wf-muted);
+}
+.wf-header__spacer { flex: 1; }
+/* ===== Body layout（サイドバー + メイン） ===== */
+.wf-body {
+  display: flex;
+  min-height: 360px;
+}
+.wf-sidebar {
+  width: 200px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--wf-line);
+  background: var(--wf-fill);
+  padding: var(--wf-pad);
+}
+.wf-sidebar__item {
+  padding: 8px 10px;
+  border-radius: var(--wf-radius);
+  color: var(--wf-muted);
+}
+.wf-sidebar__item--active {
+  background: var(--wf-fill-2);
+  color: var(--wf-ink);
+  font-weight: 600;
+}
+.wf-main {
+  flex: 1;
+  padding: var(--wf-pad);
+  min-width: 0;
+}
+/* モバイル: サイドバーは隠してハンバーガー前提（注記用ダミー） */
+@media (max-width: 767px) {
+  .wf-sidebar { display: none; }
+}
+/* ===== 見出し / パンくず / タブ ===== */
+.wf-breadcrumb {
+  color: var(--wf-muted);
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+.wf-title {
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+.wf-subtitle {
+  color: var(--wf-muted);
+  margin-bottom: var(--wf-pad);
+}
+.wf-tabs {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--wf-line);
+  margin-bottom: var(--wf-pad);
+}
+.wf-tabs__item {
+  padding: 8px 14px;
+  color: var(--wf-muted);
+  border: 1px solid transparent;
+  border-bottom: none;
+}
+.wf-tabs__item--active {
+  color: var(--wf-ink);
+  font-weight: 600;
+  border-color: var(--wf-line);
+  border-radius: var(--wf-radius) var(--wf-radius) 0 0;
+  background: var(--wf-fill);
+  margin-bottom: -1px;
+}
+/* ===== ツールバー（件数 + アクション） ===== */
+.wf-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--wf-gap);
+  flex-wrap: wrap;
+  margin-bottom: var(--wf-pad);
+}
+.wf-toolbar__spacer { flex: 1; }
+.wf-count { color: var(--wf-muted); }
+/* ===== 検索 / フィルタ ===== */
+.wf-search {
+  border: 1px solid var(--wf-line);
+  border-radius: var(--wf-radius);
+  margin-bottom: var(--wf-pad);
+  overflow: hidden;
+}
+.wf-search__head {
+  padding: 8px var(--wf-pad);
+  background: var(--wf-fill-2);
+  font-weight: 600;
+}
+.wf-search__body {
+  padding: var(--wf-pad);
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--wf-gap);
+}
+@media (min-width: 768px) {
+  .wf-search__body { grid-template-columns: 1fr 1fr; }
+}
+.wf-search__actions {
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+/* ===== Form / Field ===== */
+.wf-form {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--wf-gap);
+}
+@media (min-width: 768px) {
+  .wf-form--2col { grid-template-columns: 1fr 1fr; }
+}
+.wf-field { display: flex; flex-direction: column; gap: 4px; }
+.wf-field--full { grid-column: 1 / -1; }
+.wf-label { font-size: 12px; color: var(--wf-ink); font-weight: 600; }
+.wf-label--required::after { content: " *"; color: var(--wf-muted); }
+.wf-input,
+.wf-select,
+.wf-textarea {
+  border: 1px solid var(--wf-line);
+  border-radius: var(--wf-radius);
+  background: var(--wf-bg);
+  padding: 8px 10px;
+  color: var(--wf-muted);
+  min-height: 36px;
+}
+.wf-textarea { min-height: 88px; }
+/* セレクトのプルダウン矢印は HTML 側に「▾」を明示的に書く（例: <span class="wf-select">すべて ▾</span>） */
+.wf-help { font-size: 11px; color: var(--wf-muted); }
+.wf-error { font-size: 11px; color: var(--wf-ink); font-weight: 600; }
+/* ===== Buttons ===== */
+.wf-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 36px;
+  padding: 8px 16px;
+  border: 1px solid var(--wf-line);
+  border-radius: var(--wf-radius);
+  background: var(--wf-bg);
+  color: var(--wf-ink);
+  font: inherit;
+  cursor: default;
+}
+.wf-button--primary { background: var(--wf-fill-3); font-weight: 600; }
+.wf-button--ghost { border-color: transparent; color: var(--wf-muted); }
+.wf-button--sm { min-height: 28px; padding: 4px 10px; font-size: 12px; }
+/* ===== Table ===== */
+.wf-table-wrap {
+  border: 1px solid var(--wf-line);
+  border-radius: var(--wf-radius);
+  overflow-x: auto;
+}
+.wf-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 640px;
+}
+.wf-table th,
+.wf-table td {
+  text-align: left;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--wf-line);
+  white-space: nowrap;
+}
+.wf-table thead th {
+  background: var(--wf-fill-2);
+  font-weight: 600;
+}
+.wf-table tbody tr:last-child td { border-bottom: none; }
+.wf-table td.wf-td--muted { color: var(--wf-muted); }
+/* ===== Cards / Grid ===== */
+.wf-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--wf-gap);
+}
+@media (min-width: 768px)  { .wf-grid--2 { grid-template-columns: repeat(2, 1fr); } }
+@media (min-width: 1024px) { .wf-grid--3 { grid-template-columns: repeat(3, 1fr); } }
+.wf-card {
+  border: 1px solid var(--wf-line);
+  border-radius: var(--wf-radius);
+  padding: var(--wf-pad);
+  background: var(--wf-bg);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.wf-card__title { font-weight: 600; }
+.wf-card__meta { color: var(--wf-muted); font-size: 12px; }
+/* ===== Kanban ===== */
+.wf-kanban {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--wf-gap);
+}
+@media (min-width: 768px) {
+  .wf-kanban--3 { grid-template-columns: repeat(3, 1fr); }
+}
+.wf-kanban__col {
+  background: var(--wf-fill);
+  border: 1px solid var(--wf-line);
+  border-radius: var(--wf-radius);
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.wf-kanban__head { font-weight: 600; }
+/* ===== Tag / Badge ===== */
+.wf-tag {
+  display: inline-block;
+  padding: 2px 8px;
+  border: 1px solid var(--wf-line);
+  border-radius: 999px;
+  font-size: 11px;
+  color: var(--wf-muted);
+  background: var(--wf-fill);
+}
+/* ===== Placeholder（画像 / アバター） ===== */
+.wf-img {
+  position: relative;
+  background: var(--wf-fill);
+  border: 1px solid var(--wf-line);
+  border-radius: var(--wf-radius);
+  min-height: 96px;
+}
+.wf-img::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(to top right, transparent calc(50% - 1px), var(--wf-line), transparent calc(50% + 1px)),
+    linear-gradient(to top left, transparent calc(50% - 1px), var(--wf-line), transparent calc(50% + 1px));
+}
+.wf-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 999px;
+  background: var(--wf-fill-2);
+  border: 1px solid var(--wf-line);
+  flex-shrink: 0;
+}
+/* ===== Pagination ===== */
+.wf-pagination {
+  display: flex;
+  justify-content: center;
+  gap: 4px;
+  margin-top: var(--wf-pad);
+}
+.wf-pagination__item {
+  min-width: 32px;
+  min-height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--wf-line);
+  border-radius: var(--wf-radius);
+  color: var(--wf-muted);
+}
+.wf-pagination__item--active {
+  background: var(--wf-fill-2);
+  color: var(--wf-ink);
+  font-weight: 600;
+}
+/* ===== 空状態 / エラー状態 ===== */
+.wf-empty {
+  border: 1px dashed var(--wf-line);
+  border-radius: var(--wf-radius);
+  padding: 40px var(--wf-pad);
+  text-align: center;
+  color: var(--wf-muted);
+}
+/* ===== Modal / Dialog（重ね表示はせず、注記付きで並置） ===== */
+.wf-modal {
+  max-width: 480px;
+  margin: 0 auto;
+  border: 1px solid var(--wf-line);
+  border-radius: var(--wf-radius);
+  background: var(--wf-bg);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+.wf-modal__head {
+  padding: 12px var(--wf-pad);
+  border-bottom: 1px solid var(--wf-line);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+}
+.wf-modal__head .wf-toolbar__spacer { flex: 1; }
+.wf-modal__body { padding: var(--wf-pad); display: grid; gap: var(--wf-gap); }
+.wf-modal__foot {
+  padding: 12px var(--wf-pad);
+  border-top: 1px solid var(--wf-line);
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+/* ===== 注記（インタラクション説明など） ===== */
+.wf-note {
+  font-size: 11px;
+  color: var(--wf-muted);
+  border-left: 3px solid var(--wf-line);
+  padding: 2px 8px;
+  margin-top: 6px;
+}
+/* ===== ユーティリティ ===== */
+.wf-row { display: flex; align-items: center; gap: var(--wf-gap); flex-wrap: wrap; }
+.wf-stack { display: flex; flex-direction: column; gap: 8px; }
+.wf-mt { margin-top: var(--wf-pad); }
+.wf-muted { color: var(--wf-muted); }
+  </style>
+</head>
+<body>
+  <p class="wf-screen-label"><strong>一覧画面（toC）</strong> ／ 状態: 通常</p>
+  <div class="wf-page">
+    <header class="wf-header">
+      <span class="wf-header__logo">Sample Service</span>
+      <nav class="wf-header__nav">
+        <span>ホーム</span>
+        <span>一覧</span>
+        <span>お気に入り</span>
+      </nav>
+      <span class="wf-header__spacer"></span>
+      <span class="wf-button wf-button--sm">アカウント</span>
+    </header>
+    <div class="wf-body">
+      <main class="wf-main">
+        <h1 class="wf-title">一覧</h1>
+        <p class="wf-subtitle">条件で絞り込んで、気になるものを保存できます。</p>
+        <section class="wf-search">
+          <div class="wf-search__head">絞り込み</div>
+          <div class="wf-search__body">
+            <div class="wf-field">
+              <span class="wf-label">キーワード</span>
+              <span class="wf-input">キーワードを入力</span>
+            </div>
+            <div class="wf-field">
+              <span class="wf-label">カテゴリ</span>
+              <span class="wf-select">すべて ▾</span>
+            </div>
+            <div class="wf-field">
+              <span class="wf-label">エリア</span>
+              <span class="wf-select">指定なし ▾</span>
+            </div>
+            <div class="wf-field">
+              <span class="wf-label">並び替え</span>
+              <span class="wf-select">新着順 ▾</span>
+            </div>
+            <div class="wf-search__actions">
+              <span class="wf-button">リセット</span>
+              <span class="wf-button wf-button--primary">検索</span>
+            </div>
+          </div>
+        </section>
+        <div class="wf-toolbar">
+          <span class="wf-count">該当 128 件</span>
+        </div>
+        <div class="wf-grid wf-grid--2 wf-grid--3">
+          <article class="wf-card">
+            <div class="wf-img"></div>
+            <div class="wf-card__title">アイテムのタイトル</div>
+            <div class="wf-card__meta">カテゴリ ・ エリア ・ 3 日前</div>
+            <div class="wf-row">
+              <span class="wf-tag">タグA</span>
+              <span class="wf-tag">タグB</span>
+            </div>
+            <div class="wf-row wf-mt">
+              <span class="wf-button wf-button--sm">保存</span>
+              <span class="wf-button wf-button--sm wf-button--primary">詳細を見る</span>
+            </div>
+          </article>
+          <article class="wf-card">
+            <div class="wf-img"></div>
+            <div class="wf-card__title">アイテムのタイトル</div>
+            <div class="wf-card__meta">カテゴリ ・ エリア ・ 5 日前</div>
+            <div class="wf-row">
+              <span class="wf-tag">タグA</span>
+            </div>
+            <div class="wf-row wf-mt">
+              <span class="wf-button wf-button--sm">保存</span>
+              <span class="wf-button wf-button--sm wf-button--primary">詳細を見る</span>
+            </div>
+          </article>
+          <article class="wf-card">
+            <div class="wf-img"></div>
+            <div class="wf-card__title">アイテムのタイトル</div>
+            <div class="wf-card__meta">カテゴリ ・ エリア ・ 1 週間前</div>
+            <div class="wf-row">
+              <span class="wf-tag">タグC</span>
+            </div>
+            <div class="wf-row wf-mt">
+              <span class="wf-button wf-button--sm">保存</span>
+              <span class="wf-button wf-button--sm wf-button--primary">詳細を見る</span>
+            </div>
+          </article>
+        </div>
+        <nav class="wf-pagination">
+          <span class="wf-pagination__item">前へ</span>
+          <span class="wf-pagination__item wf-pagination__item--active">1</span>
+          <span class="wf-pagination__item">2</span>
+          <span class="wf-pagination__item">3</span>
+          <span class="wf-pagination__item">次へ</span>
+        </nav>
+      </main>
+    </div>
+  </div>
+</body>
+</html>

package/assets/.claude/skills/generating-wireframes/guides/from-requirements.md ADDED Viewed

@@ -0,0 +1,53 @@
+# ジャーニー → 画面の起こし方
+REQUIREMENTS.md のユーザージャーニーから WF にすべき画面を導くための手順。
+## 1. ジャーニーのステップを「画面」に割り当てる
+各ジャーニーの手順を読み、**ユーザーが何かを見る / 操作する単位**で画面を切る。
+例（一覧 → 詳細 → 申込のジャーニー）:
+| ジャーニー手順 | 画面 |
+| -------------- | ---- |
+| 一覧を検索・絞り込みする | 一覧画面（検索条件 + 結果テーブル/カード） |
+| 1 件を選んで詳細を見る | 詳細画面 |
+| 申込フォームを入力して送信する | 申込フォーム（モーダル or 専用画面） |
+| 送信完了を確認する | 完了画面 / トースト |
+- 1 ジャーニーが複数画面にまたがる、複数ジャーニーが 1 画面を共有する、どちらもある。
+- 重複を避けるため、**先に全ジャーニーを通して画面の集合を作ってから** WF 化する。
+## 2. 各画面の「状態」を決める
+P0 / P1 で「期待結果」や「エラーケース」に出てくる状態を WF にする。
+| 状態 | 作るべきか | クラス例 |
+| ---- | ---------- | -------- |
+| 通常（データあり） | 必須 | `wf-table` / `wf-grid` / `wf-card` |
+| 空（0 件 / 未登録） | 一覧・ダッシュボードでは必須 | `wf-empty` |
+| エラー（入力不正・取得失敗） | フォーム・主要操作では必須 | `wf-error` / `wf-empty`（取得失敗メッセージ） |
+| ローディング | 任意（必要なら注記で代替） | `wf-note` で「読込中スケルトン」と明記 |
+状態違いは別ファイルにする（例: `list.html`, `list-empty.html`）か、1 画面内に注記（`wf-note`）で併記する。
+## 3. レイアウトの型を選ぶ
+| 画面タイプ | 骨格 |
+| ---------- | ---- |
+| toC 一覧（検索 + カード） | `wf-header` → `wf-main`（`wf-search` + `wf-grid` + `wf-pagination`） |
+| toB 管理一覧（検索 + テーブル） | `wf-header` → `wf-body`（`wf-sidebar` + `wf-main`: `wf-search` + `wf-toolbar` + `wf-table` + `wf-pagination`） |
+| フォーム / 詳細編集 | `wf-form(--2col)` + `wf-field` + フッターに `wf-button--primary` |
+| ステータス管理（カンバン） | `wf-kanban--3` + `wf-kanban__col` + `wf-card` |
+| 確認 / 申込ダイアログ | `wf-modal`（`wf-modal__head/body/foot`） |
+## 4. 文言は SCREEN_ITEMS_DEFINITION.md / REQUIREMENTS.md から取る
+- フォーム項目名・必須/任意・選択肢は `SCREEN_ITEMS_DEFINITION.md` があればそれが出所（なければ REQUIREMENTS.md の表示要素から）。
+- ボタン文言・タブ名・空状態メッセージは REQUIREMENTS.md のジャーニー / 期待結果から拾う。
+- **想像で増やさない**。Spec にない項目・ボタンを WF に足すと、WF が Spec を上書きしてしまい SSOT が壊れる。足したくなったら先に REQUIREMENTS.md を更新する。
+## 5. index と REQUIREMENTS のリンクを最後に整える
+- `index.html` に全画面・全状態を列挙。
+- REQUIREMENTS.md「3. UI/UX デザイン」から `./wireframes/index.html` を指し、各画面の要点（タイトル・主要ボタン・表示要素）をテキストでも残す（HTML を開けない読者・差分レビュー用）。