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/templates/index.html ADDED Viewed

@@ -0,0 +1,472 @@
+<!--
+  index.html — 機能内のワイヤーフレーム一覧（目次）ひな型
+  使い方:
+    - docs/<app>/<feature_path>/wireframes/index.html としてコピーする。
+    - 各画面 HTML へのリンクと、1 行説明を並べる。
+    - REQUIREMENTS.md の「3. UI/UX デザイン」からは、まずこの index.html を指す。
+-->
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>[機能名] - ワイヤーフレーム一覧</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>
+  <div class="wf-page">
+    <main class="wf-main">
+      <h1 class="wf-title">[機能名] ワイヤーフレーム</h1>
+      <p class="wf-subtitle">画面一覧。各リンクから個別のワイヤーフレームを開く。</p>
+      <div class="wf-table-wrap">
+        <table class="wf-table">
+          <thead>
+            <tr><th>画面</th><th>状態</th><th>概要</th></tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><a href="./[screen-1].html">[画面名1]</a></td>
+              <td class="wf-td--muted">通常</td>
+              <td class="wf-td--muted">[1 行説明]</td>
+            </tr>
+            <tr>
+              <td><a href="./[screen-2].html">[画面名2]</a></td>
+              <td class="wf-td--muted">通常 / 空 / エラー</td>
+              <td class="wf-td--muted">[1 行説明]</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </main>
+  </div>
+</body>
+</html>