Communitygithub.com

onmax/ts-library

TypeScript 라이브러리 또는 npm 패키지를 작성할 때 사용합니다. 프로젝트 설정, package.json exports, 빌드 도구(tsdown/unbuild), API 디자인 패턴, 타입 추론 트릭, 테스트, npm 배포를 다룹니다. 번들링, CJS/ESM 이중 출력 구성, 릴리즈 워크플로 설정 시 사용하세요.

ts-library란 무엇인가요?

이 스킬은 TypeScript 라이브러리 또는 npm 패키지 제작을 위한 종합 가이드입니다. 프로젝트 초기 설정부터 package.json exports 구성, 빌드 도구(tsdown, unbuild) 선택, API 디자인 패턴, 고급 타입 추론 기법, 테스트 전략, npm 배포 파이프라인까지 전체 워크플로를 다룹니다. 특히 CJS(CommonJS)와 ESM(ES Module) 이중 출력을 지원하는 현대적인 라이브러리 번들링에 중점을 두며, 릴리즈 자동화를 위한 워크플로 설정 방법을 제공합니다. TypeScript 라이브러리 개발자라면 누구나 이 스킬을 통해 생산성을 높이고 일관된 패키징 구조를 유지할 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/onmax/nuxt-skills/tree/main/skills/ts-library

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

ts-library은(는) 무엇을 하나요?

TypeScript 라이브러리 또는 npm 패키지를 작성할 때 사용합니다. 프로젝트 설정, package.json exports, 빌드 도구(tsdown/unbuild), API 디자인 패턴, 타입 추론 트릭, 테스트, npm 배포를 다룹니다. 번들링, CJS/ESM 이중 출력 구성, 릴리즈 워크플로 설정 시 사용하세요.

주요 기능

  • 프로젝트 초기 설정: tsconfig.json, package.json 기본 템플릿 생성
  • 빌드 도구 통합: tsdown, unbuild 설정 및 최적화
  • 이중 출력: CJS(CommonJS)와 ESM(ES Module) 동시 지원
  • API 설계: 타입 안전성을 높이는 패턴과 트릭
  • 테스트: Jest, Vitest 등 테스트 프레임워크 설정
  • 배포: npm publish 자동화 및 버전 관리

사용 방법

이 스킬은 Claude Code, Cursor, Codex 등 AI 어시스턴트에서 프롬프트로 사용할 수 있습니다. TypeScript 라이브러리 개발 중 특정 작업을 수행할 때 적절한 프롬프트를 선택하여 실행하세요.

예시 프롬프트

  • "새 TypeScript 라이브러리 프로젝트를 설정해줘"
  • "package.json exports 필드를 CJS/ESM 모두 지원하도록 구성해줘"
  • "tsdown으로 번들링 설정을 추가해줘"
  • "라이브러리 API 설계 패턴에 대해 알려줘"
  • "npm 배포 자동화 워크플로를 설정해줘"

지원 환경

  • Node.js 18+
  • npm 9+
  • TypeScript 5+
  • tsdown, unbuild (빌드 도구)
  • Vitest, Jest (테스트)

관련 리소스

Individual skills in this repo

This repo contains 15 individual skills — each has its own dedicated page.

onmax/document-writer

Use when writing blog posts or documentation markdown files - provides writing style guide (active voice, present tense), content structure patterns, and MDC component usage. Overrides brevity rules for proper grammar. Use nuxt-content for MDC syntax, nuxt-ui for component props.

onmax/motion

Use when adding animations with Motion Vue (motion-v) - provides motion component API, gesture animations, scroll-linked effects, layout transitions, and composables for Vue 3/Nuxt

onmax/nuxt

Use when working on Nuxt 4+ projects - provides server routes, file-based routing, middleware patterns, Nuxt-specific composables, and configuration with latest docs. Covers h3 v1 helpers (validation, WebSocket, SSE) and nitropack v2 patterns. Updated for Nuxt 4.3+.

onmax/nuxt-better-auth

Use when implementing auth in Nuxt apps with @onmax/nuxt-better-auth - provides useUserSession composable, server auth helpers, route protection, and Better Auth plugins integration.

onmax/nuxt-content

Use when working with Nuxt Content v3, markdown content, or CMS features in Nuxt - provides collections (local/remote/API sources), queryCollection API, MDC rendering, database configuration, NuxtStudio integration, hooks, i18n patterns, and LLMs integration

onmax/nuxthub

Use when building NuxtHub v0.10.6 applications - provides database (Drizzle ORM with sqlite/postgresql/mysql), KV storage, blob storage, and cache APIs. Covers configuration, schema definition, migrations, multi-cloud deployment (Cloudflare, Vercel), and the new hub:db, hub:kv, hub:blob virtual module imports.

onmax/nuxt-modules

Use when creating Nuxt modules: (1) Published npm modules (@nuxtjs/, nuxt-), (2) Local project modules (modules/ directory), (3) Runtime extensions (components, composables, plugins), (4) Server extensions (API routes, middleware), (5) Releasing/publishing modules to npm, (6) Setting up CI/CD workflows for modules. Provides defineNuxtModule patterns, Kit utilities, hooks, E2E testing, and release automation.

onmax/nuxt-seo

Nuxt SEO meta-module with robots, sitemap, og-image, schema-org. Use when configuring SEO, generating sitemaps, creating OG images, or adding structured data.

onmax/nuxt-ui

Use when building styled UI with @nuxt/ui v4 components - create forms with validation, implement data tables with sorting, build modal dialogs and overlays, configure Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.

onmax/pnpm

Use when managing Node.js dependencies with pnpm - install packages, configure monorepo workspaces, set up pnpm catalogs, resolve dependency conflicts with overrides, patch third-party packages, and configure CI pipelines for pnpm projects

onmax/reka-ui

Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue.

onmax/vite

Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.

onmax/vitest

Use when writing unit/integration tests for Vite projects - configure vitest.config.ts, write test suites with describe/it, create mock implementations with vi.fn and vi.mock, set up code coverage thresholds, and run tests in parallel

onmax/vue

Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance

onmax/vueuse

Use when working with VueUse composables - track mouse position with useMouse, manage localStorage with useStorage, detect network status with useNetwork, debounce values with refDebounced, and access browser APIs reactively. Check VueUse before writing custom composables - most patterns already implemented.

관련 스킬