Agent Skills
› jakubkrehel/skills
jakubkrehel/skills
GitHub提供前端无障碍访问（A11y）最佳实践，指导使用原生元素、键盘导航、焦点管理及对比度规范，确保产品符合 WCAG 标准。
Install All Skills
npx skills add jakubkrehel/skills --all -g -y
Skills in Collection (11)
提供前端无障碍访问（A11y）最佳实践，指导使用原生元素、键盘导航、焦点管理及对比度规范，确保产品符合 WCAG 标准。
检查代码是否符合无障碍标准
修复键盘导航或屏幕阅读器问题
优化焦点环和点击区域
npx skills add jakubkrehel/skills --skill better-accessibility -g -y
协助构建项目色彩系统，生成调色板、语义令牌，支持格式转换与对比度检查。强调复用现有令牌、规范命名及基于角色的步骤设计，确保色彩一致性与可维护性。
需要生成或调整项目配色方案
创建或映射语义化颜色令牌
进行色彩格式转换或对比度验证
npx skills add jakubkrehel/skills --skill better-colors -g -y
协调多个专项技能对界面进行跨学科审查，收集证据并输出综合评级。专注于编排而非规则定义，确保基于事实的评审结论。
需要全面评估用户界面质量
整合无障碍、布局、排版等多维度UI审查结果
npx skills add jakubkrehel/skills --skill better-interface -g -y
提供前端布局最佳实践，涵盖分组、对齐、阅读顺序及渐进式披露。指导通过间距而非线条进行视觉分组，区分控件与内容，并处理RTL适配，确保界面结构清晰且符合可访问性标准。
需要调整UI组件间距或对齐方式时
优化页面信息层级和阅读顺序时
实现响应式布局或RTL支持时
npx skills add jakubkrehel/skills --skill better-layout -g -y
规范前端排版细节，涵盖字体格式、属性使用、加载策略及类型比例，确保文本渲染、换行和截断效果优质。
审查前端UI组件的文本显示效果
配置Web字体加载与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
该技能用于对单个组件进行压力测试，通过推断并渲染所有可能的极端场景（如长文本、空状态等），在隔离页面中直观展示组件的视觉断裂情况，生成包含问题标记的可视化报告。
需要检查UI组件在不同数据状态下的显示稳定性
希望快速发现组件在极端内容输入时的样式崩溃或布局错误
npx skills add jakubkrehel/skills --skill break -g -y
解析前端界面构建细节，分析网站技术栈或特定效果的图层与实现方式。支持通过浏览器或源码获取证据，区分解释与审查，辅助理解现有设计实现。
询问某网站如何构建
分析特定视觉效果的实现层
npx skills add jakubkrehel/skills --skill explain-interface -g -y
审查代码变更对UI、排版、布局、色彩及无障碍性的影响，通过解析Diff范围与内容，输出详细的问题分析与改进建议。
用户请求审查特定PR或分支的界面变更
工作区存在未提交的界面相关修改
npx skills add jakubkrehel/skills --skill interface-review -g -y
为单个UI组件构建三个基于不同设计轴（结构、密度等）的变体，辅助迭代与选择。要求满足无障碍标准，聚焦单一变化维度，确保方案可落地。
需要生成多个UI设计方案
对现有组件进行多维度变体探索
在结构或布局上进行差异化尝试
npx skills add jakubkrehel/skills --skill variant -g -y
