Component
当用户想做导航栏、卡片、弹窗、侧边栏、定价页等 UI 组件时使用 — 生成可直接使用的 UI 组件
Install
$ agentstack add skill-lightpointventures-claude-code-starter-component ✓ scanned · ✓ verified, works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
Verified badge
Passed review? Show it. Paste this badge into your README, it links to the public security report.
Links to your public security report.[](https://agentstack.voostack.com/security/report/skill-lightpointventures-claude-code-starter-component) Reliability & compatibility
Declared compatibility
Compatibility is declared by the source manifest. End-to-end runtime verification is coming, see below.
We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps, measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.
How agent discovery & health will work →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
- Source: 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.
Reviews
No reviews yet, be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.