dev-goraebap/material3
misc/skills/material3/SKILL.md
Material Design 3 (M3) 공식 가이드라인 지식 스킬. m3.material.io 전체(foundations·styles·components·develop)를 117페이지 로컬 문서로 보관한다. 레이아웃(웹·모바일 차이, Window Size Classes, Canonical Layouts), 디자인 토큰(Color Roles, Typography Scale, Shape, Elevation, Motion), 컴포넌트 38종 overview를 포함. 기술스택 독립적 M3 전문가 에이전트를 위한 참조 지식 팩. Triggers — "M3 규격", "머테리얼 디자인", "Material3", "m3 컴포넌트", "m3 색상 토큰", "m3 레이아웃", "m3 타이포", "m3 모션".
development
Updated Apr 30, 2026
$ install --global
skillsauthnpx skillsauth add dev-goraebap/skills material3Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 30, 2026, 3:17 AM15.2s119 files scanned
SKILL.md
- name:
- material3
- description:
- >-
- license:
- Apache-2.0
- author:
- dev-goraebap
- version:
- 1.0
- source:
- https://m3.material.io
- fetched_at:
- 2026-04-29
- pages:
- 117
material3
Material Design 3 공식 가이드라인 지식 팩.
실제 내용은 references/ 하위 파일에 있으며, 질문 유형에 따라 필요한 파일만 로드한다 (Progressive Disclosure).
라우팅 테이블
질문 유형 → 먼저 읽어야 할 파일:
| 질문 유형 | 1순위 파일 | 보조 파일 |
|----------|-----------|---------|
| M3 개요·용어·전체 맥락 | references/index.md | references/foundations/glossary.md |
| 레이아웃 원리 (column, grid, spacing) | references/foundations/layout/understanding-layout/overview.md | references/foundations/layout/understanding-layout/parts-of-layout.md |
| Window Size Classes (compact/medium/expanded) | references/foundations/layout/applying-layout/window-size-classes.md | references/foundations/layout/applying-layout/pane-layouts.md |
| Canonical Layouts (list-detail, feed, pane) | references/foundations/layout/canonical-layouts/overview.md | references/foundations/layout/canonical-layouts/list-detail.md |
| 웹·모바일 반응형 차이, 밀도 | references/foundations/layout/understanding-layout/density.md | references/foundations/layout/understanding-layout/hardware-considerations.md |
| RTL·국제화 레이아웃 | references/foundations/layout/understanding-layout/bidirectionality-rtl.md | — |
| 디자인 토큰 개요·사용법 | references/foundations/design-tokens/overview.md | references/foundations/design-tokens/how-to-use-tokens.md |
| 색상 시스템·Color Roles | references/styles/color/system/how-the-system-works.md | references/styles/color/roles.md |
| Dynamic Color | references/styles/color/dynamic/choosing-a-source.md | references/styles/color/dynamic/user-generated-source.md |
| 색상 커스터마이징·테마 | references/styles/color/static/custom-brand.md | references/styles/color/advanced/overview.md |
| 색상 접근성·대비 | references/foundations/designing/color-contrast.md | — |
| 타이포그래피 스케일 | references/styles/typography/type-scale-tokens.md | references/styles/typography/applying-type.md |
| 폰트·서체 | references/styles/typography/fonts.md | references/styles/typography/overview.md |
| Shape (corner radius) | references/styles/shape/overview-principles.md | references/styles/shape/corner-radius-scale.md |
| Elevation | references/styles/elevation/overview.md | references/styles/elevation/tokens.md |
| Motion·애니메이션 | references/styles/motion/overview/how-it-works.md | references/styles/motion/easing-and-duration/applying-easing-and-duration.md |
| 화면 전환·Transitions | references/styles/motion/transitions/transition-patterns.md | references/styles/motion/transitions/applying-transitions.md |
| 인터랙션 상태 (hover, focus, pressed) | references/foundations/interaction/states/overview.md | references/foundations/interaction/states/applying-states.md |
| 제스처·입력 | references/foundations/interaction/gestures.md | references/foundations/interaction/inputs.md |
| 커스터마이징·브랜딩 | references/foundations/customization.md | references/foundations/adaptive-design.md |
| 특정 컴포넌트 (예: Button) | references/components/<name>/overview.md | — |
| 전체 컴포넌트 목록 | references/components/index.md | references/components/all-buttons.md |
| 아이콘 | references/styles/icons/overview.md | references/styles/icons/applying-icons.md |
| Android/Flutter/Web 구현 | references/develop/<platform>.md | — |
파일 구조
references/
├── index.md ← 전체 목차 (117페이지)
├── foundations/
│ ├── glossary.md ← M3 용어 사전
│ ├── adaptive-design.md
│ ├── customization.md
│ ├── design-tokens/ ← overview + how-to-use-tokens
│ ├── designing/ ← color-contrast, elements, flow, overview, structure
│ ├── interaction/ ← gestures, inputs, selection, states/*
│ ├── layout/
│ │ ├── understanding-layout/ ← overview, parts-of-layout, spacing, density,
│ │ │ hardware-considerations, bidirectionality-rtl
│ │ ├── applying-layout/ ← window-size-classes ⭐, pane-layouts ⭐,
│ │ │ compact, medium, expanded, large-extra-large
│ │ └── canonical-layouts/ ← overview ⭐, list-detail ⭐, feed, supporting-pane
│ ├── overview/ ← principles, assistive-technology
│ ├── usability/
│ └── writing/ ← best-practices, text-resizing, text-truncation
├── styles/
│ ├── color/
│ │ ├── system/ ← overview, how-the-system-works ⭐
│ │ ├── dynamic/ ← choosing-a-source, user-generated-source, content-based-source
│ │ ├── static/ ← baseline, custom-brand
│ │ ├── advanced/ ← overview, adjust-existing-colors, apply-colors, define-new-colors
│ │ ├── roles.md ⭐ ← Color Roles 전체 목록
│ │ ├── choosing-a-scheme.md
│ │ └── resources.md
│ ├── typography/ ← overview, type-scale-tokens ⭐, fonts, applying-type, editorial-treatments
│ ├── shape/ ← overview-principles, corner-radius-scale, shape-morph
│ ├── elevation/ ← overview, tokens, applying-elevation
│ ├── motion/
│ │ ├── overview/ ← how-it-works ⭐, specs
│ │ ├── easing-and-duration/ ← applying-easing-and-duration, tokens-specs
│ │ └── transitions/ ← transition-patterns ⭐, applying-transitions
│ └── icons/ ← overview, applying-icons, designing-icons
├── components/
│ ├── index.md ← 38개 컴포넌트 목록
│ ├── all-buttons.md ← 버튼 계열 비교
│ └── <component>/overview.md ← 각 컴포넌트 (38종)
└── develop/
├── android/ ← jetpack-compose, mdc-android
├── flutter.md
└── web.md
⭐ = M3 전문가가 가장 먼저 읽어야 할 핵심 파일
수집 정보
- 원본: https://m3.material.io
- 수집일: 2026-04-29
- 방법: Chrome SPA 자동 순회 (Angular 라우터 활용, 118페이지 → 1개 실패 제외 117개)
- 제외: Blog(112p), 상세 Spec(픽셀 수치), Accessibility 세부, Content Design(UX 라이팅)
Related Skills
dev-goraebap/domain-classroom
testing
VerifiedTrustedCommunity
도메인 일반 패턴을 강의 모드로 가르치는 인지과학 기반 학습 스킬. AI가 가상 도메인 전문가(선생님) 역할을 하고 사용자가 학생으로 낯선 도메인을 차근차근 배운다. 메뉴로 시작해서 페이즈를 골라 잠수 → 능동 회상 Q&A → 자기 설명(Feynman) 순서로 진행. Dunlosky 메타분석 기반 인지과학 8원칙(Cognitive Load, Practice Testing, 정교화 질문, Self-Explanation, Schema 연결, Dual Coding, Desirable Difficulty, 분산 학습)을 본문에 명시 적용. 도메인의 법령·산업 표준·인증을 학습 본문에 정식 통합 (출처 인용이 아니라 학습 대상). AI가 판단해 보편적이고 자료 풍부한 도메인은 자료 요청 없이 진행, 좁고 깊은 도메인일 때만 사용자에게 자료 있는지 묻기. 산출물은 학습 노트 스타일 (진도 체크박스 + 페이즈별 일관 구조 + 출처 링크). 페르소나 강요 없이 보편 액터 표현("사원 A", "관리자 A"). bigpicture의 이전 단계로 작동하거나 단독 사용 가능. Triggers — "도메인 학습", "낯선 도메인 가르쳐줘", "이 산업 어떻게 굴러가요", "선생님 모드", "1:1 강의", "도메인 입문", "도메인 일반 패턴", "HR 플랫폼이 뭔지", "이커머스 흐름", "domain classroom", "/domain-classroom".
SKILL.mdUpdated May 12, 2026
dev-goraebap/bigpicture
development
VerifiedTrustedCommunity
빅픽처 이벤트스토밍의 1:1 분석 도구. 학습 단계(domain-classroom)에서 머리에 박힌 도메인 일반 패턴을 클라이언트 시스템에 매핑해 빅픽처 산출물(시간순 도메인 이벤트·페이즈·액터·외부시스템·핫스팟·피벗)을 누적한다. domain-classroom의 학습 노트(docs/learning-notes/{도메인}- classroom.md)와 클라이언트 자료(RFP·요구사항정의서·기존 시스템 스키마)를 입력으로 받아 페이즈 단위로 진행. 페르소나·서사 없는 분석 톤. 도메인 이벤트 판별 4기준(도메인 전문가 관심·비즈니스 상태 변화·법적 의미·다른 흐름 트리거)을 명시 적용해 UI/Telemetry 이벤트 혼입 방지. 이벤트는 한국어 자연어 + Code Identifier 이중 표기. 핫스팟에 ID·답할 위치·확신도 태그 부여. 산출물은 docs/eventstorming.md 단일 파일로 시작, 후속 단계 스킬(process-modeling·software-design)이 추가될 때 폴더로 자연 분기. Initial/Update/Cycle 모드 지원 — 코드 작성 후에도 다시 사이클 가능. Triggers — "빅픽처", "빅픽처 만들어줘", "이벤트스토밍", "도메인 이벤트 정리", "Big Picture EventStorming", "페이즈 매핑", "도메인 산출물 정리", "/bigpicture".
SKILL.mdUpdated May 10, 2026
dev-goraebap/bigpicture-storytime
data-ai
VerifiedTrustedCommunity
빅픽처 이벤트스토밍의 1:1 학습 친화 변형. 그룹 워크샵에서 도메인 전문가가 던지는 이벤트를 받아 적는 대신, AI가 가상 도메인 전문가 역할을 하고 사용자가 학습자로 1:1 인터뷰하며 빅픽처를 누적한다. 산출물(시간순 도메인 이벤트·액터· 외부시스템·핫스팟·피벗)은 빅픽처 이벤트스토밍과 거의 동일하지만, 한 보드에 한 번에 펼치는 방식이 아니라 **한 액터·한 챕터씩 시간순 서사로 누적**한다. 각 장면마다 "왜 이게 필요한가?" 설명을 곁들여 학습자가 따라올 수 있게 한다. RFP·요구사항정의서·기존 도메인 자료를 입력으로 받거나, 자료가 없으면 AI 사전 리서치(보편 사례·법령·산업 표준)로 보충해 진행. 페르소나 시점의 챕터 단위 (5~7개 장면) + 확신도 태그 [확실/일반론/추측]로 검증 지점 명시 + 사용자 인터랙션 + 액터 전환으로 빅픽처를 점진적으로 채운다. 산출물 저장은 옵셔널 — 이해 자체가 목적이다. Triggers — "낯선 도메인 이해", "도메인 차근차근 알려줘", "1:1 빅픽처", "솔로 이벤트스토밍", "RFP 분석", "비즈니스 흐름 이해", "액터 시나리오", "신규 프로젝트 도메인 파악", "빅픽처 스토리타임", "bigpicture storytime", "/bigpicture-storytime".
SKILL.mdUpdated May 9, 2026
dev-goraebap/pg-query
databases
VerifiedTrustedCommunity
PostgreSQL DB에 직접 접근하는 스킬. DB 조회, 테이블 구조 확인, 데이터 검증이 필요할 때 사용한다. Node.js 스크립트로 직접 연결하며 접속 정보는 환경변수 또는 credentials 파일에서 읽는다. "postgres 조회", "DB 확인", "테이블 구조", "pg-query", "쿼리 실행", "데이터 검증", "PostgreSQL 접속" 같은 요청에 트리거한다.
SKILL.mdUpdated May 8, 2026