mcpField
E
elements-new-package

elements-new-package

github.com/editframeDevelopment1976 installsUpdated 2w ago
Repository

About elements-new-package

A skill for scaffolding new `@editframe/*` workspace packages in the Elements repository. It automates the package files and TypeScript path alias registration, with guidance for publishing and dependency maintenance.

Key features

  1. 01Scaffold workspace package files
  2. 02Register TypeScript path aliases
  3. 03Configure package exports and build
  4. 04Document npm publishing steps

Use cases

  1. 01Start a new Elements package
  2. 02Register a package for imports
  3. 03Prepare a package for npm publishing

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/editframe/skills --skill elements-new-package

After installing, type/elements-new-packagein Claude Code to confirm it loaded.

Details

From the project README

Creating a New Elements Package

Use scripts/new-package to scaffold a new @editframe/* workspace package. It creates all required files and registers the package in tsconfig.json — the single source of truth for path aliases.

Quick Start

# From the elements/ directory (or via the runner)
./scripts/new-package <name>
# e.g. ./scripts/new-package captions

# Then install to symlink the workspace package
./scripts/npm install

What the Script Does

Creates packages/<name>/ with:

  • src/index.ts — empty export stub
  • package.json — correct version, ESM exports, publishConfig.access: "public"
  • tsconfig.json — extends root config
  • tsdown.config.ts — minimal build config

Inserts a path entry into elements/tsconfig.json:

"@editframe/<name>": ["./packages/<name>/src/index.ts"]

Both vitest configs (vitest.config.ts, vitest.config.browser.ts) derive their aliases from tsconfig.json automatically via vitest.aliases.ts — no manual updates needed there.

Publishing a New Package to npm

CI publishes via OIDC trusted publishing (no stored token). OIDC requires the package to exist on npm before trusted publishing can be configured, so the first publish is manual:

# One-time, run locally while logged in to npm
npm publish --access public --workspace @editframe/<name>

After that first publish:

  1. Go to npmjs.com → @editframe/<name> → Settings → Trusted Publisher
  2. Add GitHub Actions: repo editframe/elements, workflow release.yaml, environment npm-publish

All subsequent releases publish automatically via CI.

Path Alias Registration

tsconfig.json is the only file that needs a new entry. The script adds it automatically. Sub-path exports (e.g. @editframe/foo/node) must be added manually to tsconfig.json if needed — the base alias handles sub-path imports naturally via Vite prefix replacement, so explicit entries are only needed for files that don't follow the src/<name>.ts pattern.

Adding Dependencies on Other Workspace Packages

Add the sibling package to dependencies in the new package's package.json using the current workspace version (check the root package.json). Run ./scripts/npm install to re-symlink. Run ./scripts/node scripts/deps.js update-dependencies after a version bump to keep all cross-package pins in sync.

Comments

Markdown supported