Remove gaming aesthetics (glowing effects, neon shadows, cyberpunk styling) from CSS and replace with professional, clean design. Use when code has distracting visual effects or when implementing corporate/professional UI design. Ensures WCAG AA accessibility.
Transform gaming/cyberpunk aesthetics into professional, accessible design.
Use this skill when:
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)Before (Gaming):
text-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
After (Professional):
/* Clean professional design - no glowing effects */
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 */
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);
}
Keep both themes but make them professional:
Light Mode:
Dark Mode:
Check WCAG AA compliance:
.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);
}
.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);
}
*.module.css - Component-specific styles*.css - Global stylesReplace neon colors with:
Neutral Professional:
Corporate:
Apple-like:
After degamification, verify:
Keep these elements:
Remove these elements: