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 13
Forks 6

Install this agent skill to your Project

npx add-skill https://github.com/NickCrew/Claude-Cortex/tree/main/skills/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.

NickCrew/Claude-Cortex

claude-consult

Consult Claude specialist agents during implementation for codebase understanding, pattern checking, security review, debugging help, and more. Use this skill whenever you're unsure about conventions, stuck on a failure, or need expert input before writing code. Does not replace the formal review gates in agent-loops — this is for mid-implementation consultation.

13 6
Explore
NickCrew/Claude-Cortex

doc-quality-review

Assess documentation quality across readability, consistency, audience fit, and prose clarity. Produces a scored review with actionable findings. This skill should be used before releases, during doc reviews, or when documentation feels unclear or inconsistent.

13 6
Explore
NickCrew/Claude-Cortex

event-driven-architecture

Event-driven architecture patterns with event sourcing, CQRS, and message-driven communication. Use when designing distributed systems, microservices communication, or systems requiring eventual consistency and scalability.

13 6
Explore
NickCrew/Claude-Cortex

prompt-engineering

Optimize prompts for LLMs and AI systems with structured techniques, evaluation patterns, and synthetic test data generation. Use when building AI features, improving agent performance, or crafting system prompts.

13 6
Explore
NickCrew/Claude-Cortex

compliance-audit

Regulatory compliance auditing across GDPR, HIPAA, PCI DSS, SOC 2, and ISO frameworks with automated evidence collection and gap analysis. Use when conducting compliance assessments, preparing for certifications, or implementing regulatory controls.

13 6
Explore
NickCrew/Claude-Cortex

react-performance-optimization

React performance optimization patterns using memoization, code splitting, and efficient rendering strategies. Use when optimizing slow React applications, reducing bundle size, or improving user experience with large datasets.

13 6
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results