安装
使用作者提供的命令从原始仓库安装，在安装程序中选择所需 Skill 和使用的 Agent；相关工作流可能依赖仓库中的其他 Skill。
安装仓库
在终端中运行。
npx skills add jakubkrehel/skills
硬盘的爆炸技术插画，展示盖板、磁头组件、盘片、外壳与电路板。
项目截图关于这个 Skill
14 个 Agent Skill，覆盖界面审查、UI 实现、组件测试和技术插画。
为什么推荐
外部收录，链接作者采用 MIT 许可证的原始仓库。
合集中的 Skills
14 个 Skills- 查看 →
Better Accessibility
依据 WCAG 2.2 检查键盘焦点、ARIA、表单、屏幕阅读器、动效和缩放。
- 查看 →
Better Colors
建立并检查调色板、语义色彩变量和实测对比度。
- 查看 →
Better Interface
从无障碍、布局、文案、排版、色彩与界面细节综合审查页面或流程。
- 查看 →
Better Layout
检查分组、对齐、阅读顺序与响应式布局。
- 查看 →
Better Typography
设置并检查字号层级、间距、字体特性与文本换行。
- 查看 →
Better UI
使用现有界面系统打磨表面、图标与动效。
- 查看 →
Better Writing
编写和审查界面标签、错误提示、空状态与确认文案。
- 查看 →
Break: Component Stress Test
在临时页面中按相关极端场景渲染并压力测试指定组件。
- 查看 →
Build Design
使用项目现有组件与设计变量，将 Figma 或图片中的设计实现为界面。
- 查看 →
Explain Interface
根据网址或截图解释网站、视觉效果或动画的实现方式。
- 查看 →
Interface Review
审查分支、PR 或未提交变更引入的界面问题和回归。
- 查看 →
State Machine: Component States
用模拟数据和切换器，在临时页面展示组件的各个状态。
- 查看 →
Teardown: Technical Illustrations
创建多视图一致的技术插画，并生成可交互的导出页面。
- 查看 →
Variant: UI Alternatives
在实际页面中构建多个组件方案并比较取舍。
适合用来做什么
- 审查和完善现有产品界面，或在代码库中实现设计。
- 测试组件场景、比较设计方案或解释视觉效果。
封面插画
封面采用用户提供的作者网站硬盘拆解 SVG，已在白底上栅格化并压缩用于展示。
使用前需要了解
- 需要能读取 SKILL.md 的 Agent 和相关项目。浏览器检查需要可用的浏览器；无法执行的检查应明确标出。
- Build Design 读取 Figma 链接需要连接 Figma MCP；部分审查流程依赖本仓库的其他 Skill。
支持的 Agent
Claude CodeCodex CLIOpenCode
资料与来源
原始资料见下方链接；文中的上手建议由 SkillHey 编辑整理。
