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.