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
指导开发者使用Contentstack分支进行隔离的内容开发,并使用别名实现零停机的内容部署。涵盖分支策略、…
official
cms-data-modeling-best-practices
contentstack
指导开发者在Contentstack中使用最简单可复用的结构来建模内容。该技能解释了何时使用内容类型、引用、全局…
official
cms-entries
contentstack
为开发者提供关于查询、本地化、版本管理、发布和构建Contentstack条目的建议,以实现高效交付。重点关注CDA的使用、引用……
official
cms-environments-publishing
contentstack
为开发人员提供关于配置环境、发布内容、使用交付和预览令牌、利用Sync API以及了解CDN和…的建议
official
cms-live-preview-visual-builder-support-assistant
contentstack
诊断并指导Contentstack Live Preview和Visual Builder的实施。追踪预览上下文,识别损坏的契约,并推荐…
official
cms-localization
contentstack
为开发人员提供Contentstack本地化建议:语言设置、回退链、本地化与未本地化条目、不可本地化字段及多语言环境…
official