New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Feature Sync

by NG-ZORRO in NG-ZORRO/ng-zorro-antd

Sync an Ant Design React component or feature into NG-ZORRO.

MITAuto-check passedFrontend & Design

Install Feature Sync

skills CLI
$ npx skills add NG-ZORRO/ng-zorro-antd --skill feature-sync -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install NG-ZORRO/ng-zorro-antd feature-sync --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/NG-ZORRO/ng-zorro-antd.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/feature-sync .claude/skills/feature-sync && rm -rf skills-src

Use ~/.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/

Facts

Skill name
feature-sync
GitHub stars
9.2k
Token cost
~840 tokens
SKILL.md length
427 words
Files
1
Skills in repo
7
Repo updated
First seen
Licence
MIT

At a glance

Sync an Ant Design React component or feature into NG-ZORRO.

  • Works in 4 steps: Start with focused tests for defaults,… → Run the repository checks, builds, and… → Inspect generated output when the work… → …
  • Porting upstream APIs
  • SKILL.md covers Establish the Upstream Contract, Map to Angular, Integrate and Verify, plus 1 more section
  • Calls git

What it does

Feature Sync is an agent skill from NG-ZORRO/ng-zorro-antd. Sync an Ant Design React component or feature into NG-ZORRO. Use when checking or porting upstream APIs, behavior, styles, demos, documentation, or tests.

Its SKILL.md is about 840 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering React components. It works with Ant Design, Angular and React. The repository describes itself as: Angular UI Component Library based on Ant Design. The licence is MIT.

When your agent uses it

  • Porting upstream APIs
  • Tasks that involve React components

Example prompts

  • “/feature-sync”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. Start with focused tests for defaults, critical states, and boundary inputs.
  2. Run the repository checks, builds, and documentation generation appropriate to the changed surface.
  3. Inspect generated output when the work affects presentation, interaction, or documentation.
  4. Use git diff --check to catch whitespace and patch errors.

What it can do on your machine

Read from SKILL.md and the folder at commit 54c7573. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • git

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use git, which can reach the network depending on how they are called.

    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

Feature Sync loads about 840 tokens when it runs. Until then it costs about 42 tokens; SKILL.md has 427 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~42
When it runs · the whole SKILL.md, loaded when a task matches
~840

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 NG-ZORRO/ng-zorro-antd at commit 54c7573, republished under its MIT licence (© NG-ZORRO). 427 words, ~840 tokens.

Download SKILL.mdSave it as .claude/skills/feature-sync/SKILL.md (or your agent's skills folder).
name
feature-sync
description
Sync an Ant Design React component or feature into NG-ZORRO. Use when checking or porting upstream APIs, behavior, styles, demos, documentation, or tests.

Ant Design React Sync

Turn upstream functionality into an Angular implementation that fits NG-ZORRO's public API and maintenance model. Follow the repository's AGENTS.md first; it is the source of truth for the current Angular coding standards and global quality requirements.

Establish the Upstream Contract

Inspect official upstream source and documentation before changing code. Read demos, tests, and changelog entries when they clarify the requested scope.

Establish:

  • the public API, defaults, input boundaries, and deprecations;
  • user-observable behavior, including interaction states, keyboard behavior, semantics, and animation;
  • styling, theme tokens, and composition model; and
  • the upstream version that introduced the target capability.

Use source and documentation as the contract. Changelog entries provide version and historical context, not a substitute for either. Distinguish an upstream capability that has not yet been ported from behavior that currently diverges from upstream.

Map to Angular

Do not translate React source line by line. Preserve the public semantics while choosing the smallest, clearest Angular boundary.

Decide deliberately:

  • how React props, callbacks, children, refs, and context map to Angular public APIs and composition;
  • whether the capability belongs in a component, directive, service, or existing extension point;
  • whether it needs browser-only DOM access, layout measurement, or side effects, and how it remains compatible with SSR and render timing; and
  • whether Angular CDK or an existing NG-ZORRO public utility already solves the problem.

Translate upstream CSS-in-JS styling into the repository's Less theme variables and mixins. Keep theme defaults in Less; use ordinary inline styles only for public inputs whose values are genuinely runtime-dependent. Introduce CSS custom properties only when an existing integration specifically requires runtime inheritance or consumer customization.

When framework differences prevent a one-to-one mapping, choose an Angular API consistent with established repository patterns and document intentional differences.

Show full SKILL.md (139 more words)Show less

Integrate

Study comparable components before deciding the necessary integration points. Update public exports, styles, demos, documentation, tests, and site-generation inputs only when the feature requires them.

Treat generated artifacts according to the repository's tracking policy. Change the source of a generation pipeline instead of editing its output directly.

Verify

Verify the upstream contract that was ported, not only implementation details.

  1. Start with focused tests for defaults, critical states, and boundary inputs.
  2. Run the repository checks, builds, and documentation generation appropriate to the changed surface.
  3. Inspect generated output when the work affects presentation, interaction, or documentation.
  4. Use git diff --check to catch whitespace and patch errors.

Deliver

State the upstream scope that was synchronized, intentional framework differences, and the validation performed. Stage, commit, push, or create a pull request only when the user explicitly requests it.

© NG-ZORRO, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/feature-sync of NG-ZORRO/ng-zorro-antd.

Open the folder on GitHubat commit 54c7573

Compare with similar skills

Feature Sync 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.

Feature Sync compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Feature Sync this skillNG-ZORRO/ng-zorro-antd9.2k—~840Automated safety check: PassMIT
South Admin CRUD Generatorsouthliu/south-admin-react580—~1.7kAutomated safety check: PassMIT
LobeHub React Component Guidelobehub/lobehub83k—~1.7kAutomated safety check: PassCustom licence
Frontendstreamband/hydra-srt147—~582Automated safety check: PassApache-2.0
Yida Canvas Table Formopenyida/openyida220—~1.3kAutomated safety check: PassMIT
Yida Rechartopenyida/openyida220—~970Automated safety check: PassMIT

Similar skills

  • South Admin CRUD Generator

    southliu/south-admin-react

    Generates a full CRUD page - page component, data model and API client - from the south-admin-react project's own VS Code snippet templates.

    580 GitHub stars~1.7k tokensUpdated 19 days ago
    Frontend & DesignAuto-check passed

  • LobeHub React Component Guide

    lobehub/lobehub

    Sets out how to write React components in LobeHub: which styling approach to use, which component libraries to prefer and in what order.

    83k GitHub stars~1.7k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Frontend

    streamband/hydra-srt

    A skill your agent uses for frontend work in webapp (React/TypeScript, UI implementation, tests, and refactors).

    147 GitHub stars~582 tokensUpdated 23 days ago
    Frontend & DesignAuto-check passed

  • Yida Canvas Table Form

    openyida/openyida

    自定义页面表格批量录入技能。使用 YidaCodeCanvas 组件和 antd Table、Input、Select、DatePicker、React hooks 实现草稿、行级校验、分批并发提交和行级错误保留。YidaCodeCanvas 组件内不能直接调用 this.utils.yida.；写入默认消费发布层注入的 window.OPENYIDAYIDAAPI，提示、跳转等根级工具消费…

    220 GitHub stars~1.3k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Yida Rechart

    openyida/openyida

    自定义页面 Recharts 高级图表技能。使用 YidaCodeCanvas 组件和 Recharts 实现可视化、看板图表、趋势图、组合图等现代 React 图表页面；聚合数据必须来自宜搭原生报表或已聚合接口，不在前端拉全量明细自行聚合。明确要求 ECharts、维护旧 ECharts 页面或 Recharts 无法覆盖的复杂 option 时改用 yida-chart。

    220 GitHub stars~970 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Faasjs React Ant Design

    faasjs/faasjs

    A skill your agent uses when building or reviewing FaasJS React UI, especially @faasjs/ant-design pages, useFaas, useFaasStream, faas requests, CRUD screens, Table faasData, Description faasData…

    121 GitHub stars~693 tokensUpdated 1 mo ago
    Backend & APIsAuto-check passed

More from NG-ZORRO/ng-zorro-antd

  • Version Release

    NG-ZORRO/ng-zorro-antd

    NG-ZORRO/ng-zorro-antd repository release workflow. An agent skill from NG-ZORRO/ng-zorro-antd.

    9.2k GitHub stars~3.1k tokensUpdated yesterday
    Auto-check passed

  • Changelog Collect

    NG-ZORRO/ng-zorro-antd

    Collect and draft NG-ZORRO changelog entries between releases or branches.

    9.2k GitHub stars~443 tokensUpdated yesterday
    Auto-check passed

  • Create PR

    NG-ZORRO/ng-zorro-antd

    Prepare or create an NG-ZORRO pull request using the repository template.

    9.2k GitHub stars~600 tokensUpdated yesterday
    Auto-check passed

  • Issue Reply

    NG-ZORRO/ng-zorro-antd

    Triage and draft replies for NG-ZORRO GitHub issues. An agent skill from NG-ZORRO/ng-zorro-antd.

    9.2k GitHub stars~485 tokensUpdated yesterday
    Auto-check passed

  • Commit Msg

    NG-ZORRO/ng-zorro-antd

    Generate a conventional commit message for staged NG-ZORRO changes.

    9.2k GitHub stars~367 tokensUpdated yesterday
    Auto-check passed

  • Test Review

    NG-ZORRO/ng-zorro-antd

    Review the value of NG-ZORRO tests. An agent skill from NG-ZORRO/ng-zorro-antd.

    9.2k GitHub stars~425 tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Feature Sync

What does Feature Sync do?

Sync an Ant Design React component or feature into NG-ZORRO. Feature Sync is an agent skill from NG-ZORRO/ng-zorro-antd. Sync an Ant Design React component or feature into NG-ZORRO.

When should I use Feature Sync?

Feature Sync fits situations like: porting upstream APIs; tasks that involve React components.

How do I install Feature Sync in Claude Code?

Run `npx skills add NG-ZORRO/ng-zorro-antd --skill feature-sync -a claude-code`. Or copy the skill folder (.agents/skills/feature-sync in NG-ZORRO/ng-zorro-antd) into .claude/skills/feature-sync in your project. Claude Code loads it when a task matches its description.

How do I install Feature Sync in Codex?

Run `npx skills add NG-ZORRO/ng-zorro-antd --skill feature-sync -a codex`. Or copy the skill folder (.agents/skills/feature-sync in NG-ZORRO/ng-zorro-antd) into .agents/skills/feature-sync in your project. Codex loads it when a task matches its description.

Can I use Feature Sync 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 NG-ZORRO/ng-zorro-antd --skill feature-sync -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/feature-sync, .gemini/skills/feature-sync, .github/skills/feature-sync and .opencode/skills/feature-sync in your project.

What does Feature Sync need to run?

Going by SKILL.md and its folder, Feature Sync needs the command-line tools its instructions call (git).

Does Feature Sync access the network?

SKILL.md contains no URLs. Its commands use git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Feature Sync 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 Feature Sync use?

Feature Sync 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 Feature Sync use?

About 840 tokens (SKILL.md is roughly 3.4k 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 Feature Sync?

Skills that share tags, products or a category with Feature Sync: South Admin CRUD Generator (southliu/south-admin-react, 580 stars), LobeHub React Component Guide (lobehub/lobehub, 83k stars), Frontend (streamband/hydra-srt, 147 stars) and Yida Canvas Table Form (openyida/openyida, 220 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Feature Sync?

NG-ZORRO (a GitHub organization) maintains it in NG-ZORRO/ng-zorro-antd, which has 9,179 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on October 8, 2026.

Source: NG-ZORRO/ng-zorro-antd on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.