super-saiyan
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.mdskills/super-saiyan/references/tui.mdskills/super-saiyan/references/cli.mdskills/super-saiyan/references/docs.md
More from nickcrew/claude-cortex
owasp-top-10
OWASP Top 10 security vulnerabilities with detection and remediation patterns. Use when conducting security audits, implementing secure coding practices, or reviewing code for common security vulnerabilities.
10codanna-codebase-intelligence
Use codanna MCP tools for semantic code search, call graphs, and impact analysis before grep/find.
4mermaid-diagramming
>-
3python-testing-patterns
Python testing patterns and best practices using pytest, mocking, and property-based testing. Use when writing unit tests, integration tests, or implementing test-driven development in Python projects.
3tutorial-design
>-
2python-performance-optimization
Python performance optimization patterns using profiling, algorithmic improvements, and acceleration techniques. Use when optimizing slow Python code, reducing memory usage, or improving application throughput and latency.
2