display-ai-glasses-with-jetpack-compose-glimmer

Generate GlimmerTheme-wrapped Compose UI for Android Display AI Glasses.

2|Updated Apr 26, 2026
One-click install
npx skills add https://github.com/iadr-dev/colab --skill display-ai-glasses-with-jetpack-compose-glimmer-iadr-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: display-ai-glasses-with-jetpack-compose-glimmer
Source: https://github.com/iadr-dev/colab/tree/main/skills/coding/android/xr/display-ai-glasses-with-jetpack-compose-glimmer
Command: npx skills add https://github.com/iadr-dev/colab --skill display-ai-glasses-with-jetpack-compose-glimmer-iadr-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents low-legibility, non-compliant UI design when you build projected Android experiences for Display AI Glasses by enforcing Glimmer-specific layout, theming, focus, and additive-display constraints.

Core Features & Use Cases

  • Glimmer-first UI rules: Uses GlimmerTheme and Jetpack Compose Glimmer components instead of MaterialTheme/Material.
  • Projected Activity requirements: Ensures correct setup for an AI Glasses projected activity, including launching and integration patterns via ProjectedContext.
  • Additive display safety: Enforces mandatory pure black backgrounds to avoid blocking the real world.
  • XR interaction model: Guides mapping of tap/swipe and focus behavior to the glasses’ interaction and one-dimensional focus model.
  • Design constraints for readability: Enforces minimum text sizing (18sp / 0.6°), safe typography usage (Google Sans Flex), and contrast expectations.
  • Depth, components, and layout patterns: Specifies DepthEffect/DepthEffectLevels usage and best-practice composition patterns for cards, buttons, stacks, lists, title chips, icons, and surfaces.

Quick Start

Use the skill guidelines to implement a projected Android activity that renders GlimmerTheme-wrapped UI with a pure black root background, then validate focus behavior and text sizing for the glasses form factor.

Frequently Asked Questions about display-ai-glasses-with-jetpack-compose-glimmer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build Jetpack Compose UI for AI glasses projected activities?

To build AI glasses projected UI, wrap Compose components in GlimmerTheme, use ProjectedContext for integration, and enforce pure black backgrounds for additive display legibility.

Why do I need pure black backgrounds for additive displays on AI glasses?

Pure black backgrounds are mandatory for additive displays because non-black pixels add light to the real world, blocking the physical environment and causing severe legibility failures.

Can I use MaterialTheme and Material components for XR projected activities?

You cannot use MaterialTheme or Material components for XR projected activities. You must use GlimmerTheme and Jetpack Compose Glimmer components to ensure correct layout and focus behavior.

How do I manage XR focus and tap-and-swipe navigation on AI glasses?

Manage XR focus by implementing one-dimensional focus initialization and mapping tap-and-swipe interactions to the glasses form factor using Glimmer component behaviors.

What are the typography and sizing constraints for AI glasses projected UI?

Typography constraints for AI glasses projected UI require using Google Sans Flex, enforcing minimum text sizing of 18sp or 0.6 degrees, and maintaining specific contrast expectations for readability.

How do I create visual hierarchy without Material components in Glimmer?

Create visual hierarchy in Glimmer by using DepthEffect and DepthEffectLevels to structure cards, buttons, stacks, lists, title chips, icons, and surfaces instead of relying on Material elevation.