Agent skill

Hiui

Install Hiui

skills CLI

$ npx skills add XiaoMi/hiui --skill hiui -a claude-code

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

GitHub CLI

$ gh skill install XiaoMi/hiui hiui --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/XiaoMi/hiui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/hiui .claude/skills/hiui && 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/

Paste into Claude Code

Install the "hiui" agent skill from https://github.com/XiaoMi/hiui/tree/master/skills/hiui into .claude/skills/hiui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hiui", 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

$skill-installer install https://github.com/XiaoMi/hiui/tree/master/skills/hiui

Type 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.

skills CLI

$ npx skills add XiaoMi/hiui --skill hiui -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install XiaoMi/hiui hiui --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/XiaoMi/hiui.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/hiui .agents/skills/hiui && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "hiui" agent skill from https://github.com/XiaoMi/hiui/tree/master/skills/hiui into .agents/skills/hiui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hiui", 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.

skills CLI

$ npx skills add XiaoMi/hiui --skill hiui -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install XiaoMi/hiui hiui --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/XiaoMi/hiui.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/hiui .cursor/skills/hiui && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "hiui" agent skill from https://github.com/XiaoMi/hiui/tree/master/skills/hiui into .cursor/skills/hiui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hiui", 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

$ gemini skills install https://github.com/XiaoMi/hiui.git --path skills/hiui

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add XiaoMi/hiui --skill hiui -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install XiaoMi/hiui hiui --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/XiaoMi/hiui.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/hiui .gemini/skills/hiui && rm -rf skills-src

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

Paste into Gemini CLI

Install the "hiui" agent skill from https://github.com/XiaoMi/hiui/tree/master/skills/hiui into .gemini/skills/hiui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hiui", 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.

GitHub CLI

$ gh skill install XiaoMi/hiui hiui

Installs 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).

skills CLI

$ npx skills add XiaoMi/hiui --skill hiui -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/XiaoMi/hiui.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/hiui .github/skills/hiui && rm -rf skills-src

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

Paste into GitHub Copilot

Install the "hiui" agent skill from https://github.com/XiaoMi/hiui/tree/master/skills/hiui into .github/skills/hiui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hiui", 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.

skills CLI

$ npx skills add XiaoMi/hiui --skill hiui -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install XiaoMi/hiui hiui --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/XiaoMi/hiui.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/hiui .opencode/skills/hiui && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "hiui" agent skill from https://github.com/XiaoMi/hiui/tree/master/skills/hiui into .opencode/skills/hiui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hiui", 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: hiui
GitHub stars: 877
Token cost: ~1.9k tokens
SKILL.md length: 693 words
Files: 1
Skills in repo: 5
Repo updated: Jul 24, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Works in 8 steps: Writing HiUI component code → Looking up full documentation → Exploring available components → …
The users task involves HiUI (@hi-ui/) — writing HiUI components
SKILL.md covers Setup, Scenarios, Global Flags and Key Rules, plus 2 more sections
Calls npm and pnpm; reaches xiaomi.github.io

What it does

Hiui is an agent skill from XiaoMi/hiui. Use when the user's task involves HiUI (@hi-ui/) — writing HiUI components, debugging HiUI issues, querying HiUI props/docs, migrating from HiUI V4 to V5, or setting up React 19 compatibility with @hi-ui/patch-for-react. Triggers on imports from '@hi-ui/', hi-ui/hiui mentions, or explicit HiUI questions.

Its SKILL.md is about 1.9k 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 Design systems. It works with React. The repository describes itself as: HIUI is a solution that is adequate for the fomulation and implementation of interaction and UI design standard for front, middle and backend. The licence is MIT.

When your agent uses it

The users task involves HiUI (@hi-ui/) — writing HiUI components
Debugging HiUI issues
Querying HiUI props/docs
Migrating from HiUI V4 to V5

Example prompts

“@hi-ui/”
“/hiui”

Requirements

Node.js
Pre-approved tools (allowed-tools): Bash(hiui *), Bash(npm install -g @hi-ui/hiui-cli*), Bash(which hiui)

Workflow steps

8 steps, taken from the step headings in SKILL.md.

Writing HiUI component code
Looking up full documentation
Exploring available components
Migrating HiUI V4 → V5
React 19 compatibility
Customizing docs source
Semantic classNames / styles
Alternative: LLMs.txt without CLI

What it can do on your machine

Read from SKILL.md and the folder at commit f056c80. 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(hiui *)
- Bash(npm install -g @hi-ui/hiui-cli*)
- Bash(which hiui)
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- npm
- pnpm
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:
- xiaomi.github.io
Also links to:
- npmjs.com
- github.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

Hiui loads about 1.9k tokens when it runs. Until then it costs about 78 tokens; SKILL.md has 693 words of instructions outside code blocks.

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

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 XiaoMi/hiui at commit f056c80, republished under its MIT licence (© XiaoMi). 693 words, ~1,896 tokens.

Download SKILL.mdSave it as .claude/skills/hiui/SKILL.md (or your agent's skills folder).

name: hiui
description: Use when the user's task involves HiUI (@hi-ui/*) — writing HiUI components, debugging HiUI issues, querying HiUI props/docs, migrating from HiUI V4 to V5, or setting up React 19 compatibility with @hi-ui/patch-for-react. Triggers on imports from '@hi-ui/*', hi-ui/hiui mentions, or explicit HiUI questions.
allowed-tools: Bash(hiui *), Bash(npm install -g @hi-ui/hiui-cli*), Bash(which hiui)

HiUI CLI

You have access to @hi-ui/hiui-cli — a CLI for querying HiUI component documentation and automating common upgrade tasks. Component docs are fetched from official llms endpoints (network required for list / doc / info / url). Migration and React 19 patch setup run locally on the project filesystem.

Setup

Before first use, check if the CLI is installed. If not, install it:

bash

which hiui || npm install -g @hi-ui/hiui-cli
hiui version

The hiui command comes from the globally installed @hi-ui/hiui-cli package.

Always use --format json for structured output you can parse programmatically.

Scenarios

1. Writing HiUI component code

Before writing any HiUI component code, look up its API first — don't rely on memory.

bash

# Check available props
hiui info Button --format json

# Full docs with usage examples (TSX demos in markdown)
hiui doc Button --format json

# Get the canonical llms URL for citations
hiui url Button --format json

Workflow: hiui info → understand props → hiui doc → read examples → write code.

HiUI packages use kebab-case names (@hi-ui/date-picker). Component CLI args accept Button, datePicker, or date-picker (auto-normalized to kebab-case).

Import patterns:

tsx

// Full bundle
import { Button, Input } from '@hi-ui/hiui'

// Per-component (recommended for existing apps)
import Button from '@hi-ui/button'
import Input from '@hi-ui/input'
import { InfoCircleFilled } from '@hi-ui/icons'

2. Looking up full documentation

When you need comprehensive component docs (not just props):

bash

hiui doc Table --format json

Markdown includes description, usage examples, and props tables. Source: https://xiaomi.github.io/hiui/llms/<component>.md.

3. Exploring available components

When choosing which component to use:

bash

hiui list --format json

Index is derived from llms.txt. For offline context, you can also reference llms-full.txt.

4. Migrating HiUI V4 → V5

When upgrading a project from HiUI 4.x to 5.x:

bash

# Preview changes (no writes)
hiui migrate 4 5 --dry-run --format json

# Apply to current directory
hiui migrate 4 5 --format json

# Monorepo sub-app
hiui migrate 4 5 --path ./apps/web --format json

# Only bump @hi-ui/* in package.json
hiui migrate 4 5 --deps-only

# Only replace .hi-v4 / hi-v4- class prefixes
hiui migrate 4 5 --class-only

What migrate 4 5 does:

Sets @hi-ui/* in all package.json files to ^5.0.0 (excludes tooling like @hi-ui/hi-build)
Replaces .hi-v4 → .hi-v5 and hi-v4- → hi-v5- in project source/styles

What it does NOT do: API breaking changes, import path refactors, or business logic. After migrate, run npm install or yarn, then fix remaining issues manually. See project migration docs.

Workflow: hiui migrate 4 5 --dry-run → review → hiui migrate 4 5 → install deps → hiui doc / hiui info per changed component → fix API usage.

Currently only 4 → 5 is supported; other version pairs return UNSUPPORTED_MIGRATION.

5. React 19 compatibility

When the project uses React 19 and needs ReactDOM.render / legacy static APIs patched for HiUI:

bash

hiui patch-for-react --dry-run --format json
hiui patch-for-react --path . --format json
hiui patch-for-react --entry src/index.tsx --skip-install

What it does:

Adds @hi-ui/patch-for-react to dependencies (^5.0.0 by default, override with --patch-version)
Inserts import '@hi-ui/patch-for-react' at the top of the entry file (after 'use client' if present)
Runs npm / yarn / pnpm install unless --skip-install

Entry auto-detection: src/index.tsx, src/main.tsx, etc., or script src from index.html.

6. Customizing docs source

When using a mirror or internal docs host:

bash

hiui doc alert --base-url https://xiaomi.github.io/hiui --format json
# or
HIUI_DOCS_BASE_URL=https://your-mirror.example hiui list --format json

7. Semantic classNames / styles

Many HiUI 5 components support classNames and styles for per-element styling. Check the Semantic example in component docs:

bash

hiui doc Alert --format json

Look for classNames / styles usage in the markdown examples.

8. Alternative: LLMs.txt without CLI

If the CLI is unavailable, fetch docs directly:

Index: https://xiaomi.github.io/hiui/llms.txt
Full: https://xiaomi.github.io/hiui/llms-full.txt
Per component: https://xiaomi.github.io/hiui/llms/`<component>`.md

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

Global Flags

Flag	Purpose
`--format json`	Structured JSON output (agents should prefer this)
`--base-url <url>`	Docs root (default: `https://xiaomi.github.io/hiui`)
`--timeout <ms>`	HTTP timeout for doc fetch (default: `30000`)
`-V, --version`	Print CLI version (`hiui version` also works)

`migrate` options

Flag	Purpose
`--path <dir>`	Project root (default: `.`)
`--dry-run`	Preview without writing
`--deps-only`	Only update package.json
`--class-only`	Only replace class name prefixes

`patch-for-react` options

Flag	Purpose
`--path <dir>`	Project root
`--entry <file>`	Explicit entry file
`--dry-run`	Preview only
`--skip-install`	Skip package manager install
`--patch-version <range>`	Version for `@hi-ui/patch-for-react` (default: `^5.0.0`)

Key Rules

Always query before writing — Don't guess HiUI APIs from memory. Run hiui info or hiui doc first.
Use --format json — Parse JSON output instead of regex-matching plain text.
Prefer hiui doc for examples — Demos live inside markdown; there is no separate hiui demo command yet.
Migrate with preview — Run hiui migrate 4 5 --dry-run before applying; then install deps and fix API changes manually.
React 19 patch is entry-level — patch-for-react only adds the side-effect import; ensure it runs before other app imports.
Component names are kebab-case in packages — CLI normalizes CheckSelect → check-select for URLs and docs.
Network for docs commands — list, doc, info, url need HTTP access to the llms host; migrate and patch-for-react are offline filesystem operations.

Command Reference

Command	Description
`hiui version`	CLI version
`hiui list`	All components from llms.txt
`hiui info <component>`	Props API
`hiui doc <component>`	Full markdown documentation
`hiui url <component>`	llms.md URL for component
`hiui migrate 4 5`	V4 → V5 dependency + class prefix upgrade
`hiui patch-for-react`	Install and inject React 19 patch

Files

Just SKILL.md in skills/hiui of XiaoMi/hiui.

Open the folder on GitHubat commit f056c80

Compare with similar skills

Hiui 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.

Hiui compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Hiui this skillXiaoMi/hiui	877	—	~1.9k	Automated safety check: Pass	MIT	2 mo ago
Creative Tim UI Blockscreativetimofficial/ui	12k	—	~2.1k	Automated safety check: Notes	MIT	6 mo ago
Cosscrafter-station/petdex	4.2k	—	~1.4k	Automated safety check: Pass	MIT	9 days ago
Ss Learnbitjaru/styleseed	972	—	~1.3k	Automated safety check: Pass	MIT	7 days ago
UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar	5.7k	1 repos	~1.1k	Automated safety check: Pass	MIT	15 days ago
Design StyleCastor6/tactus	376	1 repos	~2.1k	Automated safety check: Pass	Apache-2.0	5 mo ago

Similar skills

Creative Tim UI Blocks
creativetimofficial/ui
Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.
12k GitHub stars~2.1k tokensUpdated 6 mo ago
Frontend & DesignAuto-check: notes
Coss
crafter-station/petdex
Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.
4.2k GitHub stars~1.4k tokensUpdated 9 days ago
Frontend & DesignAuto-check passed
Ss Learn
bitjaru/styleseed
Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or…
972 GitHub stars~1.3k tokensUpdated 7 days ago
Frontend & DesignAuto-check passed
UI/UX Design System Advisor
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
5.7k GitHub starsUsed in 1 repo~1.1k tokens
Frontend & DesignAuto-check passed
Design Style
Castor6/tactus
A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.
376 GitHub starsUsed in 1 repo~2.1k tokens
Frontend & DesignAuto-check passed
Building With Lobe UI
lobehub/lobe-ui
Build UI with the LobeHub design ecosystem — @lobehub/ui (plus its base-ui, chat, mobile, awesome, brand, mdx, i18n namespaces), @lobehub/icons, @lobehub/charts, @lobehub/fluent-emoji and…
2.2k GitHub stars~2k tokensUpdated today
Frontend & DesignAuto-check passed

Questions about Hiui

What does Hiui do?

A skill your agent uses when the user's task involves HiUI (@hi-ui/) — writing HiUI components, debugging HiUI issues, querying HiUI props/docs, migrating from HiUI V4 to V5, or setting up React 19…. Hiui is an agent skill from XiaoMi/hiui. Use when the user's task involves HiUI (@hi-ui/) — writing HiUI components, debugging HiUI issues, querying HiUI props/docs, migrating from HiUI V4 to V5, or setting up React 19 compatibility with @hi-ui/patch-for-react.

When should I use Hiui?

Hiui fits situations like: the users task involves HiUI (@hi-ui/) — writing HiUI components; debugging HiUI issues; querying HiUI props/docs; migrating from HiUI V4 to V5.

How do I install Hiui in Claude Code?

Run `npx skills add XiaoMi/hiui --skill hiui -a claude-code`. Or copy the skill folder (skills/hiui in XiaoMi/hiui) into .claude/skills/hiui in your project. Claude Code loads it when a task matches its description.

How do I install Hiui in Codex?

Run `npx skills add XiaoMi/hiui --skill hiui -a codex`. Or copy the skill folder (skills/hiui in XiaoMi/hiui) into .agents/skills/hiui in your project. Codex loads it when a task matches its description.

Can I use Hiui 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 XiaoMi/hiui --skill hiui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/hiui, .gemini/skills/hiui, .github/skills/hiui and .opencode/skills/hiui in your project.

What does Hiui need to run?

Going by SKILL.md and its folder, Hiui needs the command-line tools its instructions call (npm and pnpm). Our summary lists: Node.js. Its frontmatter pre-approves these tools: Bash(hiui *), Bash(npm install -g @hi-ui/hiui-cli*), Bash(which hiui).

Does Hiui access the network?

SKILL.md names 3 domains. In commands or code: xiaomi.github.io; the agent is likely to contact it when it follows the instructions. As links in the text: npmjs.com and github.com. This is read from the text; nothing was executed.

Is Hiui 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 Hiui use?

Hiui 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 Hiui use?

About 1.9k tokens (SKILL.md is roughly 7.6k 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 Hiui?

Skills that share tags, products or a category with Hiui: Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Coss (crafter-station/petdex, 4.2k stars), Ss Learn (bitjaru/styleseed, 972 stars) and UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Hiui?

XiaoMi (a GitHub organization) maintains it in XiaoMi/hiui, which has 877 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on July 24, 2026.

Source: XiaoMi/hiui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Hiui

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

HiUI CLI

Setup

Scenarios

1. Writing HiUI component code

2. Looking up full documentation

3. Exploring available components

4. Migrating HiUI V4 → V5

5. React 19 compatibility

6. Customizing docs source

7. Semantic classNames / styles

8. Alternative: LLMs.txt without CLI

Global Flags

migrate options

patch-for-react options

Key Rules

Command Reference

Related Links

Files

Compare with similar skills

Similar skills

More from XiaoMi/hiui

Related

Questions about Hiui

`migrate` options

`patch-for-react` options