Agent Skills
› jakubkrehel/skills
jakubkrehel/skills
GitHub审查并修复键盘焦点、ARIA语义、表单及屏幕阅读器兼容性，确保符合WCAG 2.2标准。通过双路径测试（纯键盘和读屏）定位问题，优先使用原生元素，修正对比度与焦点样式，提升无障碍体验。
Install All Skills
npx skills add jakubkrehel/skills --all -g -y
Skills in Collection (15)
审查并修复键盘焦点、ARIA语义、表单及屏幕阅读器兼容性，确保符合WCAG 2.2标准。通过双路径测试（纯键盘和读屏）定位问题，优先使用原生元素，修正对比度与焦点样式，提升无障碍体验。
需要检查代码的无障碍合规性
修复键盘导航或屏幕阅读器问题
优化ARIA语义和焦点管理
npx skills add jakubkrehel/skills --skill better-accessibility -g -y
构建和审计色彩系统，生成色阶、映射语义Token、转换格式并测量对比度。确保颜色命名规范、角色映射正确及视觉一致性，遵循OKLCH标准与无障碍原则。
需要设计或重构UI色彩系统时
检查现有颜色方案的对比度和语义命名规范性时
npx skills add jakubkrehel/skills --skill better-colors -g -y
该技能负责跨学科界面审查，通过编排多个专项技能（如无障碍、布局、文案等）收集证据并生成排名报告。它聚焦于基于证据的审核，区分现有问题与新增回归，确保审查范围明确且结论可信。
用户请求对屏幕、流程或整个界面进行审查
提供分支、PR或未提交更改以进行变更范围审查
npx skills add jakubkrehel/skills --skill better-interface -g -y
前端布局规范技能，通过分组、对齐、逻辑属性和响应式结构优化界面。支持文本翻译和RTL镜像适配，确保在缩放或语言切换时布局不崩溃，提升可维护性和多语言兼容性。
需要优化UI组件的分组和对齐方式
实施RTL（从右到左）布局适配
调整响应式布局结构
npx skills add jakubkrehel/skills --skill better-layout -g -y
规范前端文本渲染样式，涵盖字号、字重、行高及字体加载策略。提供精确测量值与启发式规则，指导使用语义化类名和CSS属性，确保排版层级清晰、性能优化及视觉一致性。
前端页面排版优化
CSS样式代码审查
字体加载配置检查
npx skills add jakubkrehel/skills --skill better-typography -g -y
提供UI视觉打磨的精确规范，涵盖圆角、光学对齐、阴影及动画状态，确保界面细节一致性与高质量呈现。
需要统一或优化UI组件的视觉细节
检查或修正界面中的圆角、阴影和动画参数
npx skills add jakubkrehel/skills --skill better-ui -g -y
负责编写和审查界面文案（如标签、错误提示），确保符合产品语调并指引用户操作。涵盖术语统一、语气适配及无障碍考量，旨在提升用户体验与一致性。
需要撰写或优化界面文本
检查文案是否符合品牌语调
统一产品内术语和语气
npx skills add jakubkrehel/skills --skill better-writing -g -y
通过构建隔离的测试页，对指定组件进行极端场景压力测试。自动推断触发场景并渲染，生成包含视觉断点的报告，用于发现组件在异常数据下的崩溃问题。
需要检查组件在极端或异常输入下的稳定性
希望快速验证单个组件在不同状态和容器宽度下的渲染表现
npx skills add jakubkrehel/skills --skill break -g -y
将Figma设计稿或图片转换为代码，严格复用项目现有Token和组件库。通过对比设计源与实现结果确保高保真还原，处理差异并报告冲突，禁止随意添加新样式。
需要将UI设计稿转化为前端代码
要求基于现有组件库进行界面搭建
需要验证代码实现与设计稿的一致性
npx skills add jakubkrehel/skills --skill build-design -g -y
分析网站或界面效果的实现方式，支持URL和截图。通过浏览器或源码获取计算样式、层叠顺序及渲染细节，解释前端技术栈与视觉构建逻辑，而非进行代码审查。
询问网站某部分如何构建
请求解析特定视觉效果或动画的实现原理
基于截图反推界面搭建方法
npx skills add jakubkrehel/skills --skill explain-interface -g -y
审查代码变更引入或回归的界面问题，覆盖无障碍、布局、排版、色彩等。解析PR或提交范围，排除无关文件，专注差异影响并生成报告，将结果移交better-interface处理。
审查Pull Request的界面质量
检查分支或本地未提交更改的UI回归
npx skills add jakubkrehel/skills --skill interface-review -g -y
该 Skill 用于为指定组件生成包含所有代码可达状态的隔离测试页面。通过模拟数据、状态切换器展示加载、空值、错误等场景，辅助开发者在独立环境中调试和验证 UI 表现，完成后一键清理。
需要预览组件的各种状态（如加载、错误、空数据）
需要在隔离环境中调试组件的视觉表现
npx skills add jakubkrehel/skills --skill state-machine -g -y
用于生成物理对象或概念的技术插图，支持从照片、CAD模型等输入构建几何图形并输出SVG/PDF，强调精确标注与视觉呈现，非制造图纸。
需要制作技术原理图或爆炸图
将实物照片转换为工程风格插画
可视化抽象概念如像素层或内存结构
npx skills add jakubkrehel/skills --skill teardown -g -y
将物体、照片或CAD模型转换为精确的技术图纸，支持多视图生成与标注。提供交互式查看器及SVG/PNG/PDF下载功能，确保几何与注释的准确性。
需要将实物或描述转化为技术工程图
需要生成带有详细标注和多视角的机械制图
npx skills add jakubkrehel/skills --skill technical-drawing -g -y
该技能用于根据UI组件需求构建三个不同变体，通过结构、密度等轴进行差异化设计，确保无障碍和响应式标准，辅助用户选择最佳方案。
需要为单个UI组件生成多个设计方案
希望对比不同布局或视觉风格的效果
npx skills add jakubkrehel/skills --skill variant -g -y
