Claude Code용 스킬: Material Design 3 UI

Claude Code의 Material Design 3 전문 스킬: UI 생성 및 감사 기능

Claude Code의 material-3-skill은 UI 컴포넌트 생성, 테마 적용, 코드 감사를 MD3 규격에 맞춰 간소화합니다. ~/.claude/skills/에 설치한 후 /material-3 명령으로 활성화하세요. Jetpack Compose를 최우선으로 지원하며, Flutter는 부분 지원, 웹은 제한적입니다.

네 가지 핵심 모드:

• 설명으로부터 컴포넌트 생성.
• 시드 컬러로 ColorScheme 생성.
• 적응형 Scaffold 구축.
• 앱 소스 코드 감사.

로그인 폼 생성 예시:

/material-3 component 이메일과 비밀번호 필드가 포함된 로그인 폼 생성

결과: MaterialTheme, OutlinedTextField, FilledButton, 적절한 간격과 MD3 엘리베이션 적용된 Compose 코드.

테마 및 Scaffold 생성

테마 명령어로 완전한 ColorScheme 생성:

/material-3 theme 시드 컬러 #1A73E8로 테마 생성

출력: primary, secondary, tertiary, surface, error 등과 onPrimary, primaryContainer 변형 포함. Material You 톤 팔레트를 활용한 다크 모드 지원.

앱 스켈레톤용:

/material-3 scaffold 네비게이션 포함 반응형 쉘 생성

모바일은 하단 네비게이션, 태블릿은 네비게이션 레일, 데스크톱은 네비게이션 드로어로 적응형 레이아웃 생성. MD3 브레이크포인트 적용.

참조 파일 구조

스킬에는 m3.material.io와 AndroidX Compose Material3의 핵심 데이터가 압축되어 있습니다:

material-3-skill/
├── SKILL.md
├── references/
│   ├── color-system.md
│   ├── component-catalog.md
│   ├── theming-and-dynamic-color.md
│   ├── typography-and-shape.md
│   ├── navigation-patterns.md
│   └── layout-and-responsive.md
├── CONTRIBUTING.md
└── LICENSE (MIT)

파일에는 토큰 테이블, 30+ 컴포넌트 템플릿(Compose 매핑), 브레이크포인트, 표준 레이아웃이 포함됩니다.

코드 감사: 10개 검사 카테고리

감사 기능은 ./app/src/main 같은 디렉토리를 스캔하며 코드를 다음 기준으로 평가합니다:

• 컬러 토큰 — 하드코딩 대신 MaterialTheme.colorScheme.primary 사용.
• 타이포그래피 — MaterialTheme.typography 스타일 적용.
• 쉐이프 — small, medium, large, extraLarge 토큰.
• 엘리베이션 — 컴포넌트별 그림자 레벨.
• 컴포넌트 — 커스텀 대신 표준 사용.
• 레이아웃 — 반응형 및 표준 패턴.
• 네비게이션 — 화면 크기별 타입.
• 모션 — 표현력 있는 전환.
• 접근성 — 대비, 터치 타겟, 콘텐츠 설명.
• 테마 — 동적 컬러, 다크 모드.

보고서에는 점수, 문제점, 줄별 수정 사항이 포함됩니다.

플랫폼 지원 및 M3 Expressive

| 플랫폼 | 지원 수준 |

|-----------------|------------------------------|

| Jetpack Compose | 완전 지원, Expressive 포함 |

| Flutter | ThemeData(useMaterial3: true), ColorScheme.fromSeed |

| 웹 | 제한적, Expressive 미지원 |

M3 Expressive(2025년 5월 출시)는 타이포그래피 강조, 쉐이프 변형, 모션을 추가합니다. 스킬은 지원 매트릭스를 제공: Compose 완전, Flutter 부분, 웹 미지원.

설치 및 제한 사항

클론 후 복사:

git clone https://github.com/hamen/material-3-skill.git
cp -r material-3-skill ~/.claude/skills/material-3

업데이트를 위한 심링크:

ln -s /path/to/material-3-skill ~/.claude/skills/material-3

제한 사항:

• Compose 우선, Flutter/웹은 보조.
• Google 업데이트에 약간 지연 가능.
• 디자인 결정(시드 컬러 선택, FAB 위치)은 대체 불가.

주요 요약

• MD3 토큰 엄격 준수 코드 생성으로 수동 검증 생략.
• 10개 카테고리 감사와 구체적 수정 제안.
• 중고급 개발자를 위한 M3 Expressive 지원 매트릭스.
• 빠른 규격 조회용 참조 파일.
• 웹 지원 솔직 평가 — 과장 없음.

— Editorial Team