typescript-style

Use when editing TypeScript or React files and matching this repo’s compiler and ESLint conventions.

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.

Lebih banyak skill dari contentstack

brand-kit-assistant
contentstack
Memberikan saran kepada pengguna tentang konsep Contentstack Brand Kit, pengaturan, tata kelola, dan pembuatan konten AI sesuai merek. Mengarahkan tugas khusus API ke kemampuan Brand Kit yang tepat atau…
official
cms-assets
contentstack
Advise developers on organizing, delivering, and transforming assets in Contentstack. Cover folder structure, Image Delivery API transformations, publishing…
official
cms-branches-aliases
contentstack
Advise developers on using Contentstack branches for isolated content development and aliases for zero-downtime content deployments. Cover branch strategy,…
official
cms-data-modeling-best-practices
contentstack
Guide developers to model content in Contentstack using the simplest reusable structure. The skill explains when to use content types, references, global…
official
cms-entries
contentstack
Advise developers on querying, localizing, versioning, publishing, and structuring Contentstack entries for efficient delivery. Focus on CDA usage, reference…
official
cms-environments-publishing
contentstack
Advise developers on configuring environments, publishing content, using delivery and preview tokens, leveraging the Sync API, and understanding CDN and…
official
cms-live-preview-visual-builder-support-assistant
contentstack
Diagnose and guide Contentstack Live Preview and Visual Builder implementations. Trace preview context, identify the broken contract, and recommend the…
official
cms-localization
contentstack
Advise developers on Contentstack localization: language setup, fallback chains, localized vs unlocalized entries, non-localizable fields, and multi-locale…
official