mobile-android-design작성자 Seth Hobson

Mobile Android Design 스킬.

모바일 앱 디자인을 위한 Claude Code 및 Codex skill: Material Design 3 및 Jetpack Compose를 활용한 네이티브 Android UI입니다.

모바일 앱
UI 코드

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 기능

Claude Code와 Codex에서 mobile-android-design 스킬이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

이 스킬은 에이전트가 Material Design 3(Material You)과 Jetpack Compose를 사용해 네이티브 Android 애플리케이션을 구축하도록 가르칩니다. Compose UI 레이아웃 구현, Navigation Compose를 활용한 Android 내비게이션 패턴, 폰·태블릿·폴더블용 적응형 레이아웃, 다이내믹 컬러를 적용한 Material 3 테마, 접근성을 갖춘 Android 인터페이스, Android 고유의 제스처 및 인터랙션을 다룹니다.

이 스킬은 Google의 Material Design 가이드라인을 따르고 다양한 화면 구성을 처리하면서 Android 생태계와 원활하게 통합되는 현대적이고 적응형인 Android 애플리케이션을 만드는 데 중점을 둡니다.

UI 코드

예시 프롬프트 보기 ↗

작동 방식

01
Material 3 테마 적용하기
MaterialTheme.colorScheme을 통해 색상에 접근하여 다크 모드를 자동으로 지원하고, Android 12 이상에서 개인화를 위한 다이내믹 컬러를 활성화합니다.
02
Compose UI 컴포넌트 구축하기
적절한 상태 호이스팅을 갖춘 Jetpack Compose 패턴을 사용해 재사용 가능하고 테스트 가능한 컴포저블을 만듭니다.
03
적응형 레이아웃 구현하기
WindowSizeClass를 사용해 폰, 태블릿, 폴더블 기기에서 적응되는 반응형 디자인을 만듭니다.
04
접근성 지원 추가하기
모든 인터랙티브 요소에 contentDescription을 제공하고, 접근성 준수를 위해 최소 48dp의 터치 타겟을 보장합니다.
05
상태를 올바르게 처리하기
구성 변경 중 상태 손실을 방지하기 위해 remember와 rememberSaveable을 적절히 사용합니다.

02 적합성 확인

mobile-android-design 스킬을 사용하는 경우

이러한 종류의 모바일 앱 디자인 작업일 때 Claude Code 또는 Codex에서 mobile-android-design 스킬을 사용하십시오. 적합성과 한계는 스킬 자체 파일에서 가져왔습니다.

적합한 경우

Material Design 3 가이드라인을 따르는 Android 앱 인터페이스 디자인하기
네이티브 Android 애플리케이션을 위한 Jetpack Compose UI 및 레이아웃 구축하기
폰, 태블릿, 폴더블 기기에서 작동하는 적응형 레이아웃 만들기
Navigation Compose를 사용한 Android 내비게이션 패턴 구현하기
적절한 터치 타겟과 콘텐츠 설명을 갖춘 접근성 있는 Android 인터페이스 구축하기

03 스킬 내부

mobile-android-design 스킬이 Claude Code와 Codex에 부여하는 규칙

1 SKILL.md가 에이전트에 설정하는 구체적인 지침, 기본값, 제한 — 결과를 바꾸는 파일 부분입니다.

긴 목록을 위한 LazyColumn
길게 스크롤되는 목록을 표시할 때는 성능 문제를 방지하기 위해 Column 대신 LazyColumn을 사용합니다.

04 활용하기

Claude Code 또는 Codex에 mobile-android-design 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용자의 에이전트에 mobile-android-design 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal

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

plugins/ui-design/skills/mobile-android-design/SKILL.md에 대한 일반적인 skills CLI 형식이며, 저장소가 자체 경로를 문서화할 수도 있습니다.

스킬에 첫 모바일 앱 디자인 작업 부여

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

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 코드로 제공됩니다.
에이전트는 결과를 생성하기 전에 계획이나 기록에서 mobile-android-design 스킬의 이름을 언급합니다.
사용자의 콘텐츠, 이름 및 숫자는 출력에서 변경되지 않습니다.

OpenDesign에서는 SKILL.md 링크로 mobile-android-design을 가져옵니다: Plugins → Add → Skill → Import from link, 이후 상단 바에서 선택합니다.

OpenDesign 다운로드 빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
스킬 파일: 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 내부

이 스킬을 사용해야 하는 경우Material Design 3, Compose UI, 내비게이션, 적응형 레이아웃, 테마, 접근성에 대한 시나리오를 나열합니다
핵심 개념분량 제한으로 인해 상세 기술 콘텐츠는 references/details.md로 이동되었습니다
빠른 시작 컴포넌트Material Design 3 스타일을 적용한 ItemListCard의 완전한 Compose 코드 예시를 제공합니다
모범 사례테마, 다이내믹 컬러, 레이아웃, 접근성, 상태, 프리뷰를 다루는 여덟 가지 구체적인 규칙
일반적인 문제재구성, 상태 손실, 성능, 테마 누수, 내비게이션, 메모리 누수 등 여섯 가지 자주 발생하는 문제

스킬 자체 설명

"네이티브 Android 앱 구축을 위한 Material Design 3 및 Jetpack Compose 패턴을 마스터합니다. Android 인터페이스 디자인, Compose UI 구현 또는 Google의 Material Design 가이드라인을 따를 때 사용합니다."

SKILL.md의 front-matter 설명입니다. 전체 파일은 약 3,797자입니다. GitHub에서 전체 파일 읽기.

Mobile Android Design

실제 모바일 앱 디자인 작업에서 mobile-android-design을 실행합니다.

OpenDesign를 다운로드하고, SKILL.md 링크에서 mobile-android-design을 가져온 다음, 위 프롬프트를 붙여넣고 결과 전에 계획을 읽습니다.

OpenDesign 다운로드 모든 스킬 보기

터미널

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