Back to skills
SKILL.md
Ui Component
ASecurityGenerate standalone HTML/CSS components: forms, cards, modals. Use when picking palettes, choosing fonts, laying out grids, adjusting spacing.
- 12 stars
- 0 votes
- 0 copies
- 2 views
- Added September 7, 2026
Security analysis
100/100Pro scans all 4 files and shows the line behind each finding
npx -y skills add bytesagain/ai-skills --skill ui-component --agent claude-codeAre you the author of Ui Component?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/bytesagain-ui-component)---
version: "2.0.0"
name: ui-component
description: "Generate standalone HTML/CSS components: forms, cards, modals. Use when picking palettes, choosing fonts, laying out grids, adjusting spacing."
author: BytesAgain
homepage: https://bytesagain.com
source: https://github.com/bytesagain/ai-skills
---
# ui-component
UI组件HTML/CSS代码生成。表单、表格、卡片、模态框、导航栏,输出完整可运行HTML文件。UI component generator: form, table, card, modal, navbar as standalone HTML files.
## 核心特点
🎯 **精准** — 针对具体场景定制化输出
📋 **全面** — 多个命令覆盖完整工作流
🇨🇳 **本土化** — 完全适配中文用户习惯
## 可用命令
- **generate** — generate
- **form** — form
- **table** — table
- **card** — card
- **modal** — modal
- **navbar** — navbar
## 专业建议
- 一致性** — 同一项目使用统一的圆角、间距、配色
- 可访问性** — 表单加label,按钮有焦点样式,对比度达标
- 响应式** — 移动端优先,用相对单位(rem/%)
- 简洁** — 少即是多,不加无意义装饰
- | 需求 | 推荐命令 |
---
*ui-component by BytesAgain*
---
💬 Feedback & Feature Requests: https://bytesagain.com/feedback
Powered by BytesAgain | bytesagain.com
## Examples
```bash
# Show help
ui-component help
# Run
ui-component run
```
- Run `ui-component help` for all commands
## Commands
Run `ui-component help` to see all available commands.
Files in this skill
- SKILL.md
- scripts/script.sh
- scripts/ui.sh
- tips.md
Attribution
Comments
Loading comments…