Agent Skills
› moumen-soliman/uitripled
moumen-soliman/uitripled
GitHub提供基于 WCAG 2.2 标准的 Web 无障碍审计与改进指南，涵盖 POUR 原则、合规等级及可感知性（如图片替代文本、色彩对比度）的具体实现代码示例。
Install All Skills
npx skills add moumen-soliman/uitripled --all -g -y
Skills in Collection (13)
提供基于 WCAG 2.2 标准的 Web 无障碍审计与改进指南，涵盖 POUR 原则、合规等级及可感知性（如图片替代文本、色彩对比度）的具体实现代码示例。
improve accessibility
a11y audit
WCAG compliance
screen reader support
keyboard navigation
make accessible
npx skills add moumen-soliman/uitripled --skill accessibility -g -y
将模糊的动效描述反向查找为精确术语，帮助用户命名UI动画效果。适用于用户询问特定动效名称或描述感觉但未知专业词汇的场景。
用户询问某动画效果的名称
用户描述视觉感受但不知道术语
npx skills add moumen-soliman/uitripled --skill animation-vocabulary -g -y
提供前端界面无障碍工程指南，涵盖原生元素优先、焦点环样式、键盘导航、模态框焦点陷阱及点击区域规范。用于构建或审查UI组件，解决键盘和屏幕阅读器兼容性问题，确保符合WCAG标准。
用户报告键盘或屏幕阅读器问题
构建或审查UI组件和自定义小部件
涉及a11y, WCAG, aria, focus ring等关键词
npx skills add moumen-soliman/uitripled --skill better-accessibility -g -y
定义数字产品的色彩系统规范，指导调色板生成、主题设计及色值审计。强调使用角色命名语义Token，保持色相一致性，确保对比度与可访问性，避免孤立选色导致的维护问题。
创建或扩展颜色调色板
实现深色模式或主题切换
审计代码库中的颜色使用
生成颜色阶梯或色标
定义品牌色或状态色
npx skills add moumen-soliman/uitripled --skill better-colors -g -y
协调多个专项技能对界面进行跨学科审查，收集证据并整合排序后的评审结论。适用于需要整体界面评估而非单一领域检查的场景，确保基于事实而非主观偏好。
要求对屏幕、流程或功能进行整体审查
触发 better-interface 命令
收到 interface-review 路由的变更
npx skills add moumen-soliman/uitripled --skill better-interface -g -y
提供Web界面布局结构指南，涵盖间距、对齐、分组及响应式断点处理。用于指导前端页面组件结构设计，审查代码中的视觉层级与阅读顺序，确保在不同尺寸和RTL环境下保持良好的用户体验。
页面或组件的布局结构设计
审查前端代码中的间距、对齐与分组问题
解决小屏幕下的折叠与响应式布局问题
检查视觉层级、阅读顺序及渐进式披露实现
npx skills add moumen-soliman/uitripled --skill better-layout -g -y
专注Web排版优化的技能，指导字体选择、变量字体加载、类型比例设置及文本样式处理。涵盖WOFF2格式、CSS属性使用规范、标题层级与换行截断等细节，提升前端文本渲染质量。
选择或搭配字体
设置类型比例
组件内文本样式化
字体加载与WOFF2处理
变量字体与OpenType特性
文本换行与截断
npx skills add moumen-soliman/uitripled --skill better-typography -g -y
提供UI细节打磨指南，涵盖边框圆角、光学对齐、阴影、中断式动画及图标动效等具体数值与规范，用于提升界面精致度与视觉一致性。
构建UI组件
实现动画或悬停状态
处理视觉细节工作
界面感觉不对劲
npx skills add moumen-soliman/uitripled --skill better-ui -g -y
专注于用户体验文案与界面文本的编写及审查规范，涵盖微复制、按钮标签、错误信息等场景。强调清晰简洁、语气一致及动词优先原则，提升产品可用性与一致性。
UX writing
microcopy
button labels
error messages
reviewing user-facing text
npx skills add moumen-soliman/uitripled --skill better-writing -g -y
指导用户建立设计工程职能，弥合设计与工程团队差距。涵盖角色定义、需求识别、可行性评估及组织架构设计，提供核心原则、关键问题与常见误区，助力快速原型或生产代码交付。
创建设计工程职能
招聘设计工程师
弥合设计与工程团队间的协作鸿沟
npx skills add moumen-soliman/uitripled --skill design-engineering -g -y
基于 Emil Kowalski 的设计工程哲学，专注于 UI 打磨、组件设计、动画决策及提升软件质感的细节优化。提供 taste 培养、隐形细节处理及美学杠杆策略，并规范了 UI 代码审查的 Markdown 表格格式。
UI 界面设计咨询
前端组件交互优化
CSS 动画与过渡效果调整
UI 代码审查与重构建议
npx skills add moumen-soliman/uitripled --skill emil-design-eng -g -y
提供UI界面精细化打磨的设计工程原则，涵盖排版、表面细节、动画及性能优化。用于构建或审查前端组件，解决视觉细节问题，提升交互体验与界面精致度。
构建UI组件
审查前端代码
实现微交互动画
处理视觉细节如阴影、边框、排版
npx skills add moumen-soliman/uitripled --skill make-interfaces-feel-better -g -y
提供21种开箱即用的CSS过渡动画片段，涵盖下拉、模态框、加载骨架屏及微交互。无框架依赖，支持无障碍，适用于前端界面动效实现与优化。
添加过渡动画
平滑打开模态框
实现下拉菜单动画
显示加载骨架屏
图标切换效果
npx skills add moumen-soliman/uitripled --skill transitions-dev -g -y
