super-saiyan

# 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`