Glassmorphism

# Implement Glassmorphism in your agent

## Objective
Create this surface with glassmorphism. Use semi-transparent panels with backdrop-filter, a visible colorful backdrop, a 1px light edge, and soft shadows. Provide a near-opaque fallback when blur or transparency is reduced.

## Prerequisites
- Inspect existing components, tokens, and brand constraints.
- Confirm that this style fits the surface and content.
- Preserve existing structure, semantics, and interactions.

## Behavior and surfaces
- Frosted panels — A semi-transparent surface blurs what passes behind it without hiding it completely.
- Visible vivid backdrop — An image or saturated gradient remains visible through the panels and carries the palette.
- Thin light edge — A subtle light stroke separates the glass from neighboring surfaces.
- Floating layers — Wide soft shadows show several stacked sheets of glass.

## States
- Cover existing default, hover, focus, active, disabled, loading, and error states.
- Provide a static state when reduced motion is requested.

## Accessibility
- Measure contrast against the worst backdrop region, not its average color.
- Provide a near-opaque surface when transparency or blur is unavailable.
- Do not let blur be the only signal separating two interactive regions.

## When not to use
- Stacking text, forms, and glass cards over an unpredictable backdrop.
- Applying glass to every surface until hierarchy disappears.

## Acceptance criteria
- An editorial or media surface with a controlled backdrop and little critical text.
- A secondary layer that should remain visually connected to the content behind it.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

• Requires · Existing tokens, components, and brand constraints

# Audit Glassmorphism on the real surface

## Objective
Check that Glassmorphism remains consistent, accessible, and measured on the components that actually use it.

## Checks
- Compare interactive states and fallbacks.
- Check contrast, focus, and reduced motion.
- Report visual effects that weaken hierarchy or performance.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

sha256:1150b3f8282fc9bc45ea730e2cd1e20661870e9e54d752fa6db923452b4b1e85

# Debug Glassmorphism in your agent

## Observed symptom
[DESCRIBE THE SYMPTOM HERE]

## Observable checks
- Compare the surface with the documented visual signals.
- Verify contrast, focus, reduced motion, and fallback behavior.
- Isolate the visual layer without changing functional structure.

## Possible causes
- The style hides hierarchy or reduces contrast.
- The effect is applied to too many surfaces or depends on an unavailable API.
- An interactive state is no longer perceivable.

## Bounded corrections
Repair this glassmorphism without adding more glass. Make the backdrop visible, limit the treatment to secondary surfaces, increase opacity behind text, and add a fallback without backdrop-filter.

## Final verification
- Measure contrast against the worst backdrop region, not its average color.
- Provide a near-opaque surface when transparency or blur is unavailable.
- Do not let blur be the only signal separating two interactive regions.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

• Requires · Existing tokens, components, and brand constraints

# Prevent Glassmorphism drift

## Objective
Turn the visual fix into a reusable rule and focused check without freezing the whole interface.

## Checks
- Isolate the responsible tokens or variants.
- Add focused evidence for the affected states.
- Compare nearby styles before widening the rule.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

sha256:4875f8006e4d14082233d6162830b8e329d73572c29026697c0713dbb8338d5f