内容
# IntelliHelper UI 代理
**官方代理插件**，适用于 [IntelliHelper UI](https://ui.intellihelper.in) — 面向编码代理的 Liquid Glass React 组件。
本仓库是 **Claude Code**、**Grok CLI**、**Codex**、**Cursor**、**Gemini CLI** 及任何支持 Agent Skills + MCP 的客户端的可安装单元。
| 层级 | 您获得的内容 |
| --- | --- |
| **MCP** | 通过 `@intellihelper/cli`（`search`、`get_component`、`get_add_command` 等）提供实时注册工具 |
| **Skills** | 工作流 + Liquid Glass 设计判断代理实际遵循的内容 |
| **Commands** | 斜杠快捷方式：add、search、list、audit、themes |
| **Agent** | 面向多组件屏幕的 `ui-builder` 专家 |
> 组件和 MCP **实现**位于产品 monorepo / npm 包中。本仓库是代理的**薄分发面**。
---
## 安装
### Claude Code
```bash
# 添加此市场，然后安装插件
claude plugin marketplace add IntelliHelper/agent-skills
claude plugin install intellihelper-ui@intellihelper
# 或在开发过程中从本地克隆加载
claude --plugin-dir ./agent-skills
```
### Grok CLI
```bash
grok plugin marketplace add IntelliHelper/agent-skills
# 或直接安装仓库
grok plugin install IntelliHelper/agent-skills --trust
grok plugin validate .
grok plugin details intellihelper-ui
```
启用/信任插件，以便 **hooks 和 MCP** 激活。然后打开 `/plugins` 或 `/mcps` 以确认 `intellihelper-ui` 已列出。
### Codex
```bash
codex plugin marketplace add IntelliHelper/agent-skills
# 然后从 /plugins 安装 intellihelper-ui
```
### Cursor
1. 从市场安装插件（如果已列出），**或**
2. 仅限 MCP 回退：
```bash
npx @intellihelper/cli@latest mcp init --client cursor
```
可选地，通过 [skills.sh](https://skills.sh) 安装技能：
```bash
npx skills add IntelliHelper/agent-skills
```
### Gemini CLI
```bash
gemini extensions install https://github.com/IntelliHelper/agent-skills
```
### 仅限 MCP（任意代理）
您不需要此插件即可使用工具 - 插件为它们提供一键安装：
```bash
npx @intellihelper/cli@latest mcp init --client cursor # claude | vscode | opencode | codex
```
手动 MCP 配置：
```json
{
"mcpServers": {
"intellihelper-ui": {
"command": "npx",
"args": ["-y", "@intellihelper/cli@latest", "mcp"]
}
}
}
```
**要求：** Node.js 18+（用于 `npx` + CLI MCP 服务器）。
---
## 内容
```text
.
├── .mcp.json # 连接 MCP → npx @intellihelper/cli mcp
├── .claude-plugin/ # Claude 清单 + 市场目录
├── .grok-plugin/ # Grok 清单 + 市场目录
├── .codex-plugin/ # Codex 清单
├── gemini-extension.json # Gemini 扩展入口
├── skills/
│ ├── intellihelper-ui/ # 中心技能：MCP 工作流 + 规则
│ ├── liquid-glass/ # 设计系统（chrome vs content，themes）
│ ├── add-component/ # 安装 / 初始化 / 审计路径
│ └── compose-ui/ # 页面配方
├── commands/ # 斜杠命令
├── agents/ui-builder.md # 专业 UI 代理
└── assets/logo.png
```
### MCP 工具
| 工具 | 目的 |
| --- | --- |
| `get_project_config` | 读取 `components.json` / 初始化指南 |
| `list_components` | 按类别浏览 |
| `search_components` | 模糊搜索 |
| `get_component` | 源代码、变体、依赖项 |
| `get_component_examples` | 用例片段 |
| `get_add_command` | CLI 安装命令（不写入文件） |
| `list_themes` | mono · aurora · sunset · frost · ocean |
| `get_audit_checklist` | 安装后 QA |
### 技能
| 技能 | 角色 |
| --- | --- |
| `intellihelper-ui` | 默认入口 - 何时/如何使用系统 |
| `liquid-glass` | 视觉语言 + 主题 |
| `add-component` | 安全安装管道 |
| `compose-ui` | 多组件屏幕配方 |
### 斜杠命令
| 命令 | 操作 |
| --- | --- |
| `/add` | 安装组件 |
| `/search` | 搜索注册表 |
| `/list` | 按类别列出 |
| `/audit` | 项目健康检查 |
| `/themes` | 主题指南 |
（确切调用可能有命名空间，例如 `/intellihelper-ui:add`。）
---
## 示例提示
安装 + 信任后：
- “显示我所有 IntelliHelper glass 组件”
- “从 IntelliHelper UI 添加按钮、对话框和卡片”
- “使用 Liquid Glass 构建设置页面”
- “在 IntelliHelper UI 中搜索表单输入”
- “审计此项目以检查 IntelliHelper 设置”
---
## 消费者快速入门（应用项目）
```bash
npx @intellihelper/cli@latest init -y
npx @intellihelper/cli@latest add button card dialog -y
```
```tsx
import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle } from "@/components/ui/card"
export function Example() {
return (
<Card>
<CardHeader>
<CardTitle>Hello</CardTitle>
</CardHeader>
<Button variant="primary">Continue</Button>
</Card>
)
}
```
文档：[ui.intellihelper.in](https://ui.intellihelper.in) · CLI：[`@intellihelper/cli`](https://www.npmjs.com/package/@intellihelper/cli) · UI monorepo：[IntelliHelper-UI](https://github.com/IntelliHelper/IntelliHelper-UI)
---
## 本地开发
```bash
git clone https://github.com/IntelliHelper/agent-skills.git
cd agent-skills
./scripts/validate.sh
# Claude
claude --plugin-dir .
# Grok
grok plugin install . --trust
grok plugin validate .
```
### 版本控制
- 当技能/命令更改时，同时更新 `.claude-plugin/plugin.json`、`.grok-plugin/plugin.json` 和 `.codex-plugin/plugin.json` 中的 `version`。
- MCP 工具行为版本与 npm 上的 `@intellihelper/cli` 保持一致 - 无需重建此仓库即可更新注册表内容。
---
## 架构
```text
代理（Claude / Grok / Codex / …）
└── 此插件
├── 技能 / 命令 / 代理 → 判断 & 工作流
└── .mcp.json
└── npx @intellihelper/cli@latest mcp
└── 注册表 https://ui.intellihelper.in/r
```
保持此仓库**精简**。不要将整个 UI monorepo 放入其中。
---
## License
MIT © IntelliHelper
