AI Agent Skill HUB

super-saiyan

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

13 stars
byNickCrew
View on GitHubInstallation ↓

Best use case

super-saiyan is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

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

Teams using super-saiyan should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/super-saiyan/SKILL.md --create-dirs "https://raw.githubusercontent.com/NickCrew/Claude-Cortex/main/skills/super-saiyan/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/super-saiyan/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How super-saiyan Compares

Feature / Agentsuper-saiyanStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

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

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# 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`

Related Skills

We are still matching the closest adjacent skills for this page. In the meantime, continue through the full directory.