Menu
Complete procedure for applying Prism Glass Pro glassmorphism theme to a Tailwind/React/Electron app
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
| 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