# Agent Skills · HeroUI

> 让 AI 助手能够使用 HeroUI v3 组件来构建 UI

- 页面: https://jiguang132.com/zh/systems/heroui/docs/getting-started/agent-skills
- 改编自: HeroUI 文档 (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

HeroUI Skills 为你的 AI 助手提供关于 HeroUI v3 组件、模式与最佳实践的全面知识。


### 安装

```bash
curl -fsSL https://heroui.com/install | bash -s heroui-react
```

或者使用 skills 包：

```bash
npx skills add heroui-inc/heroui
```


支持 Claude Code、Cursor、OpenCode 等。


### 使用方法

Skills 会被你的 AI 助手 **自动发现**，你也可以通过 `/heroui-react` 命令直接调用。

只需让你的 AI 助手：
- 使用 HeroUI v3 构建组件
- 使用 HeroUI 组件创建页面
- 自定义主题和样式
- 查阅组件文档


> 
  对于更复杂的使用场景，请使用 [MCP 服务器](/systems/heroui/docs/getting-started/mcp-server)，它提供对组件文档与源代码的实时访问。


### 包含的内容

- HeroUI v3 安装指南
- 所有 HeroUI v3 组件，包含 props、示例与使用模式
- 主题与样式指南
- 设计原则与组合模式

### 结构

```
skills/heroui-react/
├── SKILL.md              # Main skill documentation
├── LICENSE.txt           # Apache License 2.0
└── scripts/              # Utility scripts
    ├── list_components.mjs
    ├── get_component_docs.mjs
    ├── get_source.mjs
    ├── get_styles.mjs
    ├── get_theme.mjs
    └── get_docs.mjs
```

### 相关文档

- [Agent Skills 规范](https://agentskills.io/home) — 了解 Agent Skills 的格式
- [Claude Agent Skills](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview) — Claude 的 Skills 文档
- [Cursor Skills](https://cursor.com/docs/context/skills) — 在 Cursor 中使用 Skills
- [OpenCode Skills](https://opencode.ai/docs/skills) — 在 OpenCode 中使用 Skills

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt