Imported from nickcrew/claude-cortex (skills/super-saiyan/SKILL.md). Install upstream with npx skills add nickcrew/claude-cortex --skill super-saiyan. Copyright stays with the author.

Super Saiyan 🔥

Name: super-saiyan
Author: nickcrew

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

{ "ocm": "1", "id": "nickcrew-claude-cortex-super-saiyan", "kind": "skill", "name": "super-saiyan", "description": "Maximum visual excellence for any UI platform. Use when building user interfaces, styling components, or polishing visual elements.", "publisher": "nickcrew", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "ui-excellence", "visual-polish", "animation", "super", "saiyan", "super-saiyan", "skills-sh" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "Maximum visual excellence for any UI platform. Use when building user interfaces, styling components, or polishing visual elements." ], "primary": false, "metadata": { "source": { "provider": "skills.sh", "repository": "https://github.com/nickcrew/claude-cortex", "path": "skills/super-saiyan/SKILL.md", "ref": "HEAD", "url": "https://github.com/nickcrew/claude-cortex/blob/HEAD/skills/super-saiyan/SKILL.md", "key": "nickcrew/claude-cortex/skills/super-saiyan/SKILL.md" } }, "instructions": "# Super Saiyan 🔥\n\nVisual excellence skill for any UI platform.\n\n## Core Laws\n1. **Accessibility First** - Beautiful AND inclusive (WCAG 2.1 AA minimum)\n2. **Performance Always** - 60fps animations, instant response\n3. **Delight Users** - Purposeful micro-interactions\n\n## Apply To Every UI Element\n- Smooth state transitions (200-300ms, ease-out)\n- Clear visual hierarchy and spacing\n- Loading/error/success states\n- Keyboard navigation\n- Accessible contrast (4.5:1 text, 3:1 UI)\n\n## Animation Timing\n- Instant: <100ms (micro-interactions)\n- Fast: 100-200ms (hovers)\n- Normal: 200-300ms (transitions)", "cost": { "context_tokens": 395 } }

super-saiyan

About