New to Claude Skills? Learn how to install them →

cline on GitHub

Publish UI

Free

Streamline the release of @cline/ui npm packages.

by cline66k stars on cline/cline
1 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What Publish UI does

Publish UI is a specialized skill designed for developers working with the @cline/ui npm package. It facilitates the preparation, validation, and publication of standalone releases, ensuring that the package is correctly versioned and adheres to the necessary quality checks before it reaches the npm registry. By leveraging this skill, developers can manage the release process independently from the broader Cline SDK runtime packages, allowing for more focused updates and enhancements to the UI components.

The skill operates through a defined workflow that includes a series of validation steps, such as checking the current version, inspecting the state of the npm package, and running quality checks. This structured approach reduces the risk of errors during the release process and ensures that each version published is stable and ready for use. The workflow is initiated manually, requiring explicit confirmation to proceed, which adds an extra layer of control over the release process.

In addition to standard releases, Publish UI supports the management of preview versions through a separate channel. This allows developers to test new features or changes before they are made widely available. The skill also includes a one-time bootstrap process for configuring the npm trusted-publishing environment, ensuring that the package can be published securely and efficiently.

Overall, Publish UI is ideal for teams and developers who need a reliable way to manage the lifecycle of the @cline/ui package, ensuring that releases are handled with precision and care. It is particularly useful for those who want to maintain a clear separation between UI updates and the main SDK development cycle, thereby enhancing workflow efficiency.

When to use it

Use Publish UI when you need to release updates to the @cline/ui package, especially when managing versioning and quality checks.

When not to use it

This skill is not suitable for automated release processes or for teams that do not require strict version control and validation checks.

What you can build with it

Normal Release Process

Use the skill to manage the standard release of the @cline/ui package, ensuring all quality checks are met before publication.

Publishing Preview Versions

Utilize the skill to publish preview versions of the UI package, allowing for testing and feedback before the official release.

One-Time Bootstrap Configuration

Employ the skill to set up the npm trusted-publishing environment when initially publishing the package.

How to install Publish UI

View source

1. Install with the skills CLI

npx skills add cline/cline/publish-ui --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by cline

Publish UI

Release @cline/ui independently from the Cline SDK runtime packages.

Release contract

  • Version source: sdk/packages/ui/package.json.
  • Workflow: .github/workflows/ui-publish.yml.
  • The package keeps internal: true only to stay out of the SDK's shared version/publish scripts. It is still a public npm package because private: false and publishConfig.access: public control npm publication.
  • latest is the production channel. next is an opt-in preview channel.
  • Use prerelease versions such as 0.2.0-next.0 for next; do not publish a version intended for latest under the preview tag because npm versions cannot be republished.
  • There is no UI Git tag, GitHub release, schedule, or Slack announcement.
  • The workflow runs only by manual dispatch. Every release attempt runs the UI quality checks before publishing and requires confirm_publish=publish from main.
  • The publish job and npm trust relationship use the protected Publish environment.
  • Every npm publication needs a new semver version; npm versions are immutable.
  • Always ask before pushing commits, triggering the publish workflow, changing npm trust settings, or running a local publish command.

Normal release

  1. Inspect the branch, current version, npm state, and UI changes.
git status --short --branch
node -p "require('./sdk/packages/ui/package.json').version"
npm view @cline/ui dist-tags versions --json
git log --oneline --no-merges -- \
  sdk/packages/ui apps/examples/desktop-app/webview/components/views/chat \
  .github/workflows/ui-publish.yml
  1. Ask for the npm channel and version together. For latest, ask for patch, minor, major, or an explicit version. For next, require an explicit prerelease version such as 0.2.0-next.0. Do not guess. Update only sdk/packages/ui/package.json and its workspace version in bun.lock. Do not run the SDK version command.

  2. Validate the release candidate.

bun install --filter @cline/ui --filter @cline/code --frozen-lockfile
bun -F @cline/ui typecheck
bun -F @cline/ui test
bun -F @cline/ui test:package
bun -F @cline/ui build-storybook
bun -F @cline/code test:chat-ui

The packed-package test installs the tarball with Bun/React 19 and with npm/Node/React 18. Inspect bun pm pack --dry-run when the exported file set changed.

  1. Commit the version bump separately from feature work. Ask before pushing.
git add sdk/packages/ui/package.json bun.lock
git commit -m "chore(ui): release vX.Y.Z"
git push origin HEAD
  1. After the release commit reaches main, restate the selected npm tag and ask for explicit publish approval. Then trigger and watch the standalone workflow:
run_url=$(gh workflow run ui-publish.yml --ref main \
  -f npm_tag=latest \
  -f confirm_publish=publish)
test -n "$run_url"
run_id=${run_url##*/}
gh run watch "$run_id" --exit-status

Use npm_tag=next only for a deliberate preview. Do not report success until the workflow succeeds and npm shows the exact version under the selected tag.

npm view @cline/ui dist-tags versions --json

One-time npm bootstrap

Use this only while npm view @cline/ui returns E404. npm requires the package to exist before its GitHub trusted publisher can be configured.

  1. Merge the package and ui-publish.yml to main. Start from a clean, reviewed main checkout. Verify authentication, account 2FA, and write access to the @cline npm organization. The npm trust command in step 4 requires npm CLI 11.15 or newer; the automated trusted-publishing workflow itself enforces npm 11.5.1 or newer.
npm --version
npm whoami
npm view @cline/ui version

If npm is older than 11.15, ask before upgrading with npm install -g npm@^11.15.0.

  1. Run the normal release validation in step 3 above. Then build, pack, test, and inspect the exact initial tarball. Record the absolute archive path printed by the final command.
bun -F @cline/ui build
pack_dir=$(mktemp -d)
(cd sdk/packages/ui && bun pm pack --ignore-scripts --destination "$pack_dir" --quiet)
tarball=$(find "$pack_dir" -maxdepth 1 -name '*.tgz' -print -quit)
test -n "$tarball"
bun sdk/packages/ui/scripts/smoke-package.ts "$tarball"
tar -tzf "$tarball"
printf 'Bootstrap archive: %s\n' "$tarball"
  1. Ask for explicit approval, then publish the initial version publicly under latest:
npm publish /absolute/path/from-step-2.tgz --access public --tag latest
  1. Ask separately before configuring the standalone workflow as the trusted publisher:
npm trust github @cline/ui \
  --repo cline/cline \
  --file ui-publish.yml \
  --env Publish \
  --allow-publish
  1. Verify both package state and trust. Every later release uses the workflow; do not add a long-lived npm token.
npm view @cline/ui dist-tags versions --json
npm trust list @cline/ui

Final report

Report the version and npm tag, release commit, whether anything was pushed, workflow URL or bootstrap result, npm verification, and tests/builds run. If the package still returns E404, state that bootstrap remains required.

Frequently asked questions about Publish UI

Similar skills