# qiankun Micro-Frontends

Builds qiankun 3.x host and micro apps and converts Vite apps into micro apps.

- Repository: https://github.com/umijs/qiankun (16701 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-31
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add umijs/qiankun --skill qiankun -g -a claude-code -y`
Codex: `npx skills add umijs/qiankun --skill qiankun -g -a codex -y`
Cursor: `npx skills add umijs/qiankun --skill qiankun -g -a cursor -y`
Gemini CLI: `npx skills add umijs/qiankun --skill qiankun -g -a gemini-cli -y`

## Description

Usage manual for building micro-frontend projects with qiankun 3.x. Use when the user wants to create a qiankun main (host) app or sub (micro) app, convert an existing Vite app into a qiankun micro app, or wire up micro-frontend loading with React/Vue.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# qiankun

qiankun is a micro-frontend framework: a main (host) app loads sub (micro) apps from their HTML entries at runtime, each inside a JS sandbox, with opt-in CSS isolation. This skill is the agent-facing manual for **qiankun 3.x**.

## Task routing

Read only the reference file(s) the task at hand needs:

| Task | Read |
| --- | --- |
| Create a micro (sub) app, or convert an existing Vite app | [references/create-micro-app.md](references/create-micro-app.md) |
| Create a main (host) app | [references/create-main-app.md](references/create-main-app.md) |
| Anything else, migration, style isolation, sandbox, debugging | https://qiankun.umijs.org and `examples/` in https://github.com/umijs/qiankun |

## Before you start

Determine these, asking the user only when not inferable from context:

1. **App type**, main (host/shell) or sub (micro app).
2. **App name**, lowercase letters, numbers, hyphens. The name the host registers must exactly match the name the sub app uses in its classic-mode fallback.
3. **Framework**, React or Vue; TypeScript or JavaScript. Templates in the references are TS; strip types for JS.
4. **Dev port**, must be fixed and unique per app, because the host hard-references it in `entry`. Convention: main app `7099`, sub apps `7101`, `7102`, …

Package versions, until qiankun 3.0 stable ships, `rc` is the dist-tag for the core packages:

| Package                               | Dist-tag | Goes in                                       |
| ------------------------------------- | -------- | --------------------------------------------- |
| `qiankun`                             | `rc`     | main app `dependencies`                       |
| `@qiankunjs/react` / `@qiankunjs/vue` | `rc`     | main app `dependencies` (optional UI binding) |
| `@qiankunjs/bundler-plugin`           | `rc`     | sub app `devDependencies`                     |

## Key facts

These invariants shape every task below:

The rest: https://github.com/umijs/qiankun/blob/HEAD/skills/qiankun/SKILL.md