mcpField
S
super-saiyan

super-saiyan

github.com/nickcrew设计与 UI6268 次安装17 周前更新
代码仓库

关于 super-saiyan

适用于 Web、终端、CLI 和文档界面的视觉设计技能，强调无障碍、响应性能、清晰的状态呈现与有目的的交互模式。

主要功能

  1. 01无障碍与对比度指导
  2. 02动画时长与过渡效果
  3. 03加载、错误和成功状态
  4. 04键盘导航
  5. 05Web、TUI、CLI 与文档模式

适用场景

  1. 01检查界面无障碍性
  2. 02设计 UI 过渡与反馈
  3. 03提升终端界面可读性
  4. 04检查加载与错误状态

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/nickcrew/claude-cortex --skill super-saiyan

安装后在 Claude Code 中输入/super-saiyan确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
cli.md
docs.md
tui.md
web.md

详细介绍

超级赛亚人 🔥

适用于任何 UI 平台的视觉卓越技能。

核心准则

  1. 无障碍优先 - 既美观又包容（至少符合 WCAG 2.1 AA）
  2. 始终注重性能 - 动画达到 60fps，响应迅速
  3. 带给用户愉悦体验 - 有目的的微交互

适用于每个 UI 元素

  • 流畅的状态过渡（200-300ms，缓出）
  • 清晰的视觉层级和间距
  • 加载/错误/成功状态
  • 键盘导航
  • 符合无障碍要求的对比度（文本 4.5:1，UI 3:1）

动画时长

  • 即时：<100ms（微交互）
  • 快速：100-200ms（悬停）
  • 正常：200-300ms（过渡）
  • 缓慢：300-500ms（强调）

平台模式

Web（React/Vue）
  • 使用 Framer Motion 制作动画
  • 简单状态使用 CSS 过渡
  • 异步内容使用骨架屏加载器
TUI（Textual/Ratatui）
  • 平滑重绘，不闪烁
  • 微调器和进度条
  • 色彩主题
CLI（Rich/Click）
  • 用颜色表示状态
  • 长时间操作显示进度条
  • 成功时显示勾号
文档
  • 加载迅速
  • 排版整洁
  • 响应式布局

质量检查清单

  • 视觉层级清晰
  • 对比度符合无障碍要求（文本 4.5:1，UI 3:1）
  • 动画流畅（60fps）
  • 键盘导航正常
  • 已处理各种状态（加载/错误/成功）

不包括

  • ❌ 无意义的动画
  • ❌ 牺牲性能
  • ❌ 忽视无障碍要求

平台专属参考

需要时加载详细模式：

  • skills/super-saiyan/references/web.md
  • skills/super-saiyan/references/tui.md
  • skills/super-saiyan/references/cli.md
  • skills/super-saiyan/references/docs.md

评论

支持 Markdown