UI/UX Engineering

Implement Android UI/UX design systems, complex patterns, and accessibility standards.

9|1|Updated Jan 26, 2026
One-click install
npx skills add https://github.com/BryantChi/Android-Skills --skill ui-ux-engineering
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: UI/UX Engineering
Source: https://github.com/BryantChi/Android-Skills/tree/main/ui_ux_engineering
Command: npx skills add https://github.com/BryantChi/Android-Skills --skill ui-ux-engineering

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the creation and maintenance of user interfaces by providing structured guidance on design systems, complex UI patterns, and accessibility standards, ensuring a consistent and inclusive user experience.

Core Features & Use Cases

  • Design System Implementation: Guides the setup of themes, spacing, typography, and color tokens.
  • Complex UI Patterns: Provides code examples for implementing advanced UI elements like collapsing toolbars and shared element transitions.
  • Accessibility (a11y): Offers best practices for semantic properties, TalkBack testing, and handling decorative images.
  • Adaptive Layouts: Demonstrates how to create responsive UIs based on window size classes.

Quick Start

Use the UI/UX Engineering skill to implement a collapsing toolbar with the provided code examples.

Frequently Asked Questions about UI/UX Engineering

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

FAQPage Schema
How do I implement a design system in Android with Figma token synchronization?

To implement a design system in Android, set up theme architecture, spacing systems, and color tokens, then synchronize Figma tokens to ensure UI consistency. This provides structured guidance for maintaining design tokens across your application.

How do I build adaptive layouts in Android Compose using WindowSizeClass?

Adaptive layouts in Android Compose use WindowSizeClass to create responsive UIs that adjust based on window dimensions. This approach ensures interfaces render correctly across different screen sizes and device configurations.

What are the best practices for Android accessibility semantic properties and TalkBack testing?

Android accessibility best practices involve using semantic properties for screen readers, handling decorative images correctly, and validating with TalkBack testing. A quick checklist ensures compliance with a11y standards for inclusive user experiences.

How do I add a collapsing toolbar and shared element transitions in Jetpack Compose?

Complex UI patterns like collapsing toolbars and shared element transitions in Jetpack Compose are implemented using provided code examples. These patterns enhance navigation continuity and interactive scrolling within your application.

Can I use this UI/UX engineering guidance for both theme architecture and a11y validation?

Yes, this guidance covers both theme architecture setup and a11y validation. It provides structured best practices for design system implementation alongside a quick checklist to validate semantic properties and accessibility compliance.