Menu
Complete procedure for applying Prism Glass Pro glassmorphism theme to a Tailwind/React/Electron app
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | prism-glass-pro-redesign |
| description | Complete procedure for applying Prism Glass Pro glassmorphism theme to a Tailwind/React/Electron app |
| source | auto-skill |
| extracted_at | 2026-06-06T10:38:00.000Z |
When transforming a Tailwind + React app to a dark glassmorphism aesthetic with cyan/purple neon accents, frameless window, Material Symbols icons, and Three.js globe.
background-deep: #05050Aprimary-fixed (cyan): #14fbfbsecondary-container (purple): #7000ffaccent-magenta: #FF0055status-success: #4ade80on-surface (text): #dbe4e3on-surface-variant (muted): #b9cac9text-muted: #8B949Eborder-glass: rgba(255, 255, 255, 0.15)surface-glass: rgba(255, 255, 255, 0.05)surface-glass-hover: rgba(255, 255, 255, 0.1).glass-panel { background: rgba(255,255,255,0.05); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.15); }
.glass-header { same as glass-panel but border-bottom }
.glass-nav { same as glass-panel but border-right }
.shimmer { position:relative; overflow:hidden; }
.shimmer::after { content:''; position:absolute; top:0; left:-150%; width:50%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent); animation:shimmer 4s infinite linear; }
.input-glass { color:#dbe4e3 !important; background-color:rgba(0,0,0,0.2) !important; border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:0.5rem 1rem; font-family:'Outfit',sans-serif; }
.input-glass:focus { border-color:rgba(20,251,251,0.5); box-shadow:0 0 0 3px rgba(20,251,251,0.1); }
.btn-cyan { background:#14fbfb; color:#002020; box-shadow:0 0 20px rgba(20,251,251,0.4); border-radius:12px; padding:0.5rem 1rem; font-weight:600; }
.btn-glass { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.15); color:#b9cac9; }
.nav-link { color:rgba(185,202,201,0.7); font-weight:500; padding:12px 16px; border-radius:12px; }
.nav-link:hover { background:rgba(255,255,255,0.1); color:#dbe4e3; }
.nav-link.active { background:rgba(255,255,255,0.1); color:#14fbfb; border-right:2px solid #14fbfb; }
.badge-glass { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:#b9cac9; text-transform:uppercase; font-size:10px; }
.badge-cyan { background:rgba(20,251,251,0.1); border-color:rgba(20,251,251,0.2); color:#14fbfb; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade80; }
.drag-region { -webkit-app-region:drag; }
.drag-region button,.drag-region input,.drag-region select,.drag-region a { -webkit-app-region:no-drag; }
<div class="prism-bg">
<div class="prism-glow-1" /> <!-- cyan radial gradient, blur(80px), pulse-glow animation -->
<div class="prism-glow-2" /> <!-- purple radial gradient, blur(80px), pulse-glow reverse -->
</div>
Both .prism-glow-1 and .prism-glow-2 use position:absolute with large radial gradients and blur. Animated with @keyframes pulse-glow.
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />
Replace all lucide-react imports with Material Symbols spans:
<span className="material-symbols-outlined">icon_name</span>
Common mappings: Clipboard→content_copy, MessageSquare→chat, Zap→bolt/auto_awesome, Star→star, Settings→settings, Trash2→delete, Plus→add, Search→search, X→close, Camera→camera, Info→info, ExternalLink→open_in_new
In electron/main.js BrowserWindow config:
frame: false,
titleBarStyle: 'hidden',
Add .drag-region CSS to header for window dragging, with no-drag on interactive elements.
three, three-globetransform:scale() down to desired display sizetry/catch for atmosphere API (three-globe v2 uses setters: globe.showAtmosphere = true)drop-shadow filter for cyan glowAdd all Prism colors as custom colors, Outfit/JetBrains Mono as font families, display-lg/headline-md/body-lg/body-sm/label-xs/code-snippet font sizes, and glow shadows.
bg-surface, border-border/50, card, text-text, text-text-muted, badge-text, badge-code, input-field)false to avoid double title barcolor (white-on-white happens without !important)Find and fix WCAG 2.2 accessibility issues. Two modes — report (sweep a codebase or page, produce a prioritized written report, no edits) and fix (audit→edit→verify loop on a target). Prefers direct-CDP live-DOM auditing; falls back to HTML-string audits.
Diff a live page's accessibility violations against a baseline — by default compares uncommitted changes (stash-based), or pass --branch [<name>] to diff against a branch. Reports only new violations introduced, violations fixed, and pre-existing count. Use `scan` for a full audit with no diffing.
Audit a live page for accessibility issues and locate each violation precisely — pass a URL, a config target name (e.g. `accesslint:scan dev`), or nothing to use the default target from accesslint.config.json. Ensures a debuggable Chrome, runs the @accesslint/core engine via CDP, and returns a worklist of live-DOM WCAG violations grounded to each violation's DOM selector and source file:line. Locates; doesn't edit — output drives fixes by Claude. Use it for "is this page accessible", or to verify a UI change. For diffing against uncommitted changes or a branch, use the `diff` skill.
Diagnose when AI features silently return 'Offline' or 'no API key' despite valid settings
Remove native title bar double-rendering in Electron by setting `frame: false` and using CSS `-webkit-app-region` for window dragging
When a utility exports a boolean constant but a component imports and calls it as a function — `isNative()` instead of `isNative` — causes "is not a function" at render time