# Ui Component Generator

> A Claude skill from CavinHuang/claude-skills-hub.

- **Type:** Skill
- **Install:** `agentstack add skill-cavinhuang-claude-skills-hub-ui-component-generator`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [CavinHuang](https://agentstack.voostack.com/s/cavinhuang)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [CavinHuang](https://github.com/CavinHuang)
- **Source:** https://github.com/CavinHuang/claude-skills-hub/tree/main/skills/ui-component-generator
- **Website:** https://claudeskill.site

## Install

```sh
agentstack add skill-cavinhuang-claude-skills-hub-ui-component-generator
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# UI 组件生成器

## 描述
专业的 UI 组件自动生成工具，可以根据设计需求快速生成 React、Vue、Angular 等现代前端框架的组件代码。

## 类别
设计

## 标签
UI组件, 前端开发, React, Vue, Angular, 设计系统

## 使用场景
- 快速创建基础 UI 组件
- 生成复杂交互组件
- 创建设计系统组件
- 生成响应式布局
- 创建主题化组件

## 前置要求
- Claude Desktop 版本 1.0+
- 了解前端开发基础
- 熟悉至少一种前端框架

## 使用方法

### 基础用法
```
请帮我生成一个 [框架类型] 的 [组件类型] 组件，具有以下特性：
- [特性1]
- [特性2]
- [样式要求]
```

### 高级用法
```
我需要创建一个专业的 [组件类型] 组件，请生成：

组件要求：
- 框架：[React/Vue/Angular]
- 类型：[函数组件/类组件]
- 样式：[CSS Modules/Styled Components/Tailwind CSS]
- 功能：[详细功能描述]

设计规范：
- 主题色：[颜色配置]
- 字体：[字体配置]
- 间距：[间距系统]
- 动画：[动画要求]

交互需求：
- [交互1]
- [交互2]
- [交互3]

可访问性：
- 需要支持键盘导航
- 包含 ARIA 标签
- 支持屏幕阅读器

响应式要求：
- 桌面端：[桌面端布局]
- 平板端：[平板端布局]
- 移动端：[移动端布局]

请提供：
1. 完整的组件代码
2. 样式文件
3. 使用示例
4. 测试代码
```

## 配置选项

### 支持的框架
- React (函数组件 & 类组件)
- Vue 3 (Composition API)
- Angular (Components & Services)
- Svelte
- Vanilla JavaScript

### 样式解决方案
- CSS Modules
- Styled Components
- Emotion
- Tailwind CSS
- SCSS/SASS
- CSS-in-JS

### 组件类型
- 表单组件 (Input, Select, Checkbox 等)
- 导航组件 (Menu, Breadcrumb, Tabs 等)
- 布局组件 (Grid, Card, Panel 等)
- 反馈组件 (Modal, Toast, Loading 等)
- 数据展示组件 (Table, Chart, List 等)
- 交互组件 (Slider, Carousel, Tree 等)

## 输出格式

生成的组件包含：
1. 组件主文件 (.jsx/.vue/.ts)
2. 样式文件 (.css/.scss/.module.css)
3. 类型定义文件 (.d.ts)
4. 使用示例文件
5. 测试文件
6. Storybook 故事 (可选)

## 限制和注意事项
- 生成的组件需要根据项目的设计系统进行调整
- 复杂的业务逻辑可能需要额外的状态管理
- 建议结合项目的组件库使用
- 某些特殊效果可能需要额外的依赖

## 版本历史
- v1.0.0: 初始版本，支持基础组件生成
- v1.1.0: 添加更多框架支持
- v1.2.0: 增强样式和动画支持
- v1.3.0: 添加可访问性支持

## 许可证
MIT License

## 贡献者
Claude Skills Hub Team

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [CavinHuang](https://github.com/CavinHuang)
- **Source:** [CavinHuang/claude-skills-hub](https://github.com/CavinHuang/claude-skills-hub)
- **License:** MIT
- **Homepage:** https://claudeskill.site

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-cavinhuang-claude-skills-hub-ui-component-generator
- Seller: https://agentstack.voostack.com/s/cavinhuang
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.