# Glass Dark UI Demo Prompts

## Minimal prompt

Use $glass-dark-ui to create a polished standalone HTML example that clearly demonstrates the skill.

## Recreate the demo

Use $glass-dark-ui to build a responsive reference demo for this capability:

> Build dark-mode glassmorphism interfaces with readable contrast, frosted surfaces, and gradient borders using a pseudo-element mask. Use when asked for glass cards, frosted dark hero sections, blur panels, or dark UI systems with gradient/glow borders.

### Direction

Compare the treatment across a hero surface, compact control, and detail card.

Use an art-directed composition with one clear focal point, restrained supporting copy, and enough surrounding interface to show how the technique behaves in a real product or landing page.

### Canonical example

- Show the treatment on a large Depth without noise surface, one compact metric card, and one control.
- Use the same edge, shadow, blur, or masking logic consistently across all three scales.

### Deliverable

- Create demo/index.html as a standalone document.
- Keep CSS and JavaScript inline.
- Put any required images, fonts, models, textures, or vendor files in demo/assets/.
- Do not add a framework, package manager, build step, or node_modules.
- Add controls only when they help inspect or replay the technique.

### Acceptance checks

- Keep the demo responsive from 390px through 1440px.
- Use semantic HTML, visible focus states, and reduced-motion handling.
- Keep all HTML, CSS, and JavaScript inside demo/index.html.
- Use only relative local asset paths.
- Preserve readable contrast at the softest and strongest treatment levels.
- Avoid clipping focus rings or interactive content.

## Remix prompt

Use $glass-dark-ui and keep the same implementation contract, but change the subject, copy, palette, and content hierarchy. Preserve the core technique, accessibility behavior, responsive rules, and performance constraints demonstrated by the reference.