Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add CavinHuang/claude-skills-hub --skill ui-component-generatorgit clone --depth 1 https://github.com/CavinHuang/claude-skills-hubWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/cavinhuang/claude-skills-hub/ui-component-generator)<a href="https://agentmods.dev/skills/cavinhuang/claude-skills-hub/ui-component-generator"><img src="https://agentmods.dev/badge/skills/cavinhuang/claude-skills-hub/ui-component-generator/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/cavinhuang/claude-skills-hub/ui-component-generator"><img src="https://agentmods.dev/badge/skills/cavinhuang/claude-skills-hub/ui-component-generator.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00000 | $0.00791 |
| Opus 5.5 | $0.00000 | $0.00316 |
| Sonnet 5.5 | $0.00000 | $0.00158 |
| Haiku 4.5 | $0.00000 | $0.00079 |
Grade A, and why
ui-component-generator scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
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 等)
输出格式
生成的组件包含：
- 组件主文件 (.jsx/.vue/.ts)
- 样式文件 (.css/.scss/.module.css)
- 类型定义文件 (.d.ts)
- 使用示例文件
- 测试文件
- Storybook 故事 (可选)
限制和注意事项
- 生成的组件需要根据项目的设计系统进行调整
- 复杂的业务逻辑可能需要额外的状态管理
- 建议结合项目的组件库使用
- 某些特殊效果可能需要额外的依赖
版本历史
- v1.0.0: 初始版本，支持基础组件生成
- v1.1.0: 添加更多框架支持
- v1.2.0: 增强样式和动画支持
- v1.3.0: 添加可访问性支持
许可证
MIT License
贡献者
Claude Skills Hub Team
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 124 lines · 0 tokens per session scan A dd632db7848a
ui-component-generator is a skill published in the GitHub repository CavinHuang/claude-skills-hub (7 stars, last pushed 1y ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 791 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
remotion-asset-coordinator
Bridges asset requirements from motion design specs to production-ready assets. Parses specs for required assets, recommends free/paid sources, provides format conversion guidance, generates validated import code, and offers asset preparation checklists. Use when preparing assets for Remotion projects or when asked…
image-to-svg
Convert raster images (photos, paintings, illustrations, line art) into SVG vector reproductions. Use when the user uploads an image and asks to reproduce, vectorize, trace, or convert it to SVG. Also use when asked to decompose an image into shapes, create an SVG version of a picture, or faithfully reproduce artwork…
json-render-ui
Generate guardrailed UI from natural language. Emits constrained JSON that a Preact runtime renders. Use when the request is for a dashboard with metrics, charts, or tables; an admin panel; a data visualization interface; or a form-based application.
svg-portrait-mode
Portrait Mode for SVGs — foveated vectorization with 4-zone selective detail. Combines vision annotations, MediaPipe segmentation/landmarks, and optional saliency. Like phone portrait mode, but vectorized. Use when vectorizing a portrait or photo where subject detail should outrank background detail.
superdesign
Design or redesign frontend UI, presentations, and graphics on the Superdesign canvas with a choice of leading AI models. Use whenever the user wants to design a page, feature, flow, slide deck, or brand-new product; improve or reproduce existing UI; compare design results across top models; explore visual variants…
design-system-synthesizer
Use when the user says 'build a design system for my site', 'extract design tokens', 'capture my brand', or 'build my style guide', or after a rebrand. Reads representative pages, theme files, and media to extract logo, colors, typography, spacing, and components, then writes a visible style-guide page.