muno-claude-plugin 1.7.0 → 1.8.0

package/templates/skills/app-design/reference/design-system-template.md

@@ -0,0 +1,628 @@
+# 디자인 시스템 템플릿
+
+이 템플릿은 앱의 디자인 시스템을 정의할 때 사용합니다.
+
+---
+
+## 1. Foundation (기초)
+
+### Color Palette
+
+#### Primary Colors
+```
+Primary:
+  - 50: #E3F2FD
+  - 100: #BBDEFB
+  - 500: #2196F3 (Main)
+  - 700: #1976D2
+  - 900: #0D47A1
+
+Secondary:
+  - 50: #F3E5F5
+  - 500: #9C27B0 (Main)
+  - 900: #4A148C
+```
+
+#### Neutral Colors
+```
+Gray:
+  - 50: #FAFAFA
+  - 100: #F5F5F5
+  - 200: #EEEEEE
+  - 300: #E0E0E0
+  - 400: #BDBDBD
+  - 500: #9E9E9E
+  - 600: #757575
+  - 700: #616161
+  - 800: #424242
+  - 900: #212121
+```
+
+#### Semantic Colors
+```
+Success: #4CAF50
+Warning: #FF9800
+Error: #F44336
+Info: #2196F3
+```
+
+### Typography
+
+#### Font Family
+```
+Primary: -apple-system, SF Pro, Roboto, sans-serif
+Monospace: SF Mono, Consolas, monospace
+```
+
+#### Font Scale
+```
+Display Large: 57px / 64px / Regular
+Display Medium: 45px / 52px / Regular
+Display Small: 36px / 44px / Regular
+
+Headline Large: 32px / 40px / Bold
+Headline Medium: 28px / 36px / Bold
+Headline Small: 24px / 32px / Bold
+
+Title Large: 22px / 28px / Medium
+Title Medium: 16px / 24px / Medium
+Title Small: 14px / 20px / Medium
+
+Body Large: 16px / 24px / Regular
+Body Medium: 14px / 20px / Regular
+Body Small: 12px / 16px / Regular
+
+Label Large: 14px / 20px / Medium
+Label Medium: 12px / 16px / Medium
+Label Small: 11px / 16px / Medium
+```
+
+### Spacing Scale (8pt Grid)
+
+```
+0: 0px
+1: 4px
+2: 8px
+3: 12px
+4: 16px
+5: 20px
+6: 24px
+8: 32px
+10: 40px
+12: 48px
+16: 64px
+20: 80px
+```
+
+### Border Radius
+
+```
+None: 0px
+XS: 4px
+SM: 8px
+MD: 12px
+LG: 16px
+XL: 24px
+XXL: 32px
+Full: 9999px
+```
+
+### Shadows
+
+```
+Elevation 1:
+  iOS: 0 1px 2px rgba(0, 0, 0, 0.06)
+  Android: 0 1px 3px rgba(0, 0, 0, 0.12)
+
+Elevation 2:
+  iOS: 0 2px 8px rgba(0, 0, 0, 0.08)
+  Android: 0 3px 6px rgba(0, 0, 0, 0.16)
+
+Elevation 3:
+  iOS: 0 4px 16px rgba(0, 0, 0, 0.12)
+  Android: 0 10px 20px rgba(0, 0, 0, 0.19)
+
+Elevation 4:
+  iOS: 0 8px 24px rgba(0, 0, 0, 0.16)
+  Android: 0 14px 28px rgba(0, 0, 0, 0.25)
+```
+
+---
+
+## 2. Components (컴포넌트)
+
+### Button
+
+#### Variants
+
+**Primary Button**
+```
+Background: Primary 500
+Text: White
+Height: 48dp/pt
+Padding: 16dp/pt horizontal
+Border Radius: 12dp/pt
+Font: Label Large, Medium
+
+States:
+- Default: Background Primary 500
+- Hover: Background Primary 700
+- Pressed: Opacity 0.7
+- Disabled: Opacity 0.3, Background Gray 200
+- Loading: Spinner + Disabled state
+```
+
+**Secondary Button**
+```
+Background: Transparent
+Border: 1px solid Primary 500
+Text: Primary 500
+Height: 48dp/pt
+Padding: 16dp/pt horizontal
+Border Radius: 12dp/pt
+Font: Label Large, Medium
+
+States:
+- Default: Border Primary 500
+- Hover: Background Primary 50
+- Pressed: Opacity 0.7
+- Disabled: Opacity 0.3
+```
+
+**Text Button**
+```
+Background: Transparent
+Text: Primary 500
+Height: 48dp/pt
+Padding: 8dp/pt horizontal
+Font: Label Large, Medium
+
+States:
+- Default: Text Primary 500
+- Hover: Background Primary 50
+- Pressed: Opacity 0.7
+- Disabled: Opacity 0.3
+```
+
+### Input Field
+
+```
+Background: White
+Border: 1px solid Gray 300
+Border Radius: 8dp/pt
+Height: 48dp/pt
+Padding: 12dp/pt horizontal
+Font: Body Large
+
+States:
+- Default: Border Gray 300
+- Focus: Border Primary 500, Shadow Elevation 1
+- Error: Border Error, Helper text in Error color
+- Disabled: Background Gray 100, Opacity 0.5
+- Success: Border Success
+
+Label:
+- Position: Above input or Floating
+- Font: Label Medium
+- Color: Gray 700
+
+Helper Text:
+- Font: Label Small
+- Color: Gray 600
+- Error: Error color
+```
+
+### Card
+
+```
+Background: White
+Border Radius: 16dp/pt
+Padding: 16dp/pt
+Shadow: Elevation 2
+
+Variants:
+- Outlined: Border 1px solid Gray 200, No shadow
+- Elevated: Shadow Elevation 2
+- Filled: Background Gray 50
+
+States:
+- Default
+- Hover: Shadow Elevation 3
+- Pressed: Opacity 0.95
+```
+
+### List Item
+
+```
+Height: Min 56dp/pt
+Padding: 16dp/pt horizontal, 12dp/pt vertical
+Background: Transparent
+
+Layout:
+- Leading Icon (optional): 24dp/pt × 24dp/pt
+- Text Area:
+  - Primary Text: Body Large
+  - Secondary Text: Body Medium, Gray 600
+- Trailing Element (optional): Icon, Text, or Switch
+
+States:
+- Default
+- Hover: Background Gray 50
+- Pressed: Background Gray 100
+- Selected: Background Primary 50
+
+Divider:
+- Height: 1px
+- Color: Gray 200
+- Inset: 16dp/pt from leading edge
+```
+
+### Bottom Sheet
+
+```
+Background: White
+Border Radius: 24dp/pt (top corners only)
+Max Height: 90% of screen
+Shadow: Elevation 4
+
+Header:
+- Handle: 32dp/pt × 4dp/pt, Gray 300, Centered
+- Padding: 16dp/pt
+
+Content:
+- Padding: 24dp/pt horizontal
+- Scrollable
+
+States:
+- Collapsed
+- Expanded
+- Dismissing (Slide down animation)
+
+Animation:
+- Duration: 300ms
+- Easing: ease-out
+```
+
+### Modal Dialog
+
+```
+Background: White
+Border Radius: 16dp/pt
+Max Width: 280dp/pt (iOS), 320dp/pt (Android)
+Padding: 24dp/pt
+
+Layout:
+- Title: Headline Small, Center aligned
+- Content: Body Medium, 16dp/pt top margin
+- Actions: 24dp/pt top margin
+  - iOS: Horizontal, Right aligned
+  - Android: Horizontal, Right aligned
+
+Backdrop:
+- Background: rgba(0, 0, 0, 0.5)
+- Tap to dismiss (optional)
+
+Animation:
+- Fade in: 200ms
+- Scale: 0.95 → 1.0
+```
+
+---
+
+## 3. Patterns (패턴)
+
+### Navigation
+
+#### Tab Bar (iOS) / Navigation Bar (Android)
+
+```
+Height:
+- iOS: 49pt + Safe Area
+- Android: 80dp
+
+Items: 2-5 items
+
+Item:
+- Icon: 24dp/pt × 24dp/pt
+- Label: Label Small
+- Active: Primary 500, Filled Icon
+- Inactive: Gray 600, Outlined Icon
+
+States:
+- Active: Primary color, Label visible
+- Inactive: Gray color
+- Disabled: Opacity 0.3
+```
+
+#### Top App Bar
+
+```
+Height:
+- iOS: 44pt (Small), 96pt (Large Title)
+- Android: 56dp (Small), 112dp (Medium), 152dp (Large)
+
+Layout:
+- Leading: Back button or Menu icon
+- Title: Headline Small or Large
+- Trailing: Action icons (max 3)
+
+Variants:
+- Small: Title only
+- Large: Large title with collapse on scroll
+- Center: Title center-aligned (iOS)
+```
+
+### Loading States
+
+#### Skeleton Screen
+
+```
+Background: Gray 100
+Animation: Shimmer effect
+  - Gradient: Gray 100 → Gray 200 → Gray 100
+  - Duration: 1.5s
+  - Infinite loop
+
+Layout:
+- Mimic actual content layout
+- Rounded rectangles for text
+- Circles for avatars
+- Cards for content blocks
+```
+
+#### Progress Indicators
+
+```
+Circular Spinner:
+- Size: 24dp/pt (Small), 32dp/pt (Medium), 48dp/pt (Large)
+- Color: Primary 500
+- Animation: 360° rotation, 1s duration
+
+Linear Progress:
+- Height: 4dp/pt
+- Background: Gray 200
+- Foreground: Primary 500
+- Animation: Indeterminate or Determinate
+
+Pull to Refresh:
+- Trigger distance: 80dp/pt
+- Spinner: 32dp/pt
+- Animation: Fade in + Rotate
+```
+
+### Empty States
+
+```
+Layout:
+- Icon/Illustration: 120dp/pt × 120dp/pt, Center
+- Title: Headline Small, 24dp/pt top margin
+- Description: Body Medium, Gray 600, 8dp/pt top margin
+- Action Button (optional): 24dp/pt top margin
+
+Tone:
+- Friendly and helpful
+- Suggest next action
+- Avoid negative language
+```
+
+### Error States
+
+```
+Layout:
+- Icon: Error color, 48dp/pt × 48dp/pt
+- Title: Headline Small, Error color
+- Message: Body Medium, Gray 700
+- Action Buttons:
+  - Primary: "Retry" or "Go Back"
+  - Secondary: "Contact Support" (optional)
+
+Types:
+- Network Error: "No connection" icon
+- Server Error: "500" icon
+- Not Found: "404" icon
+- Permission Denied: Lock icon
+```
+
+---
+
+## 4. Motion (모션)
+
+### Duration
+
+```
+Instant: 100ms (Toggle, Switch)
+Quick: 200ms (Hover, Focus)
+Standard: 300ms (Transition, Modal)
+Emphasized: 500ms (Complex change)
+```
+
+### Easing
+
+```
+Standard: cubic-bezier(0.4, 0.0, 0.2, 1)
+Decelerate: cubic-bezier(0.0, 0.0, 0.2, 1)
+Accelerate: cubic-bezier(0.4, 0.0, 1, 1)
+Sharp: cubic-bezier(0.4, 0.0, 0.6, 1)
+```
+
+### Transitions
+
+```
+Fade:
+- Duration: 200ms
+- Opacity: 0 → 1
+
+Slide:
+- Duration: 300ms
+- Transform: translateX(100%) → translateX(0)
+- Easing: Standard
+
+Scale:
+- Duration: 200ms
+- Transform: scale(0.95) → scale(1)
+- Easing: Decelerate
+
+Shared Element:
+- Duration: 300ms
+- Hero animation between screens
+- Maintain element position and size
+```
+
+---
+
+## 5. Accessibility (접근성)
+
+### Color Contrast
+
+```
+WCAG AA:
+- Normal Text: 4.5:1
+- Large Text (18pt+): 3:1
+- Interactive Elements: 3:1
+
+WCAG AAA:
+- Normal Text: 7:1
+- Large Text: 4.5:1
+```
+
+### Touch Targets
+
+```
+Minimum Size:
+- iOS: 44pt × 44pt
+- Android: 48dp × 48dp
+
+Spacing: Min 8dp/pt between targets
+```
+
+### Focus Indicators
+
+```
+Outline:
+- Width: 2px
+- Color: Primary 500
+- Offset: 2px
+- Border Radius: Match element
+```
+
+### Screen Reader
+
+```
+Labels:
+- Descriptive and concise
+- Include state (e.g., "Selected", "Expanded")
+- Avoid redundant words
+
+Reading Order:
+- Logical and sequential
+- Match visual hierarchy
+
+Announcements:
+- Success: "Item saved"
+- Error: "Failed to save. Please try again"
+- Loading: "Loading content"
+```
+
+---
+
+## 6. Dark Mode
+
+### Color Mapping
+
+```
+Light → Dark:
+
+Background:
+  White (#FFFFFF) → Gray 900 (#121212)
+  Gray 50 (#FAFAFA) → Gray 800 (#1E1E1E)
+  Gray 100 (#F5F5F5) → Gray 700 (#2C2C2C)
+
+Surface:
+  White (#FFFFFF) → Gray 800 (#1E1E1E)
+  Elevation 1 → +5% white overlay
+  Elevation 2 → +7% white overlay
+  Elevation 3 → +8% white overlay
+
+Text:
+  Gray 900 (#212121) → White (#FFFFFF)
+  Gray 700 (#616161) → Gray 300 (#E0E0E0)
+  Gray 600 (#757575) → Gray 400 (#BDBDBD)
+
+Primary Color:
+  Lighten by 10-20% for better contrast
+
+Success/Warning/Error:
+  Adjust for WCAG AA contrast
+```
+
+### Dark Mode Specific
+
+```
+Elevation:
+- Replace shadows with lighter overlays
+- Use border to separate elements (1px, rgba(255,255,255,0.12))
+
+Images:
+- Reduce opacity by 10-20%
+- Or provide dark mode variants
+
+Icons:
+- Use outlined style for better visibility
+```
+
+---
+
+## 7. Responsive Design
+
+### Breakpoints
+
+```
+Mobile: 0-599px
+Tablet: 600-1023px
+Desktop: 1024px+
+
+Specific:
+- XS: 0-375px
+- SM: 376-767px
+- MD: 768-1023px
+- LG: 1024-1439px
+- XL: 1440px+
+```
+
+### Grid System
+
+```
+Mobile (XS-SM):
+- Columns: 4
+- Gutter: 16px
+- Margin: 16px
+
+Tablet (MD):
+- Columns: 8
+- Gutter: 24px
+- Margin: 24px
+
+Desktop (LG-XL):
+- Columns: 12
+- Gutter: 24px
+- Margin: Auto (max-width: 1440px)
+```
+
+### Adaptive Layouts
+
+```
+Mobile:
+- Single column
+- Stacked navigation
+- Bottom navigation bar
+
+Tablet:
+- 2-column layout (optional)
+- Side navigation (optional)
+- Bottom or top navigation
+
+Desktop:
+- Multi-column layout
+- Persistent side navigation
+- Top navigation bar
+```