UI Degamifier

UI Degamifier

Transform gaming/cyberpunk aesthetics into professional, accessible design.

When to Use

Use this skill when:

• CSS has glowing text-shadow or box-shadow effects
• UI has neon colors or excessive visual effects
• Need to implement Apple/Stripe-like clean design
• Ensuring WCAG AA accessibility compliance
• Converting cyberpunk theme to corporate styling

Instructions

Step 1: Identify Gaming Effects

Scan CSS files for these patterns:

• text-shadow with glow effects (e.g., 0 0 20px rgba(0, 243, 255, 0.3))
• box-shadow with large blur radius (e.g., 0 0 15px cyan)
• Neon colors (bright cyan, magenta, lime green)
• Heavy animations and transforms
• Excessive gradients

Step 2: Replace with Professional Styling

Text Shadows

Before (Gaming):

text-shadow: 0 0 20px rgba(0, 243, 255, 0.3);

After (Professional):

/* Clean professional design - no glowing effects */

Box Shadows

Before (Gaming):

box-shadow: 0 0 15px rgba(0, 243, 255, 0.1);

After (Professional):

box-shadow: 0 0 0 3px rgba(0, 243, 255, 0.15); /* Subtle border effect */

Button Hover Effects

Before (Gaming):

.button:hover {
  box-shadow: 0 4px 15px rgba(0, 243, 255, 0.4);
}

After (Professional):

.button:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Step 3: Ensure Light/Dark Mode Compatibility

Keep both themes but make them professional:

Light Mode:

• White backgrounds (#fff)
• Black text (#000 or dark gray)
• Subtle shadows (rgba(0,0,0,0.1))
• Professional borders

Dark Mode:

• Semi-transparent dark backgrounds
• White text (#fff)
• Minimal glows (only for focus states)
• Readable contrast

Step 4: Verify Accessibility

Check WCAG AA compliance:

• Text contrast ratio: 4.5:1 minimum
• Large text (18px+): 3:1 minimum
• Interactive elements clearly distinguishable
• Focus states visible

Example Transformation

Input CSS (Gaming):

.title {
  color: #0ff;
  text-shadow: 0 0 20px rgba(0, 243, 255, 0.3), 0 0 40px rgba(0, 243, 255, 0.2);
  font-family: "Orbitron", monospace;
}

.card {
  background: rgba(10, 11, 30, 0.8);
  border: 2px solid #0ff;
  box-shadow: 0 0 30px rgba(0, 243, 255, 0.5), inset 0 0 20px rgba(0, 243, 255, 0.2);
}

Output CSS (Professional):

.title {
  color: var(--ifm-color-primary);
  /* Clean professional design */
  font-family: "Inter", sans-serif;
}

.card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--ifm-color-emphasis-200);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .card {
  background: rgba(30, 30, 30, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
}

Files Typically Modified

• *.module.css - Component-specific styles
• *.css - Global styles
• Theme files
• CSS-in-JS styled components

Professional Color Palettes

Replace neon colors with:

Neutral Professional:

• Primary: #2563eb (blue)
• Gray scale: #f9fafb to #111827
• Success: #10b981
• Error: #ef4444

Corporate:

• Primary: #1e40af (deep blue)
• Secondary: #64748b (slate)
• Accent: #0891b2 (teal)

Apple-like:

• Primary: #007aff
• Gray: #8e8e93
• Background: #f2f2f7 (light), #1c1c1e (dark)

Quality Checklist

After degamification, verify:

• ✅ No glowing text-shadow effects
• ✅ Box-shadows use subtle, professional values
• ✅ Colors are muted, not neon
• ✅ Light mode has good contrast (dark text on light bg)
• ✅ Dark mode is readable (light text on dark bg)
• ✅ Animations are minimal and purposeful
• ✅ Fonts are professional (Inter, Roboto, SF Pro, not Orbitron)

Preservation Guidelines

Keep these elements:

• Hover states (but make them subtle)
• Focus indicators (required for accessibility)
• Transition effects (if smooth and professional)
• Border radius (maintains modern feel)

Remove these elements:

• All glowing effects
• Neon colors
• Excessive animations
• Cyberpunk fonts
• Heavy gradients