mcpField
S
super-saiyan

super-saiyan

github.com/nickcrewDesign & UI6268 installsUpdated 17w ago
Repository

About super-saiyan

A visual-design skill for interfaces across web, terminal, CLI, and documentation contexts. It emphasizes accessibility, responsive performance, clear states, and purposeful interaction patterns.

Key features

  1. 01Accessibility and contrast guidance
  2. 02Motion timing and transitions
  3. 03Loading, error, and success states
  4. 04Keyboard navigation
  5. 05Patterns for web, TUI, CLI, and docs

Use cases

  1. 01Reviewing interface accessibility
  2. 02Designing UI transitions and feedback
  3. 03Improving terminal interface readability
  4. 04Checking loading and error states

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/nickcrew/claude-cortex --skill super-saiyan

After installing, type/super-saiyanin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
cli.md
docs.md
tui.md
web.md

Details

From the project README

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

Comments

Markdown supported