ebm-skills 1.0.0

package/skills/ebm-form/REFERENCE.md

@@ -0,0 +1,365 @@
+# ebm-form Reference
+
+## Input required from user
+
+```
+1. Form type      — create/edit | search/filter
+2. Feature name   — e.g. "users", "products"
+3. Prisma model   — e.g. "User" (for create/edit) or skip for search forms
+4. Fields         — auto-detect from prisma/schema.prisma if exists
+                    else: "name:string, email:email, role:select, active:boolean"
+5. For select fields: options list — e.g. "admin,user,viewer"
+6. For relation fields: related model + label/value fields
+```
+
+## Field type mapping
+
+| Type | Component | Zod type |
+|------|-----------|----------|
+| `string` | `<input type="text">` | `z.string()` |
+| `email` | `<input type="email">` | `z.string().email()` |
+| `password` | `<input type="password">` | `z.string().min(8)` |
+| `number` | `<input type="number">` | `z.coerce.number()` |
+| `boolean` | `<input type="checkbox">` | `z.boolean()` |
+| `date` | `<input type="date">` | `z.coerce.date()` |
+| `select` | `<select>` | `z.enum([...options])` |
+| `textarea` | `<textarea>` | `z.string()` |
+| `file` | `<input type="file">` | `z.instanceof(File).optional()` |
+| `richtext` | Tiptap editor | `z.string()` |
+| `relation` | async `<select>` fetch from API | `z.number()` or `z.string()` |
+
+---
+
+## Files to generate
+
+### Create/Edit form
+
+| File | Purpose |
+|------|---------|
+| `src/components/forms/[Feature]Form.tsx` | Form component (create + edit mode) |
+| `src/lib/schemas/[feature].schema.ts` | Zod schema (shared with API) |
+| `src/app/api/[feature]/route.ts` | POST (create) endpoint |
+| `src/app/api/[feature]/[id]/route.ts` | PUT (update) + DELETE endpoint |
+
+### Search/Filter form
+
+| File | Purpose |
+|------|---------|
+| `src/components/forms/[Feature]FilterForm.tsx` | Filter form component |
+| `src/lib/schemas/[feature].schema.ts` | Zod schema for filter params |
+
+---
+
+## Template: `src/lib/schemas/[feature].schema.ts`
+
+```typescript
+import { z } from 'zod'
+
+export const create[Feature]Schema = z.object({
+  name: z.string().min(1, 'Name is required'),
+  email: z.string().email('Invalid email'),
+  // role: z.enum(['admin', 'user', 'viewer']),
+  // active: z.boolean().default(true),
+  // birthDate: z.coerce.date().optional(),
+})
+
+export const update[Feature]Schema = create[Feature]Schema.partial()
+
+export type Create[Feature]Input = z.infer<typeof create[Feature]Schema>
+export type Update[Feature]Input = z.infer<typeof update[Feature]Schema>
+```
+
+---
+
+## Template: `src/components/forms/[Feature]Form.tsx`
+
+```typescript
+'use client'
+
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useRouter } from 'next/navigation'
+import { create[Feature]Schema, type Create[Feature]Input } from '@/lib/schemas/[feature].schema'
+
+interface [Feature]FormProps {
+  defaultValues?: Partial<Create[Feature]Input>
+  id?: number | string  // present = edit mode
+}
+
+export function [Feature]Form({ defaultValues, id }: [Feature]FormProps) {
+  const router = useRouter()
+  const isEdit = !!id
+
+  const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<Create[Feature]Input>({
+    resolver: zodResolver(create[Feature]Schema),
+    defaultValues,
+  })
+
+  async function onSubmit(data: Create[Feature]Input) {
+    const url = isEdit ? `/api/[feature]/${id}` : `/api/[feature]`
+    const method = isEdit ? 'PUT' : 'POST'
+
+    const res = await fetch(url, {
+      method,
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    })
+
+    if (!res.ok) {
+      const err = await res.json()
+      alert(err.message ?? 'Something went wrong')
+      return
+    }
+
+    router.push('/dashboard/[feature]')
+    router.refresh()
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-5 max-w-lg">
+      {/* string field example */}
+      <div>
+        <label className="block text-sm font-medium text-slate-300 mb-1.5">Name</label>
+        <input
+          {...register('name')}
+          className="w-full bg-slate-900 border border-slate-600 rounded-lg px-3 py-2.5 text-white placeholder-slate-500 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
+          placeholder="Enter name"
+        />
+        {errors.name && <p className="mt-1 text-xs text-red-400">{errors.name.message}</p>}
+      </div>
+
+      {/* email field example */}
+      <div>
+        <label className="block text-sm font-medium text-slate-300 mb-1.5">Email</label>
+        <input
+          type="email"
+          {...register('email')}
+          className="w-full bg-slate-900 border border-slate-600 rounded-lg px-3 py-2.5 text-white placeholder-slate-500 text-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
+          placeholder="Enter email"
+        />
+        {errors.email && <p className="mt-1 text-xs text-red-400">{errors.email.message}</p>}
+      </div>
+
+      {/* select field example
+      <div>
+        <label className="block text-sm font-medium text-slate-300 mb-1.5">Role</label>
+        <select {...register('role')}
+          className="w-full bg-slate-900 border border-slate-600 rounded-lg px-3 py-2.5 text-white text-sm focus:outline-none focus:border-blue-500">
+          <option value="admin">Admin</option>
+          <option value="user">User</option>
+        </select>
+        {errors.role && <p className="mt-1 text-xs text-red-400">{errors.role.message}</p>}
+      </div>
+      */}
+
+      {/* boolean field example
+      <div className="flex items-center gap-3">
+        <input type="checkbox" id="active" {...register('active')}
+          className="w-4 h-4 rounded border-slate-600 bg-slate-900 text-blue-600 focus:ring-blue-500" />
+        <label htmlFor="active" className="text-sm font-medium text-slate-300">Active</label>
+      </div>
+      */}
+
+      <div className="flex gap-3 pt-2">
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="px-5 py-2.5 bg-blue-600 hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed text-white text-sm font-semibold rounded-lg transition-colors"
+        >
+          {isSubmitting ? 'Saving...' : isEdit ? 'Save Changes' : 'Create'}
+        </button>
+        <button
+          type="button"
+          onClick={() => router.back()}
+          className="px-5 py-2.5 bg-slate-700 hover:bg-slate-600 text-white text-sm font-medium rounded-lg transition-colors"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  )
+}
+```
+
+---
+
+## Template: `src/app/api/[feature]/route.ts` (POST)
+
+```typescript
+import { NextRequest, NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/app/api/auth/[...nextauth]/auth-options'
+import { prisma } from '@/lib/prisma'
+import { create[Feature]Schema } from '@/lib/schemas/[feature].schema'
+
+export async function POST(req: NextRequest) {
+  const session = await getServerSession(authOptions)
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const body = await req.json()
+  const parsed = create[Feature]Schema.safeParse(body)
+  if (!parsed.success) {
+    return NextResponse.json({ error: 'Validation failed', issues: parsed.error.issues }, { status: 422 })
+  }
+
+  const record = await prisma.[model].create({ data: parsed.data })
+  return NextResponse.json(record, { status: 201 })
+}
+```
+
+## Template: `src/app/api/[feature]/[id]/route.ts` (PUT + DELETE)
+
+```typescript
+import { NextRequest, NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/app/api/auth/[...nextauth]/auth-options'
+import { prisma } from '@/lib/prisma'
+import { update[Feature]Schema } from '@/lib/schemas/[feature].schema'
+
+export async function PUT(req: NextRequest, { params }: { params: { id: string } }) {
+  const session = await getServerSession(authOptions)
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  const body = await req.json()
+  const parsed = update[Feature]Schema.safeParse(body)
+  if (!parsed.success) {
+    return NextResponse.json({ error: 'Validation failed', issues: parsed.error.issues }, { status: 422 })
+  }
+
+  const record = await prisma.[model].update({
+    where: { id: Number(params.id) },
+    data: parsed.data,
+  })
+  return NextResponse.json(record)
+}
+
+export async function DELETE(_req: NextRequest, { params }: { params: { id: string } }) {
+  const session = await getServerSession(authOptions)
+  if (!session) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+
+  await prisma.[model].delete({ where: { id: Number(params.id) } })
+  return NextResponse.json({ success: true })
+}
+```
+
+---
+
+## Template: Search/Filter form
+
+```typescript
+// src/components/forms/[Feature]FilterForm.tsx
+'use client'
+
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useRouter, useSearchParams, usePathname } from 'next/navigation'
+import { z } from 'zod'
+
+const filterSchema = z.object({
+  search: z.string().optional(),
+  // status: z.enum(['active', 'inactive', '']).optional(),
+  // dateFrom: z.string().optional(),
+  // dateTo: z.string().optional(),
+})
+
+type FilterInput = z.infer<typeof filterSchema>
+
+export function [Feature]FilterForm() {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  const { register, handleSubmit, reset } = useForm<FilterInput>({
+    resolver: zodResolver(filterSchema),
+    defaultValues: {
+      search: searchParams.get('search') ?? '',
+    },
+  })
+
+  function onSubmit(data: FilterInput) {
+    const params = new URLSearchParams()
+    Object.entries(data).forEach(([k, v]) => { if (v) params.set(k, v) })
+    params.set('page', '1')
+    router.push(`${pathname}?${params.toString()}`)
+  }
+
+  function onReset() {
+    reset()
+    router.push(pathname)
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-wrap gap-3 items-end">
+      <div>
+        <label className="block text-xs text-slate-400 mb-1">Search</label>
+        <input
+          {...register('search')}
+          placeholder="Search..."
+          className="bg-slate-900 border border-slate-600 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-blue-500 w-56"
+        />
+      </div>
+      {/* Add more filter fields here */}
+      <button type="submit"
+        className="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded-lg transition-colors">
+        Filter
+      </button>
+      <button type="button" onClick={onReset}
+        className="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white text-sm font-medium rounded-lg transition-colors">
+        Reset
+      </button>
+    </form>
+  )
+}
+```
+
+---
+
+## UI Library variants
+
+### shadcn/ui
+Replace inputs with `<Input>`, `<Select>`, `<Checkbox>` from shadcn.
+Wrap fields in `<FormField>`, `<FormControl>`, `<FormMessage>` from `@/components/ui/form`.
+
+### Ant Design
+```typescript
+import { Form, Input, Select, Button } from 'antd'
+// Use Form.useForm() instead of RHF
+// Validation via Form rules prop
+// Note: Ant Design has its own form system — skip RHF when using antd
+```
+
+### MUI
+```typescript
+import { TextField, Select, Button } from '@mui/material'
+// Keep RHF, use Controller wrapper for MUI components:
+// <Controller name="field" control={control} render={({ field }) => <TextField {...field} />} />
+```
+
+---
+
+## Required dependencies
+
+```bash
+npm install react-hook-form @hookform/resolvers zod
+```
+
+---
+
+## Post-generation summary
+
+```
+✓ Generated [N] files for [feature] form
+
+Files:
+  src/components/forms/[Feature]Form.tsx
+  src/lib/schemas/[feature].schema.ts
+  src/app/api/[feature]/route.ts          (POST)
+  src/app/api/[feature]/[id]/route.ts     (PUT, DELETE)
+
+TODO in generated files:
+  1. Uncomment/add field blocks in [Feature]Form.tsx
+  2. Add select options for enum fields
+  3. Update Prisma model name in API routes (marked with [model])
+
+Install: npm install react-hook-form @hookform/resolvers zod
+```

package/skills/ebm-form/SKILL.md

@@ -0,0 +1,45 @@
+---
+name: ebm-form
+description: Generate a create/edit form or search/filter form using React Hook Form and Zod. Auto-detects fields from prisma/schema.prisma when available. Also generates API routes (POST, PUT, DELETE) for create/edit forms. Reads UI library from ebm.config.json. Use when user invokes /ebm-form or asks to build a form, create page, edit page, or search/filter UI.
+---
+
+# /ebm-form
+
+### Step 1 — Ask form type
+```
+1. Form type:     create/edit | search/filter
+2. Feature name:  e.g. "products"
+3. Prisma model:  e.g. "Product" (create/edit only)
+4. Fields:        auto-detect from prisma/schema.prisma if exists
+                  else ask: "name:string, price:number, status:select, active:boolean"
+5. For select fields: options list — e.g. "active,inactive,draft"
+6. For relation fields: related model + label/value fields
+```
+
+### Step 2 — Read config
+```
+ebm.config.json → uiLib (shadcn | antd | mui | none)
+```
+
+### Step 3 — Generate files
+
+**create/edit → 4 files:**
+```
+src/components/forms/[Feature]Form.tsx
+src/lib/schemas/[feature].schema.ts
+src/app/api/[feature]/route.ts          (POST)
+src/app/api/[feature]/[id]/route.ts     (PUT, DELETE)
+```
+
+**search/filter → 2 files:**
+```
+src/components/forms/[Feature]FilterForm.tsx
+src/lib/schemas/[feature].schema.ts
+```
+
+See [REFERENCE.md](REFERENCE.md) for field type mapping, templates, and UI lib variants.
+
+## Shared rules
+- Always use React Hook Form + zodResolver
+- Path alias: `@/*` → `./src/*` always
+- Thai UI text: use formal Thai — see `/ebm-thai` glossary

package/skills/ebm-init/REFERENCE.md

@@ -0,0 +1,264 @@
+# ebm-init Reference
+
+## Post-CLI scaffolding by project type
+
+After `create-next-app` runs, scaffold additional files based on project type.
+
+---
+
+## Type: landing (หน้าบ้านแสดงข้อมูล)
+
+| File | Purpose |
+|------|---------|
+| `src/app/layout.tsx` | Root layout, imports globals.css |
+| `src/app/page.tsx` | Hero/landing page |
+| `src/app/(pages)/layout.tsx` | Content route group layout |
+| `src/components/ui/Navbar.tsx` | Sticky nav: logo + links |
+| `src/components/ui/Footer.tsx` | Footer with copyright |
+
+```tsx
+// src/components/ui/Navbar.tsx
+'use client'
+import Link from 'next/link'
+export function Navbar() {
+  return (
+    <nav className="sticky top-0 z-10 border-b border-slate-700/50 bg-slate-900/60 backdrop-blur-md">
+      <div className="mx-auto max-w-6xl px-6 flex items-center justify-between h-16">
+        <Link href="/" className="text-xl font-bold text-white">Logo</Link>
+        <div className="flex gap-6 text-sm text-slate-400">
+          <Link href="/" className="hover:text-white transition-colors">Home</Link>
+          <Link href="/about" className="hover:text-white transition-colors">About</Link>
+        </div>
+      </div>
+    </nav>
+  )
+}
+```
+
+---
+
+## Type: backoffice (Dashboard)
+
+| File | Purpose |
+|------|---------|
+| `src/app/(dashboard)/layout.tsx` | Sidebar + Header + children |
+| `src/app/(dashboard)/dashboard/page.tsx` | Overview with stat cards |
+| `src/components/layout/Sidebar.tsx` | Left nav with active state |
+| `src/components/layout/Header.tsx` | Top bar: page title + user avatar |
+
+```tsx
+// src/app/(dashboard)/layout.tsx
+import { Sidebar } from '@/components/layout/Sidebar'
+import { Header } from '@/components/layout/Header'
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex h-screen bg-slate-900 text-white overflow-hidden">
+      <Sidebar />
+      <div className="flex flex-col flex-1 overflow-hidden">
+        <Header />
+        <main className="flex-1 overflow-y-auto p-6">{children}</main>
+      </div>
+    </div>
+  )
+}
+```
+
+```tsx
+// src/components/layout/Sidebar.tsx
+'use client'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+const NAV = [
+  { href: '/dashboard', label: 'Dashboard' },
+  { href: '/dashboard/users', label: 'Users' },
+  { href: '/dashboard/settings', label: 'Settings' },
+]
+
+export function Sidebar() {
+  const pathname = usePathname()
+  return (
+    <aside className="w-64 flex-shrink-0 bg-slate-800 border-r border-slate-700 flex flex-col">
+      <div className="h-16 flex items-center px-6 border-b border-slate-700">
+        <span className="text-xl font-bold text-white">Admin</span>
+      </div>
+      <nav className="flex-1 px-3 py-4 space-y-1">
+        {NAV.map((item) => (
+          <Link key={item.href} href={item.href}
+            className={`flex items-center px-3 py-2 rounded-lg text-sm transition-colors ${
+              pathname === item.href
+                ? 'bg-blue-600 text-white'
+                : 'text-slate-400 hover:text-white hover:bg-slate-700'
+            }`}>
+            {item.label}
+          </Link>
+        ))}
+      </nav>
+    </aside>
+  )
+}
+```
+
+---
+
+## Type: both (landing + backoffice)
+
+Root `src/app/layout.tsx` = minimal shell only (no nav/sidebar).
+
+Route groups:
+- `src/app/(public)/` — landing files (Type A layout pattern)
+- `src/app/(dashboard)/` — admin files (Type B layout pattern)
+
+```tsx
+// src/app/layout.tsx (Type C root — minimal)
+import './globals.css'
+export const metadata = { title: 'App', description: '' }
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className="bg-slate-900 text-white antialiased">{children}</body>
+    </html>
+  )
+}
+```
+
+---
+
+## Tailwind v4 setup (if tailwind: true)
+
+```css
+/* src/app/globals.css */
+@import "tailwindcss";
+
+/* Primary color override — use ebm.config.json primaryColor */
+@theme {
+  --color-primary: #3b82f6; /* replace with user's chosen color */
+}
+```
+
+```js
+// postcss.config.mjs
+const config = { plugins: { '@tailwindcss/postcss': {} } }
+export default config
+```
+
+Install: `tailwindcss @tailwindcss/postcss`
+
+**Dark mode:** add `class="dark"` to `<html>` and use `dark:` variants
+**Light mode:** default (no extra config needed)
+**System mode:** toggle via JS `document.documentElement.classList`
+
+---
+
+## UI Library setup
+
+### shadcn/ui
+```bash
+npx shadcn@latest init
+# Answer prompts: style=default, baseColor=slate, cssVariables=yes
+```
+Then install components as needed: `npx shadcn@latest add button input card`
+
+### Ant Design
+```bash
+npm install antd @ant-design/icons
+```
+```tsx
+// src/app/layout.tsx — wrap with AntdRegistry for SSR
+import { AntdRegistry } from '@ant-design/nextjs-registry'
+// ...
+<AntdRegistry>{children}</AntdRegistry>
+```
+Install: `npm install @ant-design/nextjs-registry`
+
+### MUI (Material UI)
+```bash
+npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
+```
+```tsx
+// src/app/layout.tsx — wrap with AppRouterCacheProvider
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'
+// ...
+<AppRouterCacheProvider>{children}</AppRouterCacheProvider>
+```
+Install: `npm install @mui/material-nextjs`
+
+---
+
+## Database setup
+
+### Prisma
+```bash
+npm install @prisma/client
+npm install -D prisma
+npx prisma init --datasource-provider [postgresql|mysql|sqlite]
+```
+
+### Drizzle
+```bash
+npm install drizzle-orm
+npm install -D drizzle-kit
+# PostgreSQL:  npm install pg @types/pg
+# MySQL:       npm install mysql2
+# SQLite:      npm install better-sqlite3 @types/better-sqlite3
+```
+Create `drizzle.config.ts`:
+```ts
+import { defineConfig } from 'drizzle-kit'
+export default defineConfig({
+  schema: './src/db/schema.ts',
+  out: './drizzle',
+  dialect: 'postgresql', // or mysql, sqlite
+  dbCredentials: { url: process.env.DATABASE_URL! },
+})
+```
+
+---
+
+## tsconfig.json (generate if missing or missing paths)
+```json
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
+```
+
+---
+
+## Post-generation summary template
+```
+✓ Project initialized with create-next-app
+✓ Generated [N] scaffold files
+✓ Saved config to ebm.config.json
+
+Stack:
+  Type:     [projectType]
+  Tailwind: [yes/no] — [colorMode], primary: [color]
+  UI lib:   [uiLib]
+  DB:       [orm] + [dbProvider]
+
+Next steps:
+1. npm install (or yarn/pnpm install)
+2. Copy .env.example → .env.local
+3. [if DB] npx prisma migrate dev --name init
+4. npm run dev
+
+[if backoffice or both]
+→ Run /ebm-auth to add authentication
+```