mobile-android-designавтор Seth Hobson

Mobile Android Design Skill.

Навык для Claude Code и Codex в области дизайна мобильных приложений: нативный Android UI с Material Design 3 и Jetpack Compose.

Мобильные приложения
UI-код

Скачать OpenDesign Инструкция по использованию

wshobson/agents · plugins/ui-design/skills/mobile-android-design/SKILL.mdSKILL.md

--- name: mobile-android-design description: Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines. --- ## When to Use This Skill ## Detailed section: Core Concepts ## Quick Start Component ## Best Practices

Преамбула и заголовки разделов прочитаны из исходного файла 2026-09-14 · 3 797 символов полностью

01 Что делает

Что делает skill mobile-android-design в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Этот skill обучает агентов созданию нативных Android-приложений с использованием Material Design 3 (Material You) и Jetpack Compose. Он охватывает реализацию макетов UI на Compose, паттерны навигации Android с Navigation Compose, адаптивные макеты для телефонов, планшетов и складных устройств, тематизацию Material 3 с динамическими цветами, доступные интерфейсы Android и специфичные для Android жесты и взаимодействия.

Skill фокусируется на создании современных, адаптивных Android-приложений, которые беспрепятственно интегрируются с экосистемой Android, следуя рекомендациям Material Design от Google и учитывая различные конфигурации экранов.

UI-код

Смотрите пример запроса ↗

Как это работает

01
Применяйте тематизацию Material 3
Обращайтесь к цветам через MaterialTheme.colorScheme, чтобы автоматически поддерживать тёмный режим и включать динамический цвет на Android 12+ для персонализации.
02
Создавайте компоненты UI на Compose
Создавайте composable-функции, используя паттерны Jetpack Compose с правильным подъёмом состояния (state hoisting), чтобы компоненты были переиспользуемыми и тестируемыми.
03
Реализуйте адаптивные макеты
Используйте WindowSizeClass для создания отзывчивых дизайнов, адаптирующихся под телефоны, планшеты и складные устройства.
04
Добавьте поддержку доступности
Предоставляйте contentDescription для всех интерактивных элементов и обеспечивайте минимальные области касания 48dp для соответствия требованиям доступности.
05
Правильно обрабатывайте состояние
Используйте remember и rememberSaveable по назначению, чтобы предотвратить потерю состояния при изменении конфигурации.

02 Определите своё применение

Когда использовать skill mobile-android-design

Используйте навык mobile-android-design в Claude Code или Codex, когда задача — дизайн мобильного приложения такого рода. Область применения и ограничения ниже взяты из собственного файла навыка.

Хорошо подходит

Проектирование интерфейсов Android-приложений в соответствии с рекомендациями Material Design 3
Создание UI и макетов на Jetpack Compose для нативных Android-приложений
Создание адаптивных макетов, работающих на телефонах, планшетах и складных устройствах
Реализация паттернов навигации Android с использованием Navigation Compose
Создание доступных интерфейсов Android с корректными областями касания и описаниями контента

03 Внутри скилла

Правила, которые Skill mobile-android-design задаёт Claude Code и Codex

1 конкретные инструкции, значения по умолчанию и ограничения, которые SKILL.md задаёт агенту — часть файла, влияющая на результат.

LazyColumn для длинных списков
Используйте LazyColumn вместо Column при отображении длинных прокручиваемых списков, чтобы избежать проблем с производительностью.

04 Применение

Установить mobile-android-design в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавить mobile-android-design в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

npx skills add https://github.com/wshobson/agents --skill mobile-android-design

Общая форма CLI skills для plugins/ui-design/skills/mobile-android-design/SKILL.md; репозиторий может документировать собственный путь.

Дайте скиллу первую задачу по дизайну мобильного приложения

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt

Build a product listing screen for [app name] using Jetpack Compose with Material Design 3. The screen should display a list of [items] with thumbnails, titles, and prices. Use adaptive layout with WindowSizeClass to show a single column on phones and a two-column grid on tablets. Each item card should navigate to a detail screen when tapped. Include proper state hoisting and accessibility support with content descriptions.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Перед принятием результата найдите это в диалоге и файлах:

Результат предоставляется как UI-код, как указывает каталог для этого skill.
Агент называет skill mobile-android-design в своём плане или транскрипте перед выдачей результата.
Ваш собственный контент, имена и числа остаются неизменными в выводе.

В OpenDesign импортируйте mobile-android-design по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: Seth Hobson
Repository: github.com/wshobson/agents Ветка main
Файл skill: plugins/ui-design/skills/mobile-android-design/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 4236bb9
License: MIT Из LICENSE.
Звёзды репозитория: 39 635 Снимок GitHub сделан 2026-09-14 для всего репозитория wshobson/agents, который содержит 18 skill в этом каталоге. Это не рейтинг и не счётчик использования mobile-android-design.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Когда использовать этот skillПеречисляет сценарии для Material Design 3, Compose UI, навигации, адаптивных макетов, тематизации и доступности
Основные концепцииПодробный технический контент перенесён в references/details.md из-за ограничений по размеру
Быстрый старт компонентаСодержит полный пример кода Compose для ItemListCard со стилями Material Design 3
Лучшие практикиВосемь конкретных правил, касающихся тематизации, динамических цветов, макетов, доступности, состояния и предпросмотров
Частые проблемыШесть распространённых проблем: рекомпозиция, потеря состояния, производительность, утечки темы, навигация и утечки памяти

Собственное описание skill

"Освойте паттерны Material Design 3 и Jetpack Compose для создания нативных Android-приложений. Используйте при проектировании интерфейсов Android, реализации UI на Compose или следовании гайдлайнам Material Design от Google."

Описание из front-matter файла SKILL.md. Полный файл составляет около 3797 символов. Читать полный файл на GitHub.

Mobile Android Design

Запустите mobile-android-design на реальной задаче по дизайну мобильного приложения.

Загрузите OpenDesign, импортируйте mobile-android-design по ссылке на SKILL.md, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/wshobson/agents --skill mobile-android-design