# Component

> 当用户想做导航栏、卡片、弹窗、侧边栏、定价页等 UI 组件时使用 — 生成可直接使用的 UI 组件

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

## Install

```sh
agentstack add skill-lightpointventures-claude-code-starter-component
```

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

## About

# 生成 UI 组件

帮用户快速生成一个即用的 UI 组件。

## 步骤

### 1. 确定组件类型

如果用户已经说了想要什么，直接开始。

如果没有，展示常用组件列表：
> 你想生成什么组件？常见的有：
> - 导航栏（Navbar）
> - 登录/注册表单
> - 定价页（Pricing）
> - 卡片列表（Cards）
> - 页脚（Footer）
> - 数据表格（Table）
> - 弹窗/对话框（Modal）
> - 侧边栏（Sidebar）
> - 搜索框（Search）
> - 通知栏（Notification）
> - 上传区域（Upload）
> - 评论区（Comments）
>
> 也可以直接描述你想要的。

### 2. 检查项目技术栈

查看项目中使用的前端框架和 UI 库：
- 有 React/Vue/Svelte → 生成对应框架的组件
- 有 Tailwind/Bootstrap → 使用对应的样式方案
- 什么都没有 → 生成纯 HTML + CSS

同时观察项目已有组件的代码风格，保持一致。

### 3. 生成组件

生成的组件必须：
- 可以直接复制到项目中使用
- 响应式布局，移动端友好
- 包含基本的交互状态（hover、active、disabled）
- 表单类组件包含基本的输入验证
- 代码简洁，不过度封装

### 4. 展示并确认

生成后告诉用户组件放在了哪里，以及如何使用。

询问是否需要调整：
> 组件已生成。需要调整样式、布局或功能吗？

## Source & license

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

- **Author:** [lightpointventures](https://github.com/lightpointventures)
- **Source:** [lightpointventures/claude-code-starter](https://github.com/lightpointventures/claude-code-starter)
- **License:** MIT
- **Homepage:** https://github.com/lighthouse-strategy/claude-code-starter

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-lightpointventures-claude-code-starter-component
- Seller: https://agentstack.voostack.com/s/lightpointventures
- 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%.