Super Saiyan 🔥

Visual excellence skill for any UI platform.

Core Laws

1. Accessibility First – Beautiful AND inclusive (WCAG 2.1 AA minimum)
2. Performance Always – 60fps animations, instant response
3. Delight Users – Purposeful micro-interactions

Apply To Every UI Element

• Smooth state transitions (200-300ms, ease-out)
• Clear visual hierarchy and spacing
• Loading/error/success states
• Keyboard navigation
• Accessible contrast (4.5:1 text, 3:1 UI)

Animation Timing

• Instant: <100ms (micro-interactions)
• Fast: 100-200ms (hovers)
• Normal: 200-300ms (transitions)
• Slow: 300-500ms (emphasis)

Platform Patterns

Web (React/Vue)

• Framer Motion for animations
• CSS transitions for simple states
• Skeleton loaders for async content

TUI (Textual/Ratatui)

• Smooth redraws, no flicker
• Spinners and progress bars
• Color theming

CLI (Rich/Click)

• Colors for status
• Progress bars for long ops
• Checkmarks for success

Docs

• Fast load times
• Clean typography
• Responsive layout

Quality Checklist

• Visual hierarchy clear
• Contrast accessible (4.5:1 text, 3:1 UI)
• Animations smooth (60fps)
• Keyboard navigation works
• States handled (loading/error/success)

NOT About

• ❌ Gratuitous animations
• ❌ Sacrificing performance
• ❌ Ignoring accessibility

Platform-Specific References

Load detailed patterns when needed:

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