Super Saiyan 🔥
Visual excellence skill for any UI platform.
Core Laws
- •Accessibility First - Beautiful AND inclusive (WCAG 2.1 AA minimum)
- •Performance Always - 60fps animations, instant response
- •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