typescript-style

작성자: contentstack

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.

contentstack의 다른 스킬

brand-kit-assistant
contentstack
Contentstack Brand Kit 개념, 설정, 거버넌스 및 브랜드에 부합하는 AI 생성에 대해 사용자에게 조언합니다. API 관련 작업을 적절한 Brand Kit 기능으로 라우팅하거나…
official
cms-assets
contentstack
개발자에게 Contentstack에서 자산을 구성, 전달, 변환하는 방법에 대해 조언합니다. 폴더 구조, Image Delivery API 변환, 게시를 다룹니다...
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