---
name: flutter-ux-hardening
description: Flutter 앱의 UI/UX를 계획, 구현, 테스트, 검토하고 반복적으로 강화하는 가이드 에이전트 스킬입니다. Flutter UI 개선, UX 강화, 접근성 개선 요청 시 활성화됩니다.
allowed-tools: Read, Write, Edit, Glob, Grep, Bash
---

# Flutter UX Hardening

Flutter 앱의 UI/UX를 체계적으로 분석하고 개선하는 스킬입니다.

## 기능

### 분석 영역
- **UI 일관성**: 디자인 시스템 준수 여부
- **UX 흐름**: 사용자 여정 최적화
- **접근성**: a11y 지원 (스크린 리더, 색상 대비 등)
- **반응형**: 다양한 화면 크기 대응
- **에지 케이스**: 빈 상태, 로딩, 에러 처리

### 강화 프로세스

1. **계획 (Plan)**
   - 현재 UI/UX 감사
   - 개선 영역 식별
   - 우선순위 설정

2. **구현 (Implement)**
   - 위젯 리팩토링
   - 애니메이션 추가
   - 접근성 속성 추가

3. **테스트 (Test)**
   - 위젯 테스트 작성
   - 통합 테스트 추가
   - 골든 테스트 설정

4. **검토 (Review)**
   - 코드 품질 검사
   - 성능 프로파일링
   - 사용자 피드백 반영

5. **반복 (Iterate)**
   - 지속적 개선
   - A/B 테스트 적용

## 체크리스트

### 접근성 (Accessibility)
```dart
// ✅ Semantics 레이블 추가
Semantics(
  label: '장바구니에 추가',
  child: IconButton(
    icon: Icon(Icons.add_shopping_cart),
    onPressed: _addToCart,
  ),
)

// ✅ 충분한 터치 타겟 크기 (48x48 이상)
SizedBox(
  width: 48,
  height: 48,
  child: IconButton(...),
)

// ✅ 색상 대비 확인
// WCAG AA: 4.5:1 (일반 텍스트), 3:1 (큰 텍스트)
```

### 에지 케이스 처리
```dart
// 빈 상태
if (items.isEmpty) {
  return EmptyStateWidget(
    icon: Icons.inbox,
    title: '항목이 없습니다',
    subtitle: '새 항목을 추가해보세요',
    action: ElevatedButton(
      onPressed: _addItem,
      child: Text('항목 추가'),
    ),
  );
}

// 로딩 상태
if (isLoading) {
  return ShimmerLoadingWidget();
}

// 에러 상태
if (hasError) {
  return ErrorWidget(
    message: error.message,
    onRetry: _retry,
  );
}
```

### 반응형 레이아웃
```dart
LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 900) {
      return DesktopLayout();
    } else if (constraints.maxWidth > 600) {
      return TabletLayout();
    }
    return MobileLayout();
  },
)
```

### 애니메이션
```dart
// 부드러운 전환
AnimatedContainer(
  duration: Duration(milliseconds: 300),
  curve: Curves.easeInOut,
  // ...
)

// 히어로 애니메이션
Hero(
  tag: 'item-${item.id}',
  child: ItemCard(item: item),
)
```

## 리포트 구조

```markdown
# Flutter UX 강화 리포트

## 현재 상태 분석
- UI 일관성: ⭐⭐⭐☆☆
- 접근성: ⭐⭐☆☆☆
- 반응형: ⭐⭐⭐⭐☆
- 에지 케이스 처리: ⭐⭐☆☆☆

## 식별된 개선 영역
1. 접근성 레이블 누락 (15개 위젯)
2. 빈 상태 UI 미구현 (3개 화면)
3. 로딩 스켈레톤 미적용 (5개 리스트)

## 권장 조치
| 우선순위 | 영역 | 조치 |
|----------|------|------|
| 높음 | 접근성 | Semantics 추가 |
| 높음 | 에러 | 에러 바운더리 구현 |
| 중간 | 로딩 | Shimmer 효과 추가 |

## 구현 계획
...
```

## 사용 예시

```
Flutter 앱의 UX를 개선해줘
접근성을 강화하고 싶어
빈 상태와 에러 처리를 추가해줘
```

## 출처
Original skill from skills.cokac.com
