typescript-style

โดย contentstack

ใช้เมื่อแก้ไขไฟล์ TypeScript หรือ React และต้องสอดคล้องกับข้อกำหนดของคอมไพเลอร์และ ESLint ของ repo นี้

npx skills add https://github.com/contentstack/kickstart-next-ssr --skill typescript-style

TypeScript style – kickstart-next-ssr

When to use

  • Adding or changing .ts / .tsx files
  • Deciding server vs client components or public env usage
  • Aligning with ESLint rules for this project

Instructions

Compiler

  • tsconfig.json enables strict, noEmit, jsx: "react-jsx", moduleResolution: "bundler", and the Next.js TypeScript plugin.
  • Path alias: @/* maps to the repository root (e.g. @/lib/contentstack, @/components/ContentstackLivePreview).

React / Next.js boundaries

  • Server Components are the default. Use the "use client" directive only when you need hooks, browser APIs, or client-only SDK init—see components/ContentstackLivePreview.tsx.
  • Async server components are used in app/page.tsx (searchParams as a Promise per Next.js 16 patterns).

ESLint

  • .eslintrc.json extends next/core-web-vitals and next/typescript.
  • @typescript-eslint/no-explicit-any is off; prefer proper types from the SDK or lib/types.ts when practical.

Env types

  • Browser-exposed configuration uses NEXT_PUBLIC_* only. Do not assume secret server-only env vars exist unless you add them explicitly and document them.

Skills เพิ่มเติมจาก contentstack

cms-assets
contentstack
ให้คำแนะนำนักพัฒนาเกี่ยวกับการจัดระเบียบ การส่งมอบ และการแปลง assets ใน Contentstack ครอบคลุมโครงสร้างโฟลเดอร์ การแปลงผ่าน Image Delivery API การเผยแพร่…
cms-branches-aliases
contentstack
แนะนำนักพัฒนาเกี่ยวกับการใช้ branches ของ Contentstack สำหรับการพัฒนาคอนเทนต์แบบแยกส่วน และ aliases สำหรับการ部署คอนเทนต์โดยไม่มีการหยุดให้บริการ ครอบคลุมกลยุทธ์การจัดการ branches และ…
cms-data-modeling-best-practices
contentstack
แนะนำนักพัฒนาในการออกแบบโมเดลเนื้อหาใน Contentstack โดยใช้โครงสร้างที่เรียบง่ายที่สุดและสามารถนำกลับมาใช้ใหม่ได้ สกิลนี้อธิบายว่าควรใช้ content types, references, global… เมื่อใด
cms-live-preview-visual-builder-support-assistant
contentstack
วินิจฉัยและแนะนำการติดตั้ง Contentstack Live Preview และ Visual Builder ตรวจสอบบริบทตัวอย่าง ระบุสัญญาที่ขาด และแนะนำ…
cms-releases
contentstack
แนะนำนักพัฒนาเกี่ยวกับการใช้ Contentstack Releases สำหรับการปรับใช้เนื้อหาแบบประสานงานและเป็นอะตอมมิก ครอบคลุมการสร้างรีลีส การจัดการไอเทม การปรับใช้แบบเป็นขั้นตอน…
cms-roles-permissions
contentstack
ให้คำแนะนำนักพัฒนาเกี่ยวกับการออกแบบบทบาท สิทธิ์ ทีม และการเข้าถึงโทเค็นใน Contentstack อธิบายบทบาทในตัว บทบาทที่กำหนดเอง การรวมสิทธิ์…
cms-taxonomy
contentstack
ให้คำแนะนำนักพัฒนาเกี่ยวกับการใช้ Contentstack Taxonomy สำหรับการจำแนกเนื้อหาที่มีโครงสร้างและเป็นลำดับชั้น รวมถึงการกรองฝั่งดีลิเวอรี ครอบคลุม taxonomy เทียบกับ tags,…
cms-tokens-authentication
contentstack
แนะนำนักพัฒนาในการเลือกวิธีการรับรองความถูกต้องและประเภทโทเค็นของ Contentstack ที่เหมาะสมสำหรับกรณีการใช้งาน frontend, backend, automation และแอปพลิเคชันของบุคคลที่สาม…