playbooks

home / skills / nickcrew / claude-cortex / super-saiyan

super-saiyan skill

/skills/super-saiyan

This skill elevates user interfaces with accessible, high-performance visual design and delightful micro-interactions across web, TUI, CLI, and docs.

npx playbooks add skill nickcrew/claude-cortex --skill super-saiyan

Review the files below or copy the command above to add this skill to your agents.

Files (5)
SKILL.md
1.7 KB
---
name: super-saiyan
description: Maximum visual excellence for any UI platform. Use when building user interfaces, styling components, or polishing visual elements.
---

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

Overview

This skill delivers guidance and patterns for achieving maximum visual excellence across web, TUI, CLI, and documentation platforms. It codifies accessibility, performance, and purposeful delight into concrete design and implementation rules. Use it to standardize UI styling, animations, states, and platform-specific polish.

How this skill works

The skill inspects UI decisions and recommends concrete changes: contrast ratios, timing values, state handling, keyboard behavior, and animation techniques. It provides platform-aware patterns (React/Vue, Textual/Ratatui, Rich/Click, docs) and a compact quality checklist to validate visual readiness. It maps problems to actionable fixes like skeleton loaders, accessible color swaps, animation durations, and performance safeguards.

When to use it

  • Designing or reviewing component visual styles
  • Implementing state handling (loading/error/success) for components
  • Adding or tuning animations and micro-interactions
  • Polishing platform-specific interfaces (web, TUI, CLI, docs)
  • Validating accessibility and performance before release

Best practices

  • Prioritize accessibility: aim for WCAG 2.1 AA (4.5:1 text, 3:1 UI) for colors and contrast
  • Keep animations purposeful and performant: target 60fps and use timing tiers (instant <100ms, normal 200–300ms)
  • Design clear visual hierarchy and consistent spacing for readable layouts
  • Handle all states explicitly: loading, error, empty, and success with distinct visuals
  • Prefer native or lightweight animation solutions (CSS transitions, Framer Motion) and avoid gratuitous effects

Example use cases

  • Review a React component library for contrast, keyboard focus, and motion timing
  • Add skeleton loaders and progressive reveal to async pages to improve perceived performance
  • Tune CLI output with colors, progress bars, and clear success/failure markers
  • Polish a TUI app to eliminate redraw flicker and add smooth, themed transitions
  • Audit docs site typography, responsive layout, and load performance before launch

FAQ

What are the non-negotiable rules?

Accessibility first (WCAG 2.1 AA), maintain 60fps animations, and keep interactions purposeful—never sacrifice performance or inclusion for visuals.

How do I choose animation durations?

Use tiers: instant <100ms for micro-interactions, 100–200ms for hover feedback, 200–300ms for transitions, and 300–500ms only for emphasis.