Agent Skills
› jakubkrehel/skills
jakubkrehel/skills
GitHub提供前端无障碍访问(a11y)审查与实现指南,涵盖原生元素使用、焦点管理、键盘导航及标签规范,确保符合 WCAG 标准。
安装全部 Skills
npx skills add jakubkrehel/skills --all -g -y
集合内 Skills (11)
提供前端无障碍访问(a11y)审查与实现指南,涵盖原生元素使用、焦点管理、键盘导航及标签规范,确保符合 WCAG 标准。
需要检查或修复前端组件的无障碍访问问题
审查代码是否符合 WAI-ARIA 和键盘交互最佳实践
npx skills add jakubkrehel/skills --skill better-accessibility -g -y
协助构建项目色彩系统,生成调色板、语义化Token,处理格式转换与对比度校验。确保颜色命名规范、层级清晰,遵循感知亮度均匀等原则,提供精确的色彩计算结果。
需要定义或扩展项目的色彩系统
生成基于角色的语义化颜色Token
检查颜色对比度是否符合无障碍标准
在不同颜色格式间进行转换
npx skills add jakubkrehel/skills --skill better-colors -g -y
整合多个专项技能进行跨领域界面审查,涵盖无障碍、布局、排版等。核心职责为编排调度与证据收集,生成统一排名判决。严格区分屏幕审查与变更审查,强调基于证据而非主观偏好,确保审查范围准确且结果可信。
需要综合评估界面可用性
请求对UI/UX进行全面质量检查
涉及多领域界面规范的一致性审核
npx skills add jakubkrehel/skills --skill better-interface -g -y
提供界面布局规范,指导间距、对齐、分组及渐进式披露等细节,以构建清晰的视觉层级和结构。
需要调整UI组件的间距和对齐方式
优化界面的阅读顺序和分组逻辑
检查布局在不同屏幕尺寸下的适应性
npx skills add jakubkrehel/skills --skill better-layout -g -y
专注于前端排版细节的 Skill,涵盖字体缩放、间距、变量字体、OpenType 特性及文本换行截断等。指导使用语义化样式系统,规范字体格式加载与属性应用,确保跨产品文本渲染质量与可读性。
需要优化页面文字排版和视觉层次
检查或修复字体加载、换行和截断问题
配置变量字体和 OpenType 高级特性
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
该技能用于对指定组件进行压力测试,通过推断各种极端场景(如内容长度、状态等)并在隔离页面中渲染,生成视觉报告以发现组件在真实数据下的潜在断裂或问题。
需要对特定UI组件进行健壮性检查
用户希望查看组件在不同极端数据下的表现
需要生成组件的视觉回归或压力测试报告
npx skills add jakubkrehel/skills --skill break -g -y
解析网页界面构建细节的技能,通过浏览器或源码分析技术栈、样式系统及特效实现层。适用于前端架构逆向与效果拆解,辅助理解设计落地方案。
询问网站或组件的技术实现方式
分析特定视觉特效的图层与渲染机制
npx skills add jakubkrehel/skills --skill explain-interface -g -y
审查代码变更对界面(UI、排版、色彩等)的影响,分析差异并给出详细反馈。专注于变更范围而非整个代码库,排除无关文件,确保报告准确反映改动带来的具体问题。
用户请求审查特定PR或分支的界面变更
工作区存在未提交的界面相关修改
npx skills add jakubkrehel/skills --skill interface-review -g -y
该技能用于为单个UI组件构建三个有目的的变体,帮助用户通过选择器对比并决策。它强调基于单一核心维度(如结构、密度等)生成差异,确保所有变体符合无障碍标准,避免无效的颜色微调,从而辅助高效的设计迭代与选型。
需要为某个UI组件生成多个设计方案进行对比
在确定设计方向前希望探索不同布局或交互可能性
需要对现有UI进行多版本原型测试
npx skills add jakubkrehel/skills --skill variant -g -y


