本文へ移動
cccskills
無料GitHub で公開

mk:typescript

Use when writing TypeScript code, fixing type errors, or configuring strict type safety. Auto-activates on .ts/.tsx files. Covers null handling, utility types, and ESLint.

インストール方法を見る

含まれるファイル(3)

  • SKILL.md6.1 KB
  • references/review-checklist.md3.4 KB
  • references/strict-patterns.md3.1 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

<!-- Improvements over source skills: - Split from 361-line monolith to SKILL.md + references/ (Phase 1: CLASS A) - Framework-agnostic (removed React-specific patterns from frontend-development) - Integrated with security-rules.md (no `any` types already enforced) - Added workflow phase anchoring (Phase 3 Build) -->

TypeScript Expert

Strict TypeScript patterns for type safety, null handling, and modern best practices.

When to Use

Auto-activate on: .ts, .tsx, .js, .jsx files, type errors, ESLint issues, "fix types", "add types", "TypeScript help"

Explicit: /mk:typescript [concern]

Do NOT invoke for: Vue-specific patterns (use mk:vue), visual design (use mk:frontend-design)

Workflow Integration

Operates in Phase 3 (Build GREEN). Output supports the developer agent.

Process

  1. Detect concern — type error? new code? refactor? ESLint config?
  2. Load relevant reference — strict-null, type-safety, utility-types, or eslint
  3. Apply patterns — implement using strict TS patterns from references
  4. Verify — npx tsc --noEmit must pass with zero errors

Core Rules (always apply)

  • NEVER use any — use unknown + type guards (security-rules.md)
  • NEVER use type assertion — use unknown + type guards (security-rules.md)
  • NEVER use implicit truthiness for null checks — use explicit === null || === undefined
  • ALWAYS use strict TypeScript config: strict: true, noUncheckedIndexedAccess: true
  • ALWAYS use type imports: import type { X } from 'y'
  • PREFER named exports over default exports
  • PREFER discriminated unions over type assertions

Anti-Patterns

Don'tDo Instead
as any or as unknown as XProper type narrowing with guards
if (value) for null checkif (value !== null && value !== undefined)
export defaultexport const X / export function X
Object typeRecord<string, unknown>
Implicit return typesExplicit return type annotations
enum (runtime overhead)as const satisfies or union types

Output Format

## TypeScript: {concern}

**Files:** {list of .ts/.tsx files modified}
**Config:** {tsconfig changes if any}

### Changes Applied
{numbered list of type improvements}

### Verification
{tsc --noEmit output — must show 0 errors}

References

ReferenceWhen to loadContent
strict-patterns.mdType safety workNull handling, discriminated unions, type guards, utility types
review-checklist.mdWhen reviewing TypeScript codePrioritized checklist: CRITICAL (security), HIGH (type safety, async, errors), MEDIUM (React, perf)

Failure Handling

FailureRecovery
tsc --noEmit fails after changesFix errors before proceeding — never ship with type errors
No tsconfig.json foundSuggest creating one with strict config
Third-party types missingnpm install @types/{package}

Gotchas

  • as cast silences narrowing errors and hides real bugs — value as User tells TS to trust you, not validate; a malformed API response passes the cast and crashes at runtime; use a type guard or Zod parse at the boundary instead.
  • moduleResolution: "bundler" breaks import type in non-bundler contexts — tsconfig moduleResolution: bundler (Vite/esbuild default) allows extensionless imports that Node.js --esm rejects at runtime; flip to nodenext for backend code or keep dual configs per target.
  • noUncheckedIndexedAccess: true makes every array index T | undefined — enabling this flag (required by strict config) means arr[0] is string | undefined not string; code that was type-correct before will error until every indexed access is null-guarded.
  • Declaration merging in ambient .d.ts files silently adds properties to global types — a declare module 'express' block in any .d.ts in the project augments Express's types globally; two libraries doing this with conflicting shapes cause TS2300 duplicate identifier errors that appear far from the source.
  • Template literal types create unique brands that break assignability — type UserId = \user_${string}`is not assignable fromstring; passing a plain stringwhereUserId` is expected fails even though values look identical at runtime; always brand at the input boundary with a parse function.
  • enum generates runtime JS objects, causing tree-shaking failures — enums are not erased; a const enum inside a library published as .js is inlined at compile time but not consumable by projects that don't re-compile the source; use as const satisfies patterns for exported enums.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Use this skill to generate well-branded interfaces and assets for MeowKit (AI Agent Toolkit for Claude Code), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.

日本語の概要は準備中です。原文の説明を表示しています。

ngocsangyem/MeowKit152026年7月28日 更新

mk-advise

無料

Turn a raw idea into ONE honest recommendation: interview one question at a time until confirmed, then give a verdict with trade-offs and a checklist. Not for options or debate.

日本語の概要は準備中です。原文の説明を表示しています。

ngocsangyem/MeowKit152026年7月28日 更新

Browser automation CLI for agents: navigate, click/fill, screenshot, extract data, test apps, Electron/Slack, cloud browsers. NOT for the user's real Chrome profile/cookies (mk:chrome-profile).

日本語の概要は準備中です。原文の説明を表示しています。

ngocsangyem/MeowKit152026年7月28日 更新

Detects the right agent and complexity tier at Phase 0 orient; runs first in every workflow. NOT for runtime agent routing inside a single skill.

日本語の概要は準備中です。原文の説明を表示しています。

ngocsangyem/MeowKit152026年7月28日 更新

Angular v20+ patterns: components, signals, services, forms, routing, HTTP, testing, SSR. Auto-activates on .ts files in Angular projects (angular.json detected).

日本語の概要は準備中です。原文の説明を表示しています。

ngocsangyem/MeowKit152026年7月28日 更新

Design and review durable REST, GraphQL, RPC, or event API contracts: shape, compatibility, pagination, error semantics. Discovers existing consumers first. Not implementation, schema, or release.

日本語の概要は準備中です。原文の説明を表示しています。

ngocsangyem/MeowKit152026年7月28日 更新

ngocsangyem のスキルをすべて見る

このスキルの問題を報告する