Saucebox Registry
← Browse

@nickcrew/super-saiyan

A

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

skillclaude

Install

agr install @nickcrew/super-saiyan --target claude

Writes 1 file into .claude/skills/, pinned to git-d721d3e8.

  • .claude/skills/super-saiyan/SKILL.md

Document

name: super-saiyan description: Maximum visual excellence for any UI platform. Use when building user interfaces, styling components, or polishing visual elements. keywords:

  • UI excellence
  • visual polish
  • animation
  • super
  • saiyan
  • 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

Trustgrade A

  • passBody integrity

    Whether the stored document is plausibly the kind of file the artifact declares, rather than something fetched by mistake.

  • passType matchnot applicable to this artifact type

    Whether the artifact is really the kind of thing its metadata claims it is.

  • passFreshness

    How long since the source repository was last pushed to.

  • passPrompt injection

    Scans the artifact's own text for instructions aimed at your agent rather than at you.

  • passLicense

    Whether the source repository declares an SPDX license permissive enough to redistribute.

How the grade is calculated

Each check contributes 0 points when it passes, 1 when it warns, and 2 when it fails. The total maps to a letter:

  • Aevery check passed
  • Bone warning
  • Ctwo warnings
  • Dprompt injection or body integrity failed, or three warnings
  • Fone of those failed, and something else is wrong

These are automated hygiene checks, not a security audit, and not a dependency or vulnerability scan. A grade of A means nothing was flagged — not that the artifact is safe.

Versions

  • git-d721d3e8f5862026-07-31