Agent Skills
› jakubkrehel/skills
jakubkrehel/skills
GitHub用于审查和修复前端无障碍访问问题，涵盖键盘导航、焦点行为、ARIA语义及WCAG 2.2合规性。
安装全部 Skills
npx skills add jakubkrehel/skills --all -g -y
集合内 Skills (15)
用于审查和修复前端无障碍访问问题，涵盖键盘导航、焦点行为、ARIA语义及WCAG 2.2合规性。
需要检查或提升网页无障碍访问标准时
修复屏幕阅读器兼容性或键盘操作缺陷时
npx skills add jakubkrehel/skills --skill better-accessibility -g -y
构建和审计颜色系统，生成色阶、映射语义 Token、转换格式及测量对比度。遵循项目规范，确保色彩一致性与无障碍访问标准。
需要设计或审计 UI 颜色系统时
检查颜色对比度或 Token 命名规范时
npx skills add jakubkrehel/skills --skill better-colors -g -y
协调多个专项技能对界面进行跨学科审查，涵盖无障碍、布局、文案等维度。收集证据并生成排名报告，区分现有问题与变更引入问题，确保基于事实而非主观偏好。
需要综合评估UI/UX质量
请求对屏幕或流程进行多维度审查
npx skills add jakubkrehel/skills --skill better-interface -g -y
提供前端布局规范，涵盖分组、对齐、阅读顺序及 RTL 镜像适配。指导通过逻辑属性和间距系统确保界面在缩放、翻译或镜像时结构稳定，提升可维护性与多语言支持能力。
修复界面错位或重叠问题
优化多语言翻译后的布局适配
调整 RTL 镜像布局
npx skills add jakubkrehel/skills --skill better-layout -g -y
规范前端文本渲染样式，涵盖字体加载、层级比例、间距及排版细节。指导开发者使用语义化命名和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
该技能用于对指定组件进行压力测试。它通过推断各种极端场景，构建隔离的Harness页面渲染组件，并生成包含视觉断点的报告，以验证组件在内容最坏情况下的防御能力。
需要检查单个UI组件在不同数据或状态下的显示稳定性
需要对组件进行独立于上下文的视觉回归或压力测试
npx skills add jakubkrehel/skills --skill break -g -y
将 Figma 设计稿或截图转换为代码，严格匹配设计规范。通过读取设计源数据并映射到项目现有 Token 和组件库，实现高保真 UI 构建，同时处理设计冲突与偏差。
需要将 Figma 链接或设计图片转化为前端代码
要求 UI 实现与设计稿像素级一致
npx skills add jakubkrehel/skills --skill build-design -g -y
分析网站或截图的界面实现细节，包括前端架构、样式系统及特效层叠原理。通过浏览器或源码获取数据，解释技术选型与渲染机制，不涉及评判，仅做技术性还原说明。
询问网站或特效的具体构建方式
需要解析界面视觉效果的实现技术
npx skills add jakubkrehel/skills --skill explain-interface -g -y
用于审查代码变更中引入或退化的界面问题，涵盖无障碍、布局、排版、色彩及UI。通过解析PR、分支或未提交更改的范围，识别并分类界面缺陷，生成针对性报告，排除非界面类问题。
审查特定Pull Request的界面变更
检查当前分支相对于主干的界面回归
npx skills add jakubkrehel/skills --skill interface-review -g -y
为指定组件生成包含所有代码状态的隔离测试页，通过Mock数据模拟加载、错误、权限等场景，提供状态切换器以便快速视觉检查与调试。
需要预览组件在不同数据或权限状态下的视觉效果
需要快速验证组件的边界情况和异常处理样式
npx skills add jakubkrehel/skills --skill state-machine -g -y
根据物体描述、照片或CAD模型创建技术插图，提取几何特征并生成带有精确标注和排版的渲染图，支持SVG/PNG/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
