Vibeyard UI 开发规范
为 Vibeyard 渲染进程的 UI 改动提供强制约束：组件复用、CSS 变量主题和 DOM 模式，避免 AI 代理写出与代码库风格不符的界面代码。
项目自身的 UI 开发规范（原生 TypeScript DOM 操作，禁用原生 select），服务于该项目贡献者。
这个 Skill 能做什么，适合哪些场景？
这是 Vibeyard（一个面向 AI 编码代理的 IDE）仓库中的 ui-dev 技能，位于 .claude/skills/ui-dev/SKILL.md。它本身不含可执行脚本，而是一份约定文档：当任务涉及 src/renderer/ 下的任何文件、组件修改或样式调整时，Claude Code 必须加载它。内容涵盖自定义下拉框与模态框组件的 API、按钮与徽章的既有 CSS 类、CSS 变量主题规则、组件工厂函数与销毁模式、文本选区保护技巧，以及各 CSS 文件的归属。适合贡献 Vibeyard 代码或在其上做二次开发的开发者使用。
当触发的任务涉及 UI 开发或渲染进程文件时，该技能向代理注入一组约束与模式：指示永远不用原生 select 而用 createCustomSelect()；用 showModal()/closeModal()/setModalError() 构建表单模态框；用 showAlertBanner() 做内联警告条；按钮必须复用 .btn-primary/.btn-secondary 等既有类；颜色必须使用 base.css 中的 CSS 变量而非硬编码；组件采用工厂函数模式并必须提供 destroy() 清理监听器；定期重绘前检查 window.getSelection() 以保留用户选中文本；用 esc() 转义 innerHTML 中的用户内容；新增样式放入对应的既有 CSS 文件而非新建文件。
- 为 Vibeyard 贡献代码的开发者，用 Claude Code 添加一个新按钮、下拉框或侧边栏改动，希望产出与现有组件体系一致
- 维护者让代理创建新的偏好设置类模态框，需要它遵循 showModal 模式并正确落位到 preferences.css
- 二次开发者在分叉版本上增加新 UI 功能，要求颜色走 CSS 变量以保持浅色/深色主题兼容
- 代理需要写带定时刷新的组件时，依据此技能实现选区保护与 destroy() 清理，避免内存泄漏和选中丢失
- 新加入项目的贡献者借助该技能文档快速了解 src/renderer/ 的组件结构与样式组织
这个 Skill 有哪些优点和局限？
- 提供了可直接照抄的组件 API 示例（custom-select、modal、alert-banner），降低代理犯错概率
- 强制使用 CSS 变量和既有按钮/徽章类，保护主题一致性，避免样式碎片化
- 涵盖真实工程细节：destroy() 清理、innerHTML 转义、文本选区保护
- 对 CSS 文件归属有明确对照表，新增样式不会乱放
- 完全绑定 Vibeyard 代码库的组件与样式约定，对其他项目没有直接价值
- 纯文档型技能，不含脚本或自动化校验，正确性依赖代理自觉遵守
- 技能未附带测试或示例运行方式，无法验证其约束是否被持续执行
如何安装这个 Skill？
该技能随 vibeyard 仓库分发：克隆 https://github.com/elirantutia/vibeyard 后，技能已位于 .claude/skills/ui-dev/。在 Claude Code 中打开该仓库即可被自动发现。若要单独复制到其他项目，将 ui-dev 文件夹放入目标项目的 .claude/skills/ 目录。源材料未提供其他安装方式。
如何使用这个 Skill？
无需手动调用：SKILL.md 的描述声明了当任务涉及 UI 开发、组件增改、模态框、CSS 样式或 src/renderer/ 下任何文件时必须使用。在 Claude Code 中直接提出请求即可触发，例如"添加一个下拉菜单到侧边栏"、"创建一个确认删除的模态框"或"给这个组件调整样式"。技能内容会引导代理查阅对应的组件 API 和 CSS 类约定。