스킬 자체의 표현으로
Jetpack Compose Material3을 주요 대상으로 하여 Google의 Material Design 3(Material You) 구현을 안내하며, Flutter와 @material/web을 통한 제한적인 웹 경로도 다룹니다. 색상, 타입스케일, 모양, 고도, 모션을 위한 md.sys 토큰 시스템, 30개 이상의 컴포넌트와 그 변형에 대한 빠른 참조, 적응형 레이아웃과 내비게이션, 테마 설정과 다이나믹 컬러, M3 Expressive 플랫폼 매트릭스, 그리고 접근성을 다룹니다.
감사 모드는 앱이나 페이지를 열 가지 범주에 걸쳐 0-10점으로 채점하고 준수 리포트를 생성합니다. 다섯 가지 윈도우 크기 클래스, 그림자 대신 tonal elevation, 8dp 간격 시스템, 대형 윈도우에서의 최대 콘텐츠 너비 등 구체적인 MD3 기본값이 필요한 디자이너와 개발자를 위한 것입니다.
산출물
- 전체 점수와 범주별 점수, 심각한 문제, 경고, 통과 항목, 우선순위가 매겨진 수정 사항을 포함한 markdown MD3 준수 리포트입니다.
- dynamicLightColorScheme, lightColorScheme 또는 생성된 테마 코드로 제공되는 colorScheme을 사용하여 MaterialTheme으로 구성된 Compose 테마입니다.
- 미디어 쿼리나 클래스로 적용되는 다크 테마 변형을 포함한 md-sys 커스텀 속성으로 구성된 CSS 테마 블록입니다.
작동 방식
- 01스택에서 다르게 지시하지 않는 한 Compose에서 시작합니다
이 파일은 Jetpack Compose Material3을 기본 경로로 취급하며, Decision Tree는 코드를 작성하기 전에 앱 셸, 단일 컴포넌트, 테마, 폼, 내비게이션, 데이터 표시를 특정 섹션과 참조 파일로 안내합니다.
- 02토큰 레이어 적용
모든 MD3 토큰은 md.sys 네임스페이스에 있습니다. Compose는 동일한 시맨틱 역할을 MaterialTheme.colorScheme, typography, shapes에 매핑하며, 웹에서는 md-sys 접두사가 붙은 CSS custom properties에 매핑합니다.
- 03Quick Reference에서 Components 선택하기
컴포넌트 표는 각 컴포넌트의 웹 요소 이름, 주요 variant, 카테고리를 나열하고, @material/web 구현이 없는 항목을 표시하여 표준 HTML과 CSS custom properties로 대신 구현할 수 있도록 합니다.
- 04Common Patterns로 조립하기
App Shell, Card Grid, Form Layout 패턴이 HTML과 CSS로 제공되며, 좁은 폭에서 navigation rail을 bottom navigation으로 전환하는 breakpoint도 포함됩니다.
- 05요청 시 감사(Audit) 수행
audit로 호출되면, 이 skill은 URL, 소스 파일 또는 실행 중인 앱을 검사하고 보고서를 작성하기 전에 열 개 카테고리를 0에서 10점으로 채점합니다.