ugt-nextjs-platform

Use when a project needs login — "ใส่ระบบ login", "ต่อ SSO", "login ด้วย AD", "ใช้ Keycloak ของบริษัท", "ยังไม่มีระบบสมาชิก" — SSO (Keycloak OIDC), AD/LDAP bind, or local email/password via Better Auth, plus session cookies, route guards in `proxy.ts`, RBAC, audit logging, the first-admin bootstrap page, and the /admin/users, /admin/roles, /admin/audit-logs pages. Also for anything touching permissions ("ใครเห็นเมนูนี้ได้", "เพิ่ม role", "guard หน้านี้", "หน้าจัดการ user/role") and the local-account lifecycle ("ลืมรหัสผ่าน", "รีเซ็ตรหัสผ่าน", "เปลี่ยนรหัสผ่านเอง", password policy). Reach for it on auth symptoms with documented causes here: ERR_TOO_MANY_REDIRECTS, login loops only in production, logout not sticking on https, static assets returning Unexpected token '<', Keycloak rejecting the redirect URI, a reset link that 404s under a basePath (full list in the skill). Requires ugt-nextjs-database-setup first. Not for CI (→ ugt-nextjs-cicd-setup).

Use when a project needs the org-standard delivery pipeline — "ทำ CI/CD", "ตั้ง Jenkins", "deploy ด้วย docker", "ต่อ SonarQube", "ยัง deploy มือทุกครั้ง" — producing the 10-stage Jenkinsfile, sonar-project.properties, Dockerfile, both compose files, the OWASP suppression file, and the /api/health route the healthcheck depends on. Also use when the pipeline misbehaves during setup — causes documented here: Quality Gate that never finishes (SonarQube→Jenkins webhook), OWASP stage timing out, container never reaching healthy, `COPY .next/standalone` failing, client-side env vars empty in the browser bundle, Groovy parse error after removing an optional block. Run ugt-nextjs-test-lint-setup first — the pipeline calls `lint`, `format:check` and `test:coverage` by exact name and goes red without them. Not for writing code that passes the gate (→ ugt-nextjs-clean-code) or DB/auth setup (→ ugt-nextjs-database-setup / ugt-nextjs-auth-setup).

SonarQube clean-code rules for the org's TypeScript/React/Next.js stack — write code that passes the Quality Gate on the FIRST scan instead of fixing violations after the pipeline goes red. Covers the modern-JS idioms SonarQube enforces (S77xx/S65xx/S6xxx), `Readonly<>` props, the duplication strategy (refactor vs `sonar.cpd.exclusions`), and correct NOSONAR / `sonar.issue.ignore` placement. Load this BEFORE writing or editing any component, server action, validation schema, table, or hook — the gate blocks on `new_violations = 0`, so a single stray `parseInt` fails the build for the whole team. Use it explicitly too when someone says "sonar ไม่ผ่าน", "แก้ violation", "Quality Gate แดง", "โค้ดซ้ำเยอะ", or asks how to suppress a finding correctly. Don't use for Jenkins/SonarQube server or pipeline config (→ ugt-nextjs-cicd-setup).

Use when a project needs SQL Server through Prisma — "ต่อ database", "ใช้ SQL Server", "ตั้ง prisma", "ยังไม่มี DB เลย" — or when designing any new table, column, stored procedure, view, or migration in an org project, because the naming convention and audit columns here are mandatory and expensive to change after data exists. Also use when writing raw SQL / `EXEC usp_*` calls, reading across a linked server, a stored-procedure call that times out (mssql 15-second default), setting up type-safe env validation, or debugging MSSQL migration problems (column renames that would drop data, filtered unique indexes Prisma can't express, `url` in the wrong place breaking generate). Load it before touching `prisma/schema.prisma` even for a one-field change — a column that collides with a T-SQL reserved word or misses an audit column costs a data migration later. Don't use for the auth/RBAC tables themselves (→ ugt-nextjs-auth-setup) or CI (→ ugt-nextjs-cicd-setup).

Use when a project needs its design agreement — "ทำข้อตกลง design", "ตั้ง design system", "กำหนดธีม", "ทำ DESIGN.md", "จัด layout ให้เป็นมาตรฐาน", "สีกับฟ้อนต์ยังมั่วอยู่", "UI แต่ละหน้าไม่เหมือนกัน" — covering the interview → generated `docs/DESIGN.md` (the design source of truth), shadcn/ui tokens in globals.css (org indigo + semantic-6 status set), Inter + Noto Sans Thai fonts, the app shell (sidebar/topbar via shadcn blocks), the org UI kit (DataTable, FormDialog, StatusBadge, IconAction, date pickers, formatter lib), and the harness rule that makes every later session read the agreement before touching UI. Works on a fresh project (full interview) or an existing one (scan → draft agreement → recorded deviations). Also handles "sync ข้อตกลง design" after a plugin update (diff against the org contract, record the decision). Run BEFORE ugt-nextjs-auth-setup — auth generates themed pages that must inherit these tokens. Not for writing feature UIs, nor Jenkins/DB/auth setup (→ their own skills).

Entry point for turning an existing Next.js project into one deployable on the org's infrastructure. Use when someone asks to "ทำให้ deploy ได้", "เอาขึ้น production", "ยังใช้งานจริงไม่ได้", "ทำให้ใช้งานได้จริง", "ทำตามมาตรฐานบริษัทให้ด้วย", wants to prepare a project built with AI, asks for several of database / login / test-lint / CI at once, or describes the symptom instead of the fix ("โปรเจคยังไม่มีอะไรเลย", "ต้องเตรียมอะไรบ้างก่อนขึ้น server") — they don't yet know which pieces they need, and this skill finds out. It interviews once, runs the child setup skills in dependency order (database → test-lint → design → auth → cicd, plus optional mail/upload), then installs the harness files (CLAUDE.md block, .claude/rules, .claude/state) so the standards outlive the session. Do NOT use when the request names exactly one area ("ต่อ database", "ทำ CI", "ใส่ login SSO", "ตั้ง vitest", "ทำข้อตกลง design") — go straight to that skill. Formerly ugt-nextjs-setup.

Use after `/plugin update` on a project that installed any ugt-nextjs skill — "sync kit", "อัปเดต plugin แล้ว ไฟล์ในโปรเจคตามไหม", "component ตกรุ่นไหม", "เอา fix ใหม่ของ data-table เข้าโปรเจค" — to find which copied kit files (components/ui, lib, auth pages, …) are behind the plugin's current assets, then update or merge each one WITH the user's consent. Every kit file carries a `// kit:` version+hash stamp, so the checker tells "outdated, never touched" (safe to overwrite) from "outdated, project edited it" (must merge). Also the answer when a bug the CHANGELOG says is fixed still reproduces in a project — the local copy is probably old. Not for updating the plugin itself (→ /plugin update), not for design-token or DESIGN.md drift (→ design-setup's "sync ข้อตกลง design"), and useless on a project that never installed the kit.

Use when a project needs to send email — "ส่งอีเมลแจ้งเตือน", "ตั้ง SMTP", "แจ้งเตือนหัวหน้าตอนมีคำขอ", "ทำ workflow อนุมัติแล้วต้องมีเมลแจ้ง", "อยากให้แก้ข้อความอีเมลได้เองโดยไม่ต้อง deploy" — installing nodemailer over the org SMTP relay, admin-editable templates (AppSettings override + in-code defaults), the fixed email chrome, and dev mode (a tester holding `dev-mode:enable` receives the mail instead of the real recipients, so approval flows can be tested end to end). Reach for it too on mail symptoms with documented causes here: mail that silently never arrives, the relay rejecting the sender, email links that 404 under a basePath, an approval failing because the mail step threw. Needs database (AppSettings) and auth (actor + permission) installed first. Not for Jenkins build-result emails (→ ugt-nextjs-cicd-setup, which uses emailext and its own NOTIFY_EMAIL).

Use when writing or editing feature code (dates, queries, fetches, forms, tables) on the org's Next.js + Prisma/MSSQL + React Query + next-intl stack. Every rule traces to a real production incident; read the matching reference BEFORE writing the code. Symptoms with documented root causes here: date off by one day ("วันที่เลื่อน −1", "วันเพี้ยน"), year shown as พ.ศ. (+543), stale UI after save ("บันทึกแล้วหน้าไม่อัปเดต"), fetch 404 only in production, "Maximum update depth exceeded", pagination "หน้า 1 จาก 0", Select crashing on an empty value, wrong table row selected ("ติ๊กแถวนึงได้อีกแถว"), form passes validation but save rejects ("ฟอร์มผ่านแต่บันทึกไม่ได้"), code edits not showing in the browser ("แก้โค้ดแล้วหน้าไม่เปลี่ยน"). Loads itself via paths on app/components/lib edits. Don't use for SonarQube violations (→ ugt-nextjs-clean-code) or installing infrastructure (→ the ugt-nextjs-*-setup skills).

Use when a Next.js/TypeScript project needs its test and code-quality tooling so the org CI pipeline can pass — Vitest (JUnit output + lcov coverage), ESLint, Prettier, husky/lint-staged pre-commit — or when the pipeline already fails at the Code Quality / Unit Tests / Quality Gate stages because `lint`, `format:check`, `test:coverage` or `build` is missing, no `test-results/junit.xml` is produced, or coverage isn't readable by SonarQube. Triggers: "ตั้ง test", "ใส่ vitest", "ยังไม่มี test เลย", "ตั้ง eslint / prettier", "pipeline แดงที่ lint", "coverage ไม่ขึ้นใน sonar". Run before ugt-nextjs-cicd-setup — the Jenkins pipeline calls these four npm scripts by exact name and goes red if any is absent. Don't use for writing the tests themselves (normal dev work) or for Jenkins/SonarQube server config (→ ugt-nextjs-cicd-setup). Formerly ugt-nextjs-quality-setup.

Use when a project needs users to attach files — "อัปโหลดไฟล์", "แนบเอกสาร", "แนบใบเสร็จ", "เก็บไฟล์แนบของคำขอ", "ต้องสแกนไวรัสก่อนเก็บ" — installing the Docker-volume storage layer, opt-in ClamAV scanning that fails closed, the `Attachments` table, an upload Route Handler, a permission-guarded download route, and the compose/Dockerfile changes the volume needs. Reach for it too on upload symptoms with documented causes here: files vanishing after a deploy, uploads failing around 1 MB, a 413 that never reaches the app, files readable by anyone who knows the URL, an uploaded .svg/.html running as script on your own domain. Needs database, auth and the org UI kit (ugt-nextjs-design-setup) installed first. Not for exporting/downloading generated files such as Excel reports — ordinary feature work with no storage.