Agent skill

super-saiyan

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

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/super-saiyan

SKILL.md

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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results