shirokuma-docs 0.1.0-alpha.1

package/plugin/shirokuma-skills-ja/skills/nextjs-vibe-coding/reference/report-template.md

@@ -0,0 +1,53 @@
+# 実装レポートテンプレート
+
+レポートの保存先: `GitHub Discussions (Reports){YYYY-MM-DD}-{HHmmss}-{feature-name}-implementation.md`
+
+```markdown
+# 実装レポート: {{Feature Name}}
+
+- 日付: {YYYY-MM-DD}
+- アプリ: {admin|public|web}
+- タイプ: {feature|component|page|fix}
+
+## サマリー
+
+実装内容の簡潔な説明。
+
+## 作成ファイル
+
+| ファイル | 用途 |
+|---------|------|
+| `path/to/file.ts` | 説明 |
+
+## 変更ファイル
+
+| ファイル | 変更内容 |
+|---------|---------|
+| `path/to/file.ts` | 変更内容 |
+
+## テストカバレッジ
+
+- ユニットテスト: {N} テスト
+- テストファイル: `__tests__/path/to/test.ts`
+- カバレッジ: {PASS|PARTIAL}
+
+## 追加した i18n キー
+
+- `namespace.key1` - 説明
+- `namespace.key2` - 説明
+
+## 追加した依存関係
+
+- `package-name` - 追加理由
+
+## 確認事項
+
+- [ ] 全テストパス
+- [ ] Lint エラーなし
+- [ ] 型チェックパス
+- [ ] 手動確認完了
+
+## 備考
+
+追加メモやフォローアップタスク。
+```

package/plugin/shirokuma-skills-ja/skills/nextjs-vibe-coding/templates/README.md

@@ -0,0 +1,108 @@
+# テンプレートディレクトリ
+
+nextjs-vibe-coding スキル用のコードテンプレート。
+
+## テンプレートの種類
+
+### 単一ファイルテンプレート（デフォルト）
+
+分割閾値未満の新機能用：
+
+| テンプレート | 用途 | 閾値 |
+|-------------|------|------|
+| `server-action.ts.template` | 1ファイルの CRUD アクション | 300行未満 |
+| `server-action.test.ts.template` | アクションテスト | 300行未満 |
+| `form-component.tsx.template` | フォームコンポーネント | 250行未満 |
+| `page-*.tsx.template` | ページテンプレート | 250行未満 |
+| `translations.json.template` | 1機能の i18n | 50キー未満 |
+
+### 分割テンプレート（大規模用）
+
+閾値超過時の機能用：
+
+#### Server Actions (`server-action-split/`)
+
+アクションファイルが **300行または8関数以上** の場合に使用：
+
+| ファイル | 用途 |
+|---------|------|
+| `lib/actions/{{name}}s/index.ts` | バレルエクスポート |
+| `lib/actions/{{name}}s/types.ts` | 型とバリデーション |
+| `lib/actions/{{name}}s/queries.ts` | 読み取り操作 |
+| `lib/actions/{{name}}s/mutations.ts` | 書き込み操作 |
+
+#### Messages (`messages-split/`)
+
+メッセージが **300行または200キー以上** の場合に使用：
+
+| ファイル | 用途 |
+|---------|------|
+| `messages/{{locale}}/index.ts` | 統合ファイル |
+| `messages/{{locale}}/common.json` | 共通 UI 文字列 |
+| `messages/{{locale}}/errors.json` | エラーメッセージ |
+| `messages/{{locale}}/feature.json` | 機能固有 |
+
+## 使い方
+
+### 新機能の作成（小規模）
+
+```bash
+# 単一ファイルテンプレートを使用
+cat templates/server-action.ts.template | sed 's/{{name}}/post/g; s/{{Name}}/Post/g'
+```
+
+### 既存機能の分割
+
+ファイルが閾値を超えた場合：
+
+1. ディレクトリ作成: `mkdir lib/actions/{{name}}s`
+2. 分割テンプレートをコピー
+3. コードを適切なファイルに移動
+4. バレルエクスポート（index.ts）を作成
+5. import を更新（バレル経由で変更不要のはず）
+
+## テンプレート変数
+
+| 変数 | 例 | 説明 |
+|------|-----|------|
+| `{{name}}` | `post` | 小文字単数形 |
+| `{{Name}}` | `Post` | PascalCase 単数形 |
+| `{{name}}s` | `posts` | 小文字複数形 |
+| `{{locale}}` | `ja` | ロケールコード |
+
+## ベストプラクティス
+
+1. **単一ファイルから始める** - 閾値超過時のみ分割
+2. **import を維持** - バレルエクスポートで後方互換性を確保
+3. **テストは構造に従う** - 分割テストは分割アクションに対応
+4. **CLAUDE.md を更新** - 新しい構造をドキュメント化
+
+## 標準テンプレート（JSDoc 準拠）
+
+**shirokuma-docs lint-code 準拠**のテンプレートは [server-action.md](./server-action.md) を参照。
+
+このテンプレートが保証する内容：
+- モジュールヘッダーに `@serverAction`, `@feature`, `@dbTables` タグ
+- 関数 JSDoc に `@serverAction`, `@feature`, `@returns` タグ
+- 可読性のためのセクション区切り
+- 型定義を別ファイル `*-types.ts` に分離
+
+### 検証
+
+```bash
+# shirokuma-docs でコンプライアンスチェック
+node shirokuma-docs/dist/index.js lint-code -p path/to/project -v
+```
+
+## Server Action テンプレートの機能
+
+`server-action.ts.template` に含まれるパターン：
+
+| パターン | 説明 |
+|---------|------|
+| **二関数認証** | クエリ: `verifyAdmin()`、ミューテーション: `verifyAdminMutation()`（CSRF 含む） |
+| **エラーコード** | `ActionErrorCode` 型（`NOT_FOUND`, `FORBIDDEN`, `RATE_LIMIT_EXCEEDED` 等） |
+| **オーナーシップチェック** | 更新/削除前にユーザーがリソースを所有しているか検証 |
+| **レート制限** | 破壊的操作（削除）を保護 |
+
+→ 詳細は [code-patterns.md](../patterns/code-patterns.md) を参照

package/plugin/shirokuma-skills-ja/skills/nextjs-vibe-coding/templates/component.test.tsx.template

@@ -0,0 +1,245 @@
+// __tests__/components/{{name}}-form.test.tsx
+import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { NextIntlClientProvider } from "next-intl"
+import { {{Name}}Form } from "@/components/{{name}}-form"
+import { create{{Name}}, update{{Name}} } from "@/lib/actions/{{name}}"
+
+// Mock actions
+jest.mock("@/lib/actions/{{name}}", () => ({
+  create{{Name}}: jest.fn(),
+  update{{Name}}: jest.fn(),
+}))
+
+// Mock next/navigation
+jest.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    replace: jest.fn(),
+    back: jest.fn(),
+  }),
+}))
+
+// Translation messages for testing
+const messages = {
+  common: {
+    save: "Save",
+    saving: "Saving...",
+    cancel: "Cancel",
+    delete: "Delete",
+    edit: "Edit",
+    create: "Create",
+    saveFailed: "Failed to save",
+  },
+  {{name}}s: {
+    title: "{{Name}} Management",
+    new{{Name}}: "New {{Name}}",
+    edit{{Name}}: "Edit {{Name}}",
+    form: {
+      info: "{{Name}} Info",
+      name: "Name",
+      namePlaceholder: "Enter {{name}} name",
+      description: "Description",
+      descriptionPlaceholder: "Enter description (optional)",
+      saved: "Saved successfully",
+    },
+  },
+}
+
+// Helper to render with providers
+function renderWithProviders(
+  ui: React.ReactElement,
+  { locale = "en" } = {}
+) {
+  return render(
+    <NextIntlClientProvider locale={locale} messages={messages}>
+      {ui}
+    </NextIntlClientProvider>
+  )
+}
+
+describe("{{Name}}Form", () => {
+  const user = userEvent.setup()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe("Create mode", () => {
+    it("should render form fields", () => {
+      renderWithProviders(<{{Name}}Form />)
+
+      expect(screen.getByLabelText("Name")).toBeInTheDocument()
+      expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument()
+    })
+
+    it("should submit form with valid data", async () => {
+      ;(create{{Name}} as jest.Mock).mockResolvedValue({ success: true, data: { id: "1" } })
+
+      renderWithProviders(<{{Name}}Form />)
+
+      await user.type(screen.getByLabelText("Name"), "Test {{Name}}")
+      await user.click(screen.getByRole("button", { name: "Save" }))
+
+      await waitFor(() => {
+        expect(create{{Name}}).toHaveBeenCalled()
+      })
+
+      const formData = (create{{Name}} as jest.Mock).mock.calls[0][0]
+      expect(formData.get("name")).toBe("Test {{Name}}")
+    })
+
+    it("should show loading state during submission", async () => {
+      let resolvePromise: (value: any) => void
+      const promise = new Promise((resolve) => {
+        resolvePromise = resolve
+      })
+      ;(create{{Name}} as jest.Mock).mockReturnValue(promise)
+
+      renderWithProviders(<{{Name}}Form />)
+
+      await user.type(screen.getByLabelText("Name"), "Test {{Name}}")
+      await user.click(screen.getByRole("button", { name: "Save" }))
+
+      // Check loading state
+      expect(screen.getByRole("button")).toBeDisabled()
+      expect(screen.getByText("Saving...")).toBeInTheDocument()
+
+      // Resolve the promise
+      resolvePromise!({ success: true })
+
+      await waitFor(() => {
+        expect(screen.getByRole("button")).not.toBeDisabled()
+      })
+    })
+
+    it("should display error message on failure", async () => {
+      ;(create{{Name}} as jest.Mock).mockResolvedValue({
+        success: false,
+        error: "Name already exists",
+      })
+
+      renderWithProviders(<{{Name}}Form />)
+
+      await user.type(screen.getByLabelText("Name"), "Duplicate Name")
+      await user.click(screen.getByRole("button", { name: "Save" }))
+
+      await waitFor(() => {
+        expect(screen.getByText("Name already exists")).toBeInTheDocument()
+      })
+    })
+
+    it("should show success message on successful save", async () => {
+      ;(create{{Name}} as jest.Mock).mockResolvedValue({ success: true })
+
+      renderWithProviders(<{{Name}}Form />)
+
+      await user.type(screen.getByLabelText("Name"), "Test {{Name}}")
+      await user.click(screen.getByRole("button", { name: "Save" }))
+
+      await waitFor(() => {
+        expect(screen.getByText("Saved successfully")).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe("Edit mode", () => {
+    const initialData = {
+      id: "1",
+      name: "Existing {{Name}}",
+      description: "Existing description",
+    }
+
+    it("should populate form with initial data", () => {
+      renderWithProviders(<{{Name}}Form initialData={initialData} />)
+
+      expect(screen.getByLabelText("Name")).toHaveValue("Existing {{Name}}")
+    })
+
+    it("should call update action on submit", async () => {
+      ;(update{{Name}} as jest.Mock).mockResolvedValue({ success: true })
+
+      renderWithProviders(<{{Name}}Form initialData={initialData} />)
+
+      await user.clear(screen.getByLabelText("Name"))
+      await user.type(screen.getByLabelText("Name"), "Updated {{Name}}")
+      await user.click(screen.getByRole("button", { name: "Save" }))
+
+      await waitFor(() => {
+        expect(update{{Name}}).toHaveBeenCalled()
+      })
+
+      const [id, formData] = (update{{Name}} as jest.Mock).mock.calls[0]
+      expect(id).toBe("1")
+      expect(formData.get("name")).toBe("Updated {{Name}}")
+    })
+  })
+
+  describe("Validation", () => {
+    it("should not submit when name is empty", async () => {
+      renderWithProviders(<{{Name}}Form />)
+
+      // Name input has required attribute
+      const nameInput = screen.getByLabelText("Name")
+      expect(nameInput).toHaveAttribute("required")
+
+      // Try to submit without filling name
+      await user.click(screen.getByRole("button", { name: "Save" }))
+
+      // create{{Name}} should not be called
+      expect(create{{Name}}).not.toHaveBeenCalled()
+    })
+  })
+
+  describe("Accessibility", () => {
+    it("should have accessible labels", () => {
+      renderWithProviders(<{{Name}}Form />)
+
+      expect(screen.getByLabelText("Name")).toBeInTheDocument()
+    })
+
+    it("should associate error messages with inputs", async () => {
+      ;(create{{Name}} as jest.Mock).mockResolvedValue({
+        success: false,
+        error: "Validation error",
+      })
+
+      renderWithProviders(<{{Name}}Form />)
+
+      await user.type(screen.getByLabelText("Name"), "Test")
+      await user.click(screen.getByRole("button", { name: "Save" }))
+
+      await waitFor(() => {
+        const errorMessage = screen.getByRole("alert")
+        expect(errorMessage).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe("i18n", () => {
+    it("should render in Japanese", () => {
+      const jaMessages = {
+        common: {
+          save: "保存",
+          saving: "保存中...",
+        },
+        {{name}}s: {
+          form: {
+            info: "{{Name}}情報",
+            name: "名前",
+            namePlaceholder: "{{name}}名を入力",
+          },
+        },
+      }
+
+      render(
+        <NextIntlClientProvider locale="ja" messages={jaMessages}>
+          <{{Name}}Form />
+        </NextIntlClientProvider>
+      )
+
+      expect(screen.getByLabelText("名前")).toBeInTheDocument()
+      expect(screen.getByRole("button", { name: "保存" })).toBeInTheDocument()
+    })
+  })
+})

package/plugin/shirokuma-skills-ja/skills/nextjs-vibe-coding/templates/delete-button.tsx.template

@@ -0,0 +1,86 @@
+// components/{{name}}-delete-button.tsx
+"use client"
+
+import { useState, useTransition } from "react"
+import { useTranslations } from "next-intl"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import { delete{{Name}} } from "@/lib/actions/{{name}}"
+import { Trash2, AlertTriangle } from "lucide-react"
+
+interface {{Name}}DeleteButtonProps {
+  id: string
+  name: string
+}
+
+export function {{Name}}DeleteButton({ id, name }: {{Name}}DeleteButtonProps) {
+  const [isPending, startTransition] = useTransition()
+  const [error, setError] = useState<string | null>(null)
+  const [open, setOpen] = useState(false)
+  const router = useRouter()
+  const t = useTranslations("{{name}}s")
+  const tCommon = useTranslations("common")
+
+  const handleDelete = () => {
+    setError(null)
+    startTransition(async () => {
+      const result = await delete{{Name}}(id)
+      if (result.success) {
+        setOpen(false)
+        router.refresh()
+      } else {
+        setError(result.error)
+      }
+    })
+  }
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <Trash2 className="h-4 w-4 text-destructive" />
+          <span className="sr-only">{tCommon("delete")}</span>
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{t("deleteConfirm")}</AlertDialogTitle>
+          <AlertDialogDescription>
+            {t("deleteWarning", { name })}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        {error && (
+          <div className="rounded-md bg-destructive/10 p-4 text-sm text-destructive flex items-center gap-2">
+            <AlertTriangle className="h-4 w-4" />
+            {error}
+          </div>
+        )}
+
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isPending}>
+            {tCommon("cancel")}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleDelete}
+            disabled={isPending}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            {isPending ? tCommon("deleting") : tCommon("delete")}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

package/plugin/shirokuma-skills-ja/skills/nextjs-vibe-coding/templates/form-component.tsx.template

@@ -0,0 +1,142 @@
+// components/{{name}}-form.tsx
+"use client"
+
+import { useState, useTransition } from "react"
+import { useRouter } from "next/navigation"
+import { useTranslations } from "next-intl"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { create{{Name}}, update{{Name}} } from "@/lib/actions/{{name}}"
+import { CheckCircle, AlertTriangle } from "lucide-react"
+
+interface {{Name}}FormProps {
+  initialData?: {
+    id: string
+    name: string
+    description?: string | null
+  }
+  onSuccess?: () => void
+}
+
+export function {{Name}}Form({ initialData, onSuccess }: {{Name}}FormProps) {
+  const [isPending, startTransition] = useTransition()
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState(false)
+  const router = useRouter()
+  const t = useTranslations("{{name}}s.form")
+  const tCommon = useTranslations("common")
+
+  const isEditing = !!initialData?.id
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setError(null)
+    setSuccess(false)
+
+    const formData = new FormData(e.currentTarget)
+
+    startTransition(async () => {
+      try {
+        const result = isEditing
+          ? await update{{Name}}(initialData.id, formData)
+          : await create{{Name}}(formData)
+
+        if (result.success) {
+          setSuccess(true)
+          onSuccess?.()
+          if (!isEditing) {
+            router.push("/{{name}}s")
+          }
+          setTimeout(() => setSuccess(false), 3000)
+        } else {
+          setError(result.error)
+        }
+      } catch {
+        setError(tCommon("saveFailed"))
+      }
+    })
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      {/* Error Message */}
+      {error && (
+        <div
+          role="alert"
+          className="rounded-md bg-destructive/10 p-4 text-sm text-destructive flex items-center gap-2"
+        >
+          <AlertTriangle className="h-4 w-4" />
+          {error}
+        </div>
+      )}
+
+      {/* Success Message */}
+      {success && (
+        <div className="rounded-md bg-green-500/10 p-4 text-sm text-green-600 dark:text-green-400 flex items-center gap-2">
+          <CheckCircle className="h-4 w-4" />
+          {t("saved")}
+        </div>
+      )}
+
+      {/* Form Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle>{t("info")}</CardTitle>
+          <CardDescription>
+            {isEditing ? t("editDescription") : t("createDescription")}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Name Field */}
+          <div className="space-y-2">
+            <Label htmlFor="name">{t("name")}</Label>
+            <Input
+              id="name"
+              name="name"
+              defaultValue={initialData?.name}
+              placeholder={t("namePlaceholder")}
+              required
+              maxLength={100}
+              disabled={isPending}
+            />
+          </div>
+
+          {/* Description Field */}
+          <div className="space-y-2">
+            <Label htmlFor="description">{t("description")}</Label>
+            <Textarea
+              id="description"
+              name="description"
+              defaultValue={initialData?.description ?? ""}
+              placeholder={t("descriptionPlaceholder")}
+              maxLength={500}
+              disabled={isPending}
+              rows={3}
+            />
+            <p className="text-xs text-muted-foreground">
+              {t("descriptionHelp")}
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Submit Button */}
+      <div className="flex gap-4">
+        <Button type="submit" disabled={isPending}>
+          {isPending ? tCommon("saving") : isEditing ? tCommon("update") : tCommon("create")}
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => router.back()}
+          disabled={isPending}
+        >
+          {tCommon("cancel")}
+        </Button>
+      </div>
+    </form>
+  )
+}

package/plugin/shirokuma-skills-ja/skills/nextjs-vibe-coding/templates/messages-split/common.json.template

@@ -0,0 +1,46 @@
+{
+  "app": {
+    "name": "Application Name",
+    "description": "Application description"
+  },
+  "nav": {
+    "home": "Home",
+    "dashboard": "Dashboard",
+    "settings": "Settings"
+  },
+  "actions": {
+    "save": "Save",
+    "cancel": "Cancel",
+    "delete": "Delete",
+    "edit": "Edit",
+    "create": "Create",
+    "update": "Update",
+    "search": "Search",
+    "filter": "Filter",
+    "clear": "Clear",
+    "confirm": "Confirm",
+    "back": "Back",
+    "next": "Next",
+    "previous": "Previous"
+  },
+  "status": {
+    "loading": "Loading...",
+    "saving": "Saving...",
+    "deleting": "Deleting...",
+    "success": "Success",
+    "error": "Error"
+  },
+  "pagination": {
+    "page": "Page",
+    "of": "of",
+    "showing": "Showing",
+    "to": "to",
+    "entries": "entries",
+    "first": "First",
+    "last": "Last"
+  },
+  "table": {
+    "noData": "No data available",
+    "actions": "Actions"
+  }
+}