
Publish UI
FreeStreamline the release of @cline/ui npm packages.
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 source1. Install with the skills CLI
npx skills add cline/cline/publish-ui --agent claude-code2. 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 clinePublish 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: trueonly to stay out of the SDK's shared version/publish scripts. It is still a public npm package becauseprivate: falseandpublishConfig.access: publiccontrol npm publication. latestis the production channel.nextis an opt-in preview channel.- Use prerelease versions such as
0.2.0-next.0fornext; do not publish a version intended forlatestunder 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=publishfrommain. - The publish job and npm trust relationship use the protected
Publishenvironment. - 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
- 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
-
Ask for the npm channel and version together. For
latest, ask for patch, minor, major, or an explicit version. Fornext, require an explicit prerelease version such as0.2.0-next.0. Do not guess. Update onlysdk/packages/ui/package.jsonand its workspace version inbun.lock. Do not run the SDK version command. -
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.
- 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
- 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.
- Merge the package and
ui-publish.ymltomain. Start from a clean, reviewedmaincheckout. Verify authentication, account 2FA, and write access to the@clinenpm organization. Thenpm trustcommand 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.
- 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"
- Ask for explicit approval, then publish the initial version publicly under
latest:
npm publish /absolute/path/from-step-2.tgz --access public --tag latest
- 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
- 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
Release Candidate Preparation
Streamline your OpenAI Agents release process.
Gitmoji
Generate expressive commit messages with emojis.
GitHub Release
Automate your GitHub library release process effortlessly.
Commit Message Storyteller
Generate meaningful commit messages from your git diffs.
Author Contributions
Trace author contributions across branches in Git.
Implementation Kickoff
Streamline your code implementation process with ease.
