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 | $0.00000 | $0.00396 |
| Sonnet 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 11d 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.
- 11d 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 10mo 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
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.
figma-to-elementor
Use when the user says 'figma to elementor', 'build this figma design in elementor', or hands over a Figma frame to rebuild in WordPress. Maps the Figma node tree to Elementor widgets and containers and writes clean Elementor JSON into a draft duplicate, so nothing live is touched.
figma-to-bricks
Use when the user says 'figma to bricks', 'build this figma design in bricks', or hands over a Figma frame to rebuild on a Bricks Builder site. Maps the Figma node tree to native Bricks elements with BEM global classes, imports the frame's palette into the Bricks design system, and writes to a draft, so nothing live…
figma-to-divi
Use when the user says 'figma to divi', 'build this figma design in divi', or hands over a Figma frame to rebuild in WordPress on a Divi site. Maps the Figma node tree to native Divi sections, rows, columns and modules (Divi 5 blocks or Divi 4 shortcodes, auto-detected) and writes to a draft, so nothing live is…
figma-to-gutenberg
Use when the user says 'figma to gutenberg', 'figma to blocks', or hands over a Figma frame to rebuild on a WordPress site that uses the block editor. Maps the Figma node tree to core Gutenberg blocks, registers the frame's palette in Global Styles, and writes to a draft, so nothing live is touched.
html-to-bricks
Use when the user says 'convert this html to bricks' or 'paste html into bricks', or has a Webflow, Framer, CodePen, or old static export to bring into a Bricks site. Converts raw HTML and CSS into native Bricks elements, mapping colors, type, and spacing to design tokens, plus ACSS classes when installed.