home / skills / nickcrew / claude-cortex / visual-modes

visual-modes skill

safe

This skill activates visual enhancement modes for UI showcases and provides mode-specific checklists to ensure performance and accessibility.

npx playbooks add skill nickcrew/claude-cortex --skill visual-modes

Review the files below or copy the command above to add this skill to your agents.

Files (4)

SKILL.md

1.1 KB

---
name: visual-modes
description: Use when activating visual showcase modes (supersaiyan, kamehameha, over9000) for UI or interaction design - provides mode-specific enhancement checklists.
---

# Visual Modes

## Overview
Apply the appropriate visual enhancement mode and follow its checklist for UI and interaction design.

## When to Use
- Activating Super Saiyan, Kamehameha, or Over 9000 visual modes
- Designing high-impact UI showcases

Avoid when:
- The target is non-visual or text-only output

## Quick Reference

| Mode | Load reference |
| --- | --- |
| Super Saiyan | `skills/visual-modes/references/supersaiyan.md` |
| Kamehameha | `skills/visual-modes/references/kamehameha.md` |
| Over 9000 | `skills/visual-modes/references/over9000.md` |

## Workflow
1. Select the visual mode.
2. Load the matching reference.
3. Apply the required enhancements and safeguards.
4. Validate performance and accessibility.

## Output
- Mode activation summary
- Key enhancements applied

## Common Mistakes
- Ignoring performance/accessibility constraints
- Mixing modes without documenting rationale

Overview

This skill provides mode-specific enhancement checklists for activating visual showcase modes (Super Saiyan, Kamehameha, Over 9000) to guide UI and interaction design. It helps teams apply consistent visual rules, performance safeguards, and accessibility checks when switching into high-impact presentation states. Use it to ensure dramatic visual modes are implemented reliably and responsibly.

How this skill works

Choose a visual mode and load its checklist of required enhancements, constraints, and validation steps. The skill inspects visual changes, enforces performance and accessibility safeguards, and produces a concise mode activation summary with applied enhancements. It also highlights potential conflicts when multiple modes are used together and recommends mitigations.

When to use it

Activating a dramatic visual mode for a demo or product showcase
Designing high-impact UI transitions or interaction states
Validating performance and accessibility after enabling intensive visuals
Preparing release notes or developer handoffs for visual mode changes
Avoid when output is strictly non-visual or text-only

Best practices

Select one primary mode per interaction context and document any mixing rationale
Run automated performance tests (frame rate, memory, GPU) before enabling on production devices
Include accessibility fallbacks: reduced motion, high-contrast variants, and semantic labels
Limit effect duration and provide user controls to disable or tone down visuals
Profile across target devices and network conditions to set safe defaults

Example use cases

Demoing a flagship feature with Super Saiyan visuals while ensuring 60 FPS on target devices
Applying Kamehameha energy effects for a modal reveal with keyboard and screen reader fallbacks
Using Over 9000 mode for analytics dashboards to emphasize extreme values without breaking layout
Preparing QA checklists and release notes that list enhancements, safeguards, and expected performance metrics
Creating a CLI or TUI command to toggle modes and emit a validation report

FAQ

What outputs does the skill generate?

A concise mode activation summary, a list of key enhancements applied, and any warnings or suggested mitigations.

How should I handle accessibility when enabling dramatic visuals?

Always provide reduced-motion and high-contrast options, expose toggles in settings, and include semantic descriptions for screen readers.