pf-new-package_skill

Overview

This skill guides creating a new shared TypeScript package inside the PF DEV monorepo. It provides a reproducible folder layout, recommended config files, build and lint scripts, and steps to publish and consume the package internally. Use it to add consistent, maintainable packages that integrate with the repo toolchain.

How this skill works

The skill walks through creating a package folder under packages/, scaffolding src files and index exports, and adding package.json, tsconfig.json, vite.config.ts, and ESLint configuration. It explains workspace dependency patterns, build and dev scripts, and how to link and test the package from other apps using pnpm workspaces. It also includes a checklist to validate setup and build.

When to use it

• Adding a new shared UI, service, or utility package to the monorepo
• Scaffolding a TypeScript library with proper build and type output
• Creating a package that will be consumed by other apps in the repo
• Standardizing package configs and workspace dependency usage
• Onboarding contributors to package-creation conventions

Best practices

• Follow the recommended folder structure: src with components, hooks, stores, utils, and types
• Export only public API via src/index.ts to keep internal implementation private
• Configure tsconfig to emit declarations and set outDir to dist
• Use vite build for library output and mark react/react-dom as external
• Declare peerDependencies for shared libs and devDependencies from workspace packages
• Run pnpm install and a build test after creating the package to verify workspace resolution

Example use cases

• Create @pf-dev/ui-button as a reusable UI component package
• Add @pf-dev/api-client to centralize API calls consumed by multiple apps
• Implement @pf-dev/map-helpers for CesiumJS utilities used across mapping apps
• Build @pf-dev/auth-store as a Zustand store package shared by client apps
• Prototype a small utility package and verify import in an app using workspace:* dependency