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

Super Saiyan: CLI Reference

Visual excellence for command-line interfaces using Click, Typer, Rich, etc.

Stack

• Python: click + rich or typer[all]
• Rust: clap + colored
• Go: cobra + lipgloss

Key Patterns

Beautiful Output (Rich)

from rich.console import Console
from rich.table import Table
from rich.progress import track
from rich.panel import Panel

console = Console()

# Progress
for item in track(items, description="Processing..."):
    process(item)

# Table
table = Table(title="Results", border_style="green")
table.add_column("Name", style="cyan")
table.add_column("Status")
table.add_row("api", "[green]✓[/green]")
console.print(table)

Status Icons

console.print("[green]✓[/green] Success")
console.print("[red]✗[/red] Failed")
console.print("[yellow]⚠[/yellow] Warning")
console.print("[cyan]ℹ[/cyan] Info")

Error Messages

from rich.panel import Panel
console.print(Panel(
    "[red]✗ Error:[/red] Connection failed\n\n[yellow]💡 Check DATABASE_URL[/yellow]",
    border_style="red"
))

Interactive Prompts

from rich.prompt import Prompt, Confirm
name = Prompt.ask("[cyan]Project name[/cyan]", default="my-project")
confirm = Confirm.ask("[cyan]Continue?[/cyan]", default=True)

Checklist

• [ ] Colored output (TTY) / plain (piped)
• [ ] Progress indicators
• [ ] Clear success/error messages
• [ ] --help with examples
• [ ] Shell completions
• [ ] Fast startup (<100ms)

Super Saiyan: Docs Reference

Visual excellence for documentation sites using MkDocs, Hugo, Docusaurus.

Stack

• Python: mkdocs-material
• Go: hugo
• React: docusaurus

MkDocs Material Config

theme:
  name: material
  palette:
    - scheme: default
      primary: blue
      accent: cyan
      toggle:
        icon: material/brightness-7
        name: Dark mode
    - scheme: slate
      primary: blue
      accent: cyan
      toggle:
        icon: material/brightness-4
        name: Light mode

  features:
    - navigation.instant
    - navigation.tabs
    - search.suggest
    - content.code.copy

markdown_extensions:
  - pymdownx.highlight
  - pymdownx.superfences
  - admonition
  - toc:
      permalink: true

Typography

:root {
  --font-body: 'Inter', sans-serif;
  --font-code: 'JetBrains Mono', monospace;
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --leading-relaxed: 1.625;
}

Admonitions

!!! note "Title"
    Content here

!!! tip "Pro Tip"
!!! warning "Caution"
!!! danger "Breaking Change"

Checklist

• [ ] Clear homepage
• [ ] Quick start (<5 min)
• [ ] Searchable
• [ ] Syntax highlighting
• [ ] Copy code buttons
• [ ] Dark mode
• [ ] Mobile-friendly
• [ ] Load time <2s

Super Saiyan: TUI Reference

Visual excellence for terminal UIs using Textual, Ratatui, Bubbletea.

Stack

• Python: textual + rich
• Rust: ratatui + crossterm
• Go: bubbletea + lipgloss

Key Patterns

Textual CSS

Screen { background: #0a0e27; }

.card {
    border: tall cyan;
    background: #1a1f3a;
    padding: 1 2;
}

.card:hover {
    border: tall bright_cyan;
    background: #242945;
}

/* Animations */
.panel { opacity: 0; offset-y: 5; }
.panel.visible {
    opacity: 1; offset-y: 0;
    transition: opacity 300ms, offset-y 300ms ease_out;
}

Rich Theme

from rich.theme import Theme
theme = Theme({
    "primary": "bold bright_blue",
    "success": "bold bright_green",
    "error": "bold bright_red",
    "muted": "dim white",
})

Progress & Status

with console.status("[cyan]Loading...", spinner="dots"):
    do_work()

console.print("[green]✓[/green] Done")
console.print("[red]✗[/red] Failed")

Data Tables

table = Table(title="Status", border_style="bright_blue")
table.add_column("Agent", style="cyan")
table.add_column("Status", justify="center")
table.add_row("reviewer", "[green]●[/green] Active")

Keyboard Bindings (Textual)

BINDINGS = [
    Binding("q", "quit", "Quit"),
    Binding("ctrl+k", "palette", "Commands"),
]

Checklist

• [ ] Rich colors (not just white/black)
• [ ] Smooth transitions
• [ ] Keyboard shortcuts with hints
• [ ] Tab navigation
• [ ] Status bar with live updates
• [ ] Instant response (<16ms)
• [ ] No flicker

Super Saiyan: Web Reference

Visual excellence for web interfaces using React, Vue, Tailwind, Framer Motion.

Animation (Framer Motion)

import { motion } from "framer-motion";

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: -20 }}
  transition={{ duration: 0.3, ease: "easeOut" }}
>
  Content
</motion.div>

Timing

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

Tailwind Patterns

// Card with hover
<div className="bg-white rounded-lg shadow-md p-6 
  hover:shadow-lg transition-shadow duration-200">

// Button
<button className="bg-blue-500 hover:bg-blue-600 text-white 
  px-4 py-2 rounded-md transition-colors duration-150">

// Loading skeleton
<div className="animate-pulse bg-gray-200 rounded h-4 w-32">

State Indicators

// Success
<span className="text-green-500">✓</span>

// Error  
<span className="text-red-500">✗</span>

// Loading
<div className="animate-spin h-5 w-5 border-2 border-blue-500 
  border-t-transparent rounded-full">

Accessibility

• Contrast: 4.5:1 text, 3:1 UI
• Focus visible: focus:ring-2 focus:ring-blue-500
• Motion: motion-reduce:transition-none
• Keyboard: all interactive elements focusable

Checklist

• [ ] 60fps animations
• [ ] Loading/error/success states
• [ ] Keyboard navigation
• [ ] WCAG AA contrast
• [ ] Reduced motion support
• [ ] Mobile responsive