Agent-Skills.md

Agent Skills: Super Saiyan 🔥

Maximum visual excellence for any UI platform. Use when building user interfaces, styling components, or polishing visual elements.

UncategorizedID: NickCrew/claude-cortex/super-saiyan

Repository

NickCrew/claude-cortex
NickCrewLicense: MIT
93

Install this agent skill to your local

pnpm dlx add-skill https://github.com/NickCrew/claude-cortex/tree/HEAD/skills/super-saiyan

Skill Files

Browse the full folder contents for super-saiyan.

Download Skill

Loading file tree…

skills/super-saiyan/SKILL.md

Skill Metadata

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