# Typescript Style

> TypeScript compiler options, ESLint setup, and Contentstack entry typing conventions for kickstart-next.

- Skill: `contentstack/typescript-style` (Agent Skill)
- Install (CLI): `npx skillmds@latest add contentstack/typescript-style`
- Raw SKILL.md: https://api.skillmd.com/api/skills/contentstack/typescript-style/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools, Web & Frontend
- Author: contentstack (https://skillmd.com/u/contentstack)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/contentstack/typescript-style

---


# TypeScript style – kickstart-next

## When to use

- You are changing [tsconfig.json](../../tsconfig.json) or [eslint.config.mjs](../../eslint.config.mjs).
- You are adding or adjusting TypeScript types for Contentstack entries or Live Preview field metadata.

## Instructions

### Compiler options

- [tsconfig.json](../../tsconfig.json): `strict` is **true**, `noEmit` true, `moduleResolution` `bundler`, `jsx` `react-jsx`, `paths` includes `@/*` → `./*`.
- Include patterns cover `**/*.ts`, `**/*.tsx`, and Next-generated types under `.next`.

### ESLint

- [eslint.config.mjs](../../eslint.config.mjs) composes `eslint-config-next` **core-web-vitals** and **typescript** presets.
- `@typescript-eslint/no-explicit-any` is explicitly set to **off**; avoid introducing `any` without reason, but the project does not fail lint on it.

### Content models

- Prefer extending [lib/types.ts](../../lib/types.ts) for stack-backed shapes (`Page`, blocks, files, CSLP `$` mappings). When Live Preview needs new editable regions, add the corresponding `$` field shapes on interfaces.