MCP Server Builder
anthropics/skills
Guides the design and implementation of Model Context Protocol servers in TypeScript or Python, from tool naming and error messages to evaluation.
Migrates a project whose installed zard/ui component source predates the current registry — components are copied into the project by zard-cli, so nothing upgrades them on its own.
MITAuto-check passed
Install Zard Migration
$ npx skills add zard-ui/zardui --skill zard-migration -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install zard-ui/zardui zard-migration --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/zard-ui/zardui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/zard-migration .claude/skills/zard-migration && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "zard-migration" agent skill from https://github.com/zard-ui/zardui/tree/master/skills/zard-migration into .claude/skills/zard-migration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zard-migration", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/zard-ui/zardui/tree/master/skills/zard-migrationType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add zard-ui/zardui --skill zard-migration -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install zard-ui/zardui zard-migration --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/zard-ui/zardui.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/zard-migration .agents/skills/zard-migration && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "zard-migration" agent skill from https://github.com/zard-ui/zardui/tree/master/skills/zard-migration into .agents/skills/zard-migration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zard-migration", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add zard-ui/zardui --skill zard-migration -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install zard-ui/zardui zard-migration --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/zard-ui/zardui.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/zard-migration .cursor/skills/zard-migration && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "zard-migration" agent skill from https://github.com/zard-ui/zardui/tree/master/skills/zard-migration into .cursor/skills/zard-migration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zard-migration", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/zard-ui/zardui.git --path skills/zard-migration--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add zard-ui/zardui --skill zard-migration -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install zard-ui/zardui zard-migration --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/zard-ui/zardui.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/zard-migration .gemini/skills/zard-migration && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "zard-migration" agent skill from https://github.com/zard-ui/zardui/tree/master/skills/zard-migration into .gemini/skills/zard-migration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zard-migration", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install zard-ui/zardui zard-migrationInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add zard-ui/zardui --skill zard-migration -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/zard-ui/zardui.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/zard-migration .github/skills/zard-migration && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "zard-migration" agent skill from https://github.com/zard-ui/zardui/tree/master/skills/zard-migration into .github/skills/zard-migration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zard-migration", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add zard-ui/zardui --skill zard-migration -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install zard-ui/zardui zard-migration --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/zard-ui/zardui.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/zard-migration .opencode/skills/zard-migration && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "zard-migration" agent skill from https://github.com/zard-ui/zardui/tree/master/skills/zard-migration into .opencode/skills/zard-migration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "zard-migration", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
zard-migration- GitHub stars
- 1.2k
- Token cost
- ~2.2k tokens
- SKILL.md length
- 965 words
- Files
- 3
- Skills in repo
- 2
- Repo updated
- First seen
- Licence
- MIT
At a glance
Migrates a project whose installed zard/ui component source predates the current registry — components are copied into the project by zard-cli, so nothing upgrades them on its own.
- Works in 3 steps: Detect what version this project is on → What changed → Migrate safely — an ordered, resumable…
- SKILL.md covers Why this is invoked explicitly, What you will lose, 1. Detect what version this… and 2. What changed, plus 2 more sections
- Calls npx; reaches zardui.com
What it does
Zard Migration is an agent skill from zard-ui/zardui. Migrates a project whose installed zard/ui component source predates the current registry — components are copied into the project by zard-cli, so nothing upgrades them on its own. Applies when a project's zard/ui source uses a name the current registry no longer publishes (divider, loader, radio, progress-bar, toast, menu, form, tree, layout, segmented), when a component's shape doesn't match its current documentation (card, pagination, input-group), or when asked to "migrate to the latest zard-ui", "upgrade…
Its SKILL.md is about 2.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `recompositions.md` and `renames.md`).
It works with Model Context Protocol. The repository describes itself as: A collection of beautiful and accessible components for Angular based in Shadcn/ui and Ng-zorro. Fully open source and free ❤️. The licence is MIT.
Example prompts
- “s shape doesn”
- “migrate to the latest zard-ui”
- “upgrade this project”
- “/zard-migration”
Requirements
- Node.js
- Pre-approved tools (allowed-tools): Bash(npx zard-cli *), Bash(pnpm dlx zard-cli *), Bash(bunx --bun zard-cli *)
Workflow steps
3 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 7ae3f67. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
Bash(npx zard-cli *)Bash(pnpm dlx zard-cli *)Bash(bunx --bun zard-cli *)
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
zardui.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Zard Migration loads about 2.2k tokens when it runs. Until then it costs about 173 tokens; SKILL.md has 965 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from zard-ui/zardui at commit 7ae3f67, republished under its MIT licence (© zard-ui). 965 words, ~2,219 tokens.
Download SKILL.mdSave it as
.claude/skills/zard-migration/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.- name
- zard-migration
- description
- Migrates a project whose installed zard/ui component source predates the current registry — components are copied into the project by zard-cli, so nothing upgrades them on its own. Applies when a project's zard/ui source uses a name the current registry no longer publishes (`divider`, `loader`, `radio`, `progress-bar`, `toast`, `menu`, `form`, `tree`, `layout`, `segmented`), when a component's shape doesn't match its current documentation (card, pagination, input-group), or when asked to "migrate to the latest zard-ui", "upgrade this project's zard components", or "why doesn't zard-cli add match what's already here". Not for a fresh install — that's the `zard` skill.
- allowed-tools
- Bash(npx zard-cli *), Bash(pnpm dlx zard-cli *), Bash(bunx --bun zard-cli *)
- user-invocable
- true
zard-migration
Migrates a project's installed zard/ui component source to match the current registry.
Why this is invoked explicitly
The zard skill is user-invocable: false — it engages passively, on any zard/ui work. This one is
user-invocable: true: overwriting installed component files is consequential and worth a deliberate
ask ("migrate this project to the latest zard-ui"), not something that should fire silently the moment
an assistant notices an old selector while doing unrelated work.
Read ../zard/SKILL.md first if this project has not been worked on this session —
it covers components.json, the CLI, the registry and the MCP server, all of which this guide assumes.
What you will lose
zard-cli add <name> --overwrite replaces the local files wholesale. Any edit made inside a
component's own files — a tweaked class, an added input, a changed template — is discarded, silently,
file by file. Edits kept in the theme CSS, in a new CVA variant, or in a wrapper component survive,
because those files are not part of the registry item.
Never run --overwrite without the user's explicit approval, and diff before you overwrite: read
the installed file and the registry's current version (get-component over MCP, or the published
https://zardui.com/docs/components/<name>.md) before deciding whether the local copy has changes
worth keeping.
1. Detect what version this project is on
There is no version field in components.json — a project on the current registry and a project two
years behind both look identical at that level. The signal is in the installed files themselves.
Fast check: does anything installed no longer exist in the registry?
List the components directory (aliases.components in components.json) and compare its folder names
against apps/web/public/r/registry.json (or list-components over MCP). A folder whose name is not a
current registry item — divider, loader, radio, progress-bar, toast, menu, form, tree,
layout, segmented — is source from before that name was renamed, split, or removed. See
renames.md for the full table.
Slower check: does an installed component's shape match its current docs?
A folder can share today's name and still be out of date — card, pagination and input-group were
not renamed, they were recomposed: the files are still called card.component.ts, but what they
export changed shape. Compare the installed file against get-component-docs / the component's
published Markdown. See recompositions.md for the concrete before/after of each.
Concrete markers, if a fast grep is more useful than reading file by file
| Found in the project | Means |
|---|---|
@import '<core>/css/tailwind' in the global CSS (instead of .../css/zard) | Predates the core → core + utilities split (927f8232) |
A bare, unscoped ::-webkit-scrollbar { ... } block appended to the global CSS | Predates the opt-in scrollbar-thin utility (6c9e21ce) |
ZardButtonGroupDividerComponent / z-button-group-divider anywhere | Predates the button-group divider → separator rename (93391360) |
A toast directory, or ZardToastComponent / z-toast / z-toaster | Predates the toast → sonner rename (1fd63f15) |
textarea[z-input] on a <textarea> (instead of textarea[z-textarea]) | Predates the textarea split (70bc9b0a) |
No card.imports.ts next to card.component.ts | Predates the card recomposition (73b544f5) |
<z-input-group [zAddonBefore]="…" [zAddonAfter]="…"> (inputs, not z-input-group-addon children) | Predates the input-group recomposition (d2245133) |
zType/zSize on toggle-group without zItems/zValue/zOrientation | Predates the toggle-group prop rename (66df83b3) |
None of these are exhaustive on their own — a project can be a mix, migrated partway by hand at some point. Check every installed component, not just the ones a marker flags.
2. What changed
- renames.md — every breaking rename and removal, old name → new name → what to edit in your own source, each sourced to the commit that made it.
- recompositions.md — card, pagination and input-group, which kept their name but
changed shape, with the real before/after markup from this repository's own history. Also the
core/utils/utilitiessplit and the scrollbar migration.
Show full SKILL.md (382 more words)Show less
3. Migrate safely — an ordered, resumable procedure
Each step is safe to stop after and safe to resume from a fresh session — nothing here depends on
in-memory state, only on the project's files and components.json.
- Audit what is installed. Read
components.jsonforaliases.componentsandaliases.blocks, then list both directories. For each folder, check it againstregistry.json(renames.md if the name itself is gone) and against its current docs (recompositions.md if the name survived but the shape may not have). - Diff before you overwrite. For every component that needs updating, read the installed file and
the current registry source side by side. Note anything in the installed file that is not in the
registry version — that is a local customisation, and
--overwriteis about to discard it. - Re-add from the registry.
npx zard-cli add <name> --overwrite(substitute the project's package runner — see ../zard/SKILL.md). One component at a time is easier to reconcile than--all; batch only once the pattern is familiar. A renamed component is added under its new name (zard-cli add separator, notdivider) — the old folder is not removed automatically, delete it once nothing imports from it. - Reconcile local edits. Reapply whatever step 2 found worth keeping — as a CVA variant, a theme token, or a wrapper component where possible, so the next migration doesn't repeat this one.
- Fix imports and selectors. Update every consumer that imported the old class name or used the old
selector — the compiler will find the imports (
ZardButtonGroupDividerComponentno longer exists), but a renamed selector used only in a template (<hr z-divider>→<z-separator>) fails silently at render, not at compile time. Grep the old selector across the project, not just the component folder. - Fix the global CSS import, if it still says
@import '<core>/css/tailwind'— change it to@import '<core>/css/zard'. See recompositions.md. - Verify the build. Typecheck, then run the app and exercise every migrated component — a renamed CVA variant key or a removed input surfaces as a runtime class that never applies, not a compile error.
Re-running this procedure is safe: step 1 finds nothing left to do once every installed component matches the registry.
Reference
- renames.md — the rename table
- recompositions.md — card, pagination, input-group, the
core/utils/utilitiessplit, and the scrollbar migration - ../zard/SKILL.md —
components.json, the CLI, the registry, the MCP server
© zard-ui, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 2 other files in skills/zard-migration of zard-ui/zardui.
- SKILL.md
- recompositions.md
- renames.md
Open the folder on GitHubat commit 7ae3f67
Compare with similar skills
Zard Migration next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Zard Migration this skillzard-ui/zardui | 1.2k | — | ~2.2k | Automated safety check: Pass | MIT | |
| MCP Server Builderanthropics/skills | 180k | 63 repos | ~2.3k | Automated safety check: Pass | Apache-2.0 | |
| MCP Server BuildershareAI-lab/learn-claude-code | 78k | 5 repos | ~1.2k | Automated safety check: Pass | MIT | |
| MCP Integration for Pluginsanthropics/claude-plugins-official | 38k | 11 repos | ~3.1k | Automated safety check: Pass | Apache-2.0 | |
| Figma use_figma Plugin API Ruleswarpdotdev/warp | 65k | 4 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Stitch to Remotion Walkthrough Videosgoogle-labs-code/stitch-skills | 8.4k | 6 repos | ~3.2k | Automated safety check: Notes | Apache-2.0 |
Similar skills
- Official
MCP Server Builder
shareAI-lab/learn-claude-code
Walks through building MCP servers in Python or TypeScript that expose tools, resources and prompts to Claude, with templates, registration and testing.
- Official
MCP Integration for Plugins
anthropics/claude-plugins-official
Explains how to bundle Model Context Protocol servers in a Claude Code plugin, covering config files, stdio, SSE, HTTP and WebSocket server types, and authentication.
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
- Official
Stitch to Remotion Walkthrough Videos
google-labs-code/stitch-skills
Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.
MCP Development
coollabsio/coolify
A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.
More from zard-ui/zardui
Zard
zard-ui/zardui
Manages zard/ui components and projects — adding, composing, styling, and debugging Angular UI built on TailwindCSS v4.
Related
Works with
Questions about Zard Migration
What does Zard Migration do?
Migrates a project whose installed zard/ui component source predates the current registry — components are copied into the project by zard-cli, so nothing upgrades them on its own. Zard Migration is an agent skill from zard-ui/zardui. Migrates a project whose installed zard/ui component source predates the current registry — components are copied into the project by zard-cli, so nothing upgrades them on its own.
How do I install Zard Migration in Claude Code?
Run `npx skills add zard-ui/zardui --skill zard-migration -a claude-code`. Or copy the skill folder (skills/zard-migration in zard-ui/zardui) into .claude/skills/zard-migration in your project. Claude Code loads it when a task matches its description.
How do I install Zard Migration in Codex?
Run `npx skills add zard-ui/zardui --skill zard-migration -a codex`. Or copy the skill folder (skills/zard-migration in zard-ui/zardui) into .agents/skills/zard-migration in your project. Codex loads it when a task matches its description.
Can I use Zard Migration in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add zard-ui/zardui --skill zard-migration -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/zard-migration, .gemini/skills/zard-migration, .github/skills/zard-migration and .opencode/skills/zard-migration in your project.
What does Zard Migration need to run?
Going by SKILL.md and its folder, Zard Migration needs the command-line tools its instructions call (npx). Our summary lists: Node.js. Its frontmatter pre-approves these tools: Bash(npx zard-cli *), Bash(pnpm dlx zard-cli *), Bash(bunx --bun zard-cli *).
Does Zard Migration access the network?
SKILL.md names 1 domain. In commands or code: zardui.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Is Zard Migration safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Zard Migration use?
Zard Migration is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Zard Migration use?
About 2.2k tokens (SKILL.md is roughly 8.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Zard Migration?
Skills that share tags, products or a category with Zard Migration: MCP Server Builder (anthropics/skills, 180k stars), MCP Server Builder (shareAI-lab/learn-claude-code, 78k stars), MCP Integration for Plugins (anthropics/claude-plugins-official, 38k stars) and Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Zard Migration?
zard-ui (a GitHub organization) maintains it in zard-ui/zardui, which has 1,164 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on October 9, 2026.
Source: zard-ui/zardui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.