create-specment 0.2.8 → 0.3.0

package/templates/docs/intro.md

@@ -0,0 +1,47 @@
+---
+sidebar_position: 1
+---
+
+# Tutorial Intro
+
+Let's discover **Docusaurus in less than 5 minutes**.
+
+## Getting Started
+
+Get started by **creating a new site**.
+
+Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
+
+### What you'll need
+
+- [Node.js](https://nodejs.org/en/download/) version 18.0 or above:
+  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
+
+## Generate a new site
+
+Generate a new Docusaurus site using the **classic template**.
+
+The classic template will automatically be added to your project after you run the command:
+
+```bash
+npm init docusaurus@latest my-website classic
+```
+
+You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
+
+The command also installs all necessary dependencies you need to run Docusaurus.
+
+## Start your site
+
+Run the development server:
+
+```bash
+cd my-website
+npm run start
+```
+
+The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
+
+The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
+
+Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.

package/templates/docs/introduction/document-editing/_category_.yml

@@ -0,0 +1,2 @@
+label: 'ドキュメント編集方法'
+position: 3

package/templates/docs/introduction/document-editing/how-to.mdx

@@ -0,0 +1,31 @@
+---
+sidebar_position: 1
+tag:
+    - Markdown
+---
+
+# 概要
+## フォルダー構成 {#folder-configuration}
+```
+\
+```
+
+## サイドバー {#sidebar}
+1. mdx(md)ファイルで作成すると自動的にコンテンツとなる
+1. 表示順を変更したい場合はファイルの最初にyaml形式で定義する
+    1. 参考: 公式Docusaurus.[Markdown front matter](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs#markdown-front-matter)
+1. 例
+    ```mdx title="sample.mdx"
+    ---
+    sidebar_position: 1
+    ---
+    # サンプル
+    ```
+
+## 階層表示したい場合 {#to-layerd}
+1. サブフォルダーを作成し、そこにファイル `_category_.yml` を作る
+1. 例
+    ```yml title="_category_.yml"
+    label: 'ドキュメント編集方法'
+    position: 4
+    ```

package/templates/docs/introduction/index.mdx

@@ -0,0 +1,35 @@
+---
+id: index
+sidebar_position: 1
+hide_title: true
+---
+import TBD from '@site/src/components/TBD';
+
+# Introduction
+
+:::tip
+1. このドキュメントサイトは各プロジェクトごとの作成例です
+1. ソースとドキュメントを一元管理する(できる)ことを示しています
+:::
+
+## 参考になりそうな情報
+1. Qiita: [良いコードの書き方](https://qiita.com/alt_yamamoto/items/25eda376e6b947208996)
+    1. コーディング規約のガイドラインとして参考にしたい
+1. Website: Qbook会員限定-[この一冊でソフトウェアテストの基本がわかる!](https://www.qbook.jp/e-book/software-kiso/)
+    1. Qbook会員になると無料で読める
+    1. テストについて資料したい場合の参考に
+1. Website(PDF): IPA情報処理推進機構-[事例3: 要件定義ドキュメントの漏れや曖昧性の低減](https://www.ipa.go.jp/archive/files/000072725.pdf)
+    1. 要件定義に必要なこと、その後に作成するドキュメントの順番などがわかりやすく書かれている
+1. GitHub: [nablarch-development-standards](https://github.com/nablarch-development-standards/nablarch-development-standards)
+    1. Nablarch開発標準
+    1. Excelなどで書かれているドキュメント
+    1. Officeドキュメントなのが残念だけど、書物としては参考にしやすそう
+
+## 気になるアプリケーションなど
+1. [Playwright](https://playwright.dev)
+    1. TypeScriptで作られたE2Eテスト。
+    1. メジャーなブラウザーをコレひとつでテストできるようになる
+    1. 可能なら導入確認していきたい
+1. [Biome](https://biomejs.dev)
+    1. Node.jsでのlintやフォーマッターをコレひとつで管理できるようしたもの
+    1. Node.jsだとeslintが有名だけど、設定の面倒な部分や高速化したい時にBiomeの導入を検討したい

package/templates/docs/introduction/operational-policies/_category_.yaml

@@ -0,0 +1,2 @@
+label: '運用ポリシー'
+position: 2

package/templates/docs/introduction/operational-policies/github.mdx

@@ -0,0 +1,33 @@
+---
+sidebar_position: 1
+tag:
+    - Git
+---
+
+# GitHub
+1. リポジトリは右上のGitHubアイコンをクリックする
+
+## 概要 {#overview}
+1. コンテンツの管理、IssueなどすべてをGitHubで行う
+
+## ブランチ命名ルール {#branch-naming}
+1. 基本はケバブケース(例: `feature/abc-def`)
+1. [`^(feature\/|bugfix\/|revert\/|cherry-pick\/)(issue-name-or-summary-[a-z0-9\-]*)$`](https://regexper.com/#%5E%28feature%5C%2F%7Cbugfix%5C%2F%7Crevert%5C%2F%7Ccherry-pick%5C%2F%29%28issue-name-or-summary-%5Ba-z0-9%5C-%5D*%29%24)
+    1. ![img](img/branch-naming-rules.svg)
+1. 例
+    1. `feature/issue123-frontend-add-lgoin`
+    1. `feature/issue333-website-update-docusaurus-3-0-1`
+
+### `feature/`
+1. 以下を除くすべて
+
+### `bugfix/`
+1. バグ発生時の対応時に使用する
+1. ここでのバグは`main`へmerge後に発生したものを指す
+    1. テスト中の発生したものは含まない
+
+### `revert/`
+1. revert時
+
+### `cherry-pick/`
+1. cherry-pick利用時

package/templates/docs/introduction/operational-policies/img/branch-naming-rules.svg

@@ -0,0 +1,73 @@
+
+          <svg xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" version="1.1" width="642.8124389648438" height="172.5">
+            <defs>
+              <style type="text/css">svg {
+          background-color: #fff; }
+        
+        .root text,
+        .root tspan {
+          font: 12px Arial; }
+        
+        .root path {
+          fill-opacity: 0;
+          stroke-width: 2px;
+          stroke: #000; }
+        
+        .root circle {
+          fill: #6b6659;
+          stroke-width: 2px;
+          stroke: #000; }
+        
+        .anchor text, .any-character text {
+          fill: #fff; }
+        
+        .anchor rect, .any-character rect {
+          fill: #6b6659; }
+        
+        .escape text, .charset-escape text, .literal text {
+          fill: #000; }
+        
+        .escape rect, .charset-escape rect {
+          fill: #bada55; }
+        
+        .literal rect {
+          fill: #dae9e5; }
+        
+        .charset .charset-box {
+          fill: #cbcbba; }
+        
+        .subexp .subexp-label tspan,
+        .charset .charset-label tspan,
+        .match-fragment .repeat-label tspan {
+          font-size: 10px; }
+        
+        .repeat-label {
+          cursor: help; }
+        
+        .subexp .subexp-label tspan,
+        .charset .charset-label tspan {
+          dominant-baseline: text-after-edge; }
+        
+        .subexp .subexp-box {
+          stroke: #908c83;
+          stroke-dasharray: 6,2;
+          stroke-width: 2px;
+          fill-opacity: 0; }
+        
+        .quote {
+          fill: #908c83; }
+        </style>
+            </defs>
+            <metadata>
+              <rdf:rdf>
+                <cc:license rdf:about="http://creativecommons.org/licenses/by/3.0/">
+                  <cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"></cc:permits>
+                  <cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"></cc:permits>
+                  <cc:requires rdf:resource="http://creativecommons.org/ns#Notice"></cc:requires>
+                  <cc:requires rdf:resource="http://creativecommons.org/ns#Attribution"></cc:requires>
+                  <cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"></cc:permits>
+                </cc:license>
+              </rdf:rdf>
+            </metadata>
+          <desc>Created with Snap</desc><g transform="matrix(1,0,0,1,15,10)" class="root"><g transform="matrix(1,0,0,1,10,0)" class="regexp match"><path d="M70.703125,87.25H90.7031M210.718725,87.25H240.7188M491.10158262939456,87.25H526.1015"></path><g transform="matrix(1,0,0,1,0,75.5)" class="match-fragment"><g class="label anchor"><rect width="70.703125" height="23.5"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,16.75)"><tspan>Start of line</tspan></text></g></g><g transform="matrix(1,0,0,1,80.7031,11.75)" class="match-fragment subexp"><rect rx="3" ry="3" class="subexp-box" transform="matrix(1,0,0,1,0,11)" width="140.015625" height="129"></rect><text x="0" y="0" transform="matrix(1,0,0,1,0,11)" class="subexp-label"><tspan>group #1</tspan></text><g transform="matrix(1,0,0,1,10,21)" class="regexp"><path d="M10,21.75q0,-10 10,-10M110.015625,21.75q0,-10 -10,-10M0,54.5c10,0 10,-14.25 20,-14.25M120.015625,54.5c-10,0 -10,-14.25 -20,-14.25M0,54.5c10,0 10,14.25 20,14.25M120.015625,54.5c-10,0 -10,14.25 -20,14.25M10,87.25q0,10 10,10M110.015625,87.25q0,10 -10,10M0,54.5q10,0 10,-10V21.75M120.015625,54.5q-10,0 -10,-10V21.75M0,54.5q10,0 10,10V87.25M120.015625,54.5q-10,0 -10,10V87.25"></path><g transform="matrix(1,0,0,1,20,0)" class="regexp-matches"><path d="M0,11.75h10.6602M69.3555125,11.75H80.015625M0,40.25h13.3281M66.687475,40.25H80.015625M0,68.75h14.0039M66.0117125,68.75H80.015625M0,97.25h0M80.015625,97.25H80.015625"></path><g transform="matrix(1,0,0,1,10.6602,0)" class="match match-fragment literal"><g class="label"><rect width="58.6953125" height="23.5" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,16.75)"><tspan class="quote">“</tspan><tspan>feature/</tspan><tspan class="quote">”</tspan></text></g></g><g transform="matrix(1,0,0,1,13.3281,28.5)" class="match match-fragment literal"><g class="label"><rect width="53.359375" height="23.5" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,16.75)"><tspan class="quote">“</tspan><tspan>bugfix/</tspan><tspan class="quote">”</tspan></text></g></g><g transform="matrix(1,0,0,1,14.0039,57)" class="match match-fragment literal"><g class="label"><rect width="52.0078125" height="23.5" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,16.75)"><tspan class="quote">“</tspan><tspan>revert/</tspan><tspan class="quote">”</tspan></text></g></g><g transform="matrix(1,0,0,1,0,85.5)" class="match match-fragment literal"><g class="label"><rect width="80.015625" height="23.5" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,16.75)"><tspan class="quote">“</tspan><tspan>cherry-pick/</tspan><tspan class="quote">”</tspan></text></g></g></g></g></g><g transform="matrix(1,0,0,1,230.7188,0)" class="match-fragment subexp"><rect rx="3" ry="3" class="subexp-box" transform="matrix(1,0,0,1,0,11)" width="285.3827819824219" height="141.5"></rect><text x="0" y="0" transform="matrix(1,0,0,1,0,11)" class="subexp-label"><tspan>group #2</tspan></text><g transform="matrix(1,0,0,1,10,21)" class="regexp match"><path d="M152.0234375,66.25H177.0234"></path><g transform="matrix(1,0,0,1,0,54.5)" class="match-fragment literal"><g class="label"><rect width="152.0234375" height="23.5" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,16.75)"><tspan class="quote">“</tspan><tspan>issue-name-or-summary-</tspan><tspan class="quote">”</tspan></text></g></g><g transform="matrix(1,0,0,1,162.0234,0)" class="match-fragment"><path d="M0,66.25q10,0 10,-10v-46.25q0,-10 10,-10h63.35938262939453q10,0 10,10v46.25q0,10 10,10M15,66.25q-10,0 -10,10v35.25q0,10 10,10h73.35938262939453q10,0 10,-10v-35.25q0,-10 -10,-10M98.35938262939453,81.25l5,-5m-5,5l-5,-5"></path><g transform="matrix(1,0,0,1,15,10)" class="charset"><rect rx="3" ry="3" class="charset-box" transform="matrix(1,0,0,1,0,11)" width="73.3593864440918" height="90.5"></rect><text x="0" y="0" transform="matrix(1,0,0,1,0,11)" class="charset-label"><tspan>One of:</tspan></text><g transform="matrix(1,0,0,1,5,16)"><g transform="matrix(1,0,0,1,0.3398,0)" class="charset-range"><text x="0" y="0" transform="matrix(1,0,0,1,29.6797,16)">-</text><g transform="matrix(1,0,0,1,0,0)" class="literal"><g class="label"><rect width="24.6796875" height="23.5" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,16.75)"><tspan class="quote">“</tspan><tspan>a</tspan><tspan class="quote">”</tspan></text></g></g><g transform="matrix(1,0,0,1,38.6797,0)" class="literal"><g class="label"><rect width="24" height="23.5" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,16.75)"><tspan class="quote">“</tspan><tspan>z</tspan><tspan class="quote">”</tspan></text></g></g></g><g transform="matrix(1,0,0,1,0,28.5)" class="charset-range"><text x="0" y="0" transform="matrix(1,0,0,1,29.6797,16)">-</text><g transform="matrix(1,0,0,1,0,0)" class="literal"><g class="label"><rect width="24.6796875" height="23.5" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,16.75)"><tspan class="quote">“</tspan><tspan>0</tspan><tspan class="quote">”</tspan></text></g></g><g transform="matrix(1,0,0,1,38.6797,0)" class="literal"><g class="label"><rect width="24.6796875" height="23.5" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,16.75)"><tspan class="quote">“</tspan><tspan>9</tspan><tspan class="quote">”</tspan></text></g></g></g><g transform="matrix(1,0,0,1,20.6797,57)" class="literal"><g class="label"><rect width="22" height="23.5" rx="3" ry="3"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,16.75)"><tspan class="quote">“</tspan><tspan>-</tspan><tspan class="quote">”</tspan></text></g></g></g></g></g></g></g><g transform="matrix(1,0,0,1,526.1015,75.5)" class="match-fragment"><g class="label anchor"><rect width="66.7109375" height="23.5"></rect><text x="0" y="0" transform="matrix(1,0,0,1,5,16.75)"><tspan>End of line</tspan></text></g></g></g><path d="M10,87.25H0M602.8124375,87.25H612.8124389648438"></path><circle cx="0" cy="87.25" r="5"></circle><circle cx="612.8124389648438" cy="87.25" r="5"></circle></g></svg>
+        

package/templates/docs/introduction/operational-policies/sharepoint.mdx

@@ -0,0 +1,28 @@
+---
+sidebar_position: 2
+---
+import TBD from '@site/src/components/TBD';
+
+# SharePoint
+1. <TBD/> URLリンク
+
+## フォルダー構成 {#foler-configuration}
+1. <TBD/> ここにフォルダー構成と簡単な説明を書く
+
+## 設定 {#config}
+### 読み取り専用で保存する
+1. SharePoint上のファイルは開くだけで編集され、履歴に残ってしまうことがあるため、ファイル自体を読み取り専用の設定をしておく
+1.
+
+### 編集はクライアントアプリケーションで行う {#how-to-edit-in-client-application}
+1. デフォルトでデスクトップアプリケーションで開く
+1. 手順
+    1. 画面右上の「設定」(歯車アイコン)をクリックする
+    1. リンク「ライブラリの設定」をクリックする
+    1. セクション「設定」の「詳細設定」をクリックする
+    1. 「ブラウザー対応ドキュメントを表示する規定の方法」で「クライアント アプリケーションで開く」をクリックして選択する
+    1. 一番下までのスクロールして「OK」をクリックする
+
+## より厳密に管理したい場合
+1. チェックアウトとチェックイン機能をオンにする
+1. 詳細は<TBD/>

package/templates/package.json.template

@@ -0,0 +1,46 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@docusaurus/core": "^3.9.2",
+    "@docusaurus/preset-classic": "^3.9.2"{{#hasMermaid}},
+    "@docusaurus/theme-mermaid": "^3.9.2"{{/hasMermaid}},
+    "@easyops-cn/docusaurus-search-local": "^0.52.2",
+    "@mdx-js/react": "^3.0.0",
+    "clsx": "^2.0.0"{{#hasPlantUML}},
+    "docusaurus-theme-plantuml": "^1.0.2"{{/hasPlantUML}},
+    "prism-react-renderer": "^2.4.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"{{#hasRedoc}},
+    "redocusaurus": "^2.5.0"{{/hasRedoc}}
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "^3.9.2",
+    "@docusaurus/tsconfig": "3.9.2",
+    "@docusaurus/types": "^3.9.2",
+    "@types/node": "^24.2.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "~5.9.2"
+  },
+  "browserslist": {
+    "production": [">0.5%", "not dead", "not op_mini all"],
+    "development": ["last 3 chrome version", "last 3 firefox version", "last 5 safari version"]
+  },
+  "engines": {
+    "node": ">=22.0"
+  }
+}

package/templates/src/components/Highlight/index.tsx

@@ -0,0 +1,68 @@
+/**
+ * Module Text highlighting. Color designation is possible.
+ * @module Highlight
+ * @example
+ * import { Highlight } from '@site/src/components/Highlight';
+ * <Highlight color='#25C2A0'>Green</Highlight>
+ * <Highlight color='#1877F2'>Blue</Highlight>
+ * <TBD/>
+ */
+import type { ReactElement, ReactNode } from 'react';
+
+type HighlightProps = {
+  /** 強調したい文字列（子要素） */
+  children: ReactNode;
+  /** 背景色（16進数表記 #RRGGBB か #RGB） */
+  color: string;
+};
+
+/**
+ * Highlight tag.
+ * @param {{chidren: string, color: string}}
+ * @returns {JSX.Element}
+ */
+export function Highlight({ children, color }: HighlightProps): ReactElement {
+  return (
+    <span
+      style={{
+        backgroundColor: color,
+        borderRadius: '0.5rem',
+        color: blackOrWhite(color),
+        padding: '0.2rem',
+      }}
+    >
+      {children}
+    </span>
+  );
+}
+
+/**
+ * @see {@link https://www.w3.org/TR/AERT/#color-contract}
+ * @param  hex - example. '11AAFF' or '1AF'
+ */
+function blackOrWhite(hex: string): '#FFF' | '#000' {
+  const [r, g, b] = hex2rgb(hex);
+  return (r * 299 + g * 587 + b * 114) / 1000 < 120 ? '#FFF' : '#000';
+}
+
+/**
+ * @param hexVal - example. '11AAFF' or '1AF'
+ */
+function hex2rgb(hexVal: string): [number, number, number] {
+  let hex = hexVal.startsWith('#') ? hexVal.slice(1) : hexVal;
+
+  if (![3, 6].includes(hex.length)) {
+    throw new Error(`Invalid hex string: digit must be 3 or 6. hex=${hexVal}`);
+  }
+
+  if (hex.length === 3) hex = hex.replace(/(.)/g, '$1$1');
+  if (!/^[0-9A-Fa-f]{6}$/.test(hex)) {
+    throw new Error(`Invalid hex string. not hex number. hex=${hex}`);
+  }
+  const rgb = hex.match(/../g);
+  if (!rgb) {
+    throw new Error(`Invalid hex string. unknown. hex=${hex}`);
+  }
+
+  return [Number.parseInt(rgb[0], 16), Number.parseInt(rgb[1], 16), Number.parseInt(rgb[2], 16)];
+}

package/templates/src/components/PriorityMatrix/index.tsx

@@ -0,0 +1,97 @@
+import type { PriorityScale } from '@site/src/types/requirements';
+/**
+ * Priority Matrix Component.
+ * @module PriorityMatrix
+ * @example
+ * import { PriorityMatrix } from '@site/src/components/PriorityMatrix';
+ * <PriorityMatrix urgency={frontMatter.urgency} importance={frontMatter.importance} />
+ */
+import type { ReactElement } from 'react';
+
+interface PriorityMatrixProps {
+  importance: PriorityScale;
+  urgency: PriorityScale;
+}
+
+const getBackgroundColor = (value: number, selectedValue: number): string => {
+  if (value === selectedValue) return '#007bff';
+  if (value >= 7) return 'rgba(220, 53, 69, 0.2)';
+  if (value >= 4) return 'rgba(255, 193, 7, 0.2)';
+  return 'rgba(40, 167, 69, 0.2)';
+};
+
+export function PriorityMatrix({ importance, urgency }: PriorityMatrixProps): ReactElement {
+  return (
+    <div
+      style={{
+        marginTop: '1rem',
+        color: 'var(--ifm-color-content)',
+      }}
+    >
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '80px repeat(9, 40px)',
+          gap: '4px',
+          fontSize: '0.875rem',
+        }}
+      >
+        {/* 緊急度の行 */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '4px',
+          }}
+        >
+          緊急度
+        </div>
+        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (
+          <div
+            key={`urgency-${num}`}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '8px 4px',
+              backgroundColor: getBackgroundColor(num, urgency),
+              borderRadius: '4px',
+              color: num === urgency ? '#ffffff' : 'var(--ifm-color-content)',
+            }}
+          >
+            {num}
+          </div>
+        ))}
+
+        {/* 重要度の行 */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '4px',
+          }}
+        >
+          重要度
+        </div>
+        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (
+          <div
+            key={`importance-${num}`}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: '8px 4px',
+              backgroundColor: getBackgroundColor(num, importance),
+              borderRadius: '4px',
+              color: num === importance ? '#ffffff' : 'var(--ifm-color-content)',
+            }}
+          >
+            {num}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/src/components/TBD/index.tsx

@@ -0,0 +1,16 @@
+/**
+ * Module TBD Label.
+ * @module TBD
+ * @example
+ * import TBD from '@site/src/components/TBD';
+ * <TBD/>
+ */
+import type { ReactNode } from 'react';
+import { Highlight } from '../Highlight/index';
+
+export function TBD(): ReactNode {
+  return <Highlight color="#1877F2">TBD</Highlight>;
+}
+
+// デフォルトエクスポートも提供
+export default TBD;

package/templates/src/css/custom.css

@@ -0,0 +1,81 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #2e8555;
+  --ifm-color-primary-dark: #29784c;
+  --ifm-color-primary-darker: #277148;
+  --ifm-color-primary-darkest: #205d3b;
+  --ifm-color-primary-light: #33925d;
+  --ifm-color-primary-lighter: #359962;
+  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='dark'] {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+.docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.1);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
+[data-theme='dark'] .docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+/* Chapter number */
+main div.container article div.theme-doc-markdown {
+  counter-reset: ch-lv1;
+}
+main div.container article div.theme-doc-markdown > h2 {
+  counter-reset: ch-lv2;
+}
+main div.container article div.theme-doc-markdown > h3 {
+  counter-reset: ch-lv3;
+}
+main div.container article div.theme-doc-markdown > h4 {
+  counter-reset: ch-lv4;
+}
+
+main div.container article div.theme-doc-markdown > h2::before {
+  counter-increment: ch-lv1;
+  content: counter(ch-lv1) '. ';
+}
+main div.container article div.theme-doc-markdown > h3::before {
+  counter-increment: ch-lv2;
+  content: counter(ch-lv1) '.' counter(ch-lv2) '. ';
+}
+main div.container article div.theme-doc-markdown > h4::before {
+  counter-increment: ch-lv3;
+  content: counter(ch-lv1) '.' counter(ch-lv2) '.' counter(ch-lv3) '. ';
+}
+main div.container article div.theme-doc-markdown > h5::before {
+  counter-increment: ch-lv4;
+  content: counter(ch-lv1) '.' counter(ch-lv2) '.' counter(ch-lv3) '.' counter(ch-lv4) '. ';
+}
+
+/* Table of contents number */
+main div[class^='tableOfContents_'] ul {
+  counter-reset: toc-lv;
+  list-style: none;
+}
+main div[class^='tableOfContents_'] ul > li > a::before {
+  counter-increment: toc-lv;
+  content: counters(toc-lv, '.') '. ';
+}

package/templates/src/types/requirements.ts

@@ -0,0 +1,19 @@
+/**
+ * Requirements related type definitions
+ */
+
+/**
+ * Priority scale from 1 to 9
+ * 1-3: Low priority
+ * 4-6: Medium priority
+ * 7-9: High priority
+ */
+export type PriorityScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+
+/**
+ * Requirement priority matrix
+ */
+export interface RequirementPriority {
+  importance: PriorityScale;
+  urgency: PriorityScale;
+}