UI Feature Builder

UI/디자인 관련 변경만 수행하는 워크플로우 스킬입니다.

⛔ HARD BLOCK 전제 조건

이 스킬 실행 전 반드시 /sc:enforce-discovery가 완료되어야 합니다.

code

Discovery 보고서 없이 feature-ui 실행 시:
⛔ 차단: "/sc:enforce-discovery를 먼저 실행해주세요"

필수 확인 사항:
- 유사한 UI 위젯이 이미 있는지 확인
- 공통 위젯(core/widgets/) 확인
- DSColors 토큰 확인

사용법

code

/sc:feature-ui 일일운세 결과 카드 리디자인
/sc:feature-ui 홈 화면 레이아웃 변경
/sc:feature-ui 다크모드 색상 조정

범위

허용

•lib/features/*/presentation/pages/
•lib/features/*/presentation/widgets/
•lib/core/widgets/
•lib/shared/

금지

•Domain 레이어 수정
•Data 레이어 수정
•비즈니스 로직 변경

디자인 시스템 규칙

색상 (필수)

dart

// ✅ 올바른 사용
final isDark = Theme.of(context).brightness == Brightness.dark;
Container(
  color: isDark
    ? DSColors.backgroundDark
    : DSColors.backgroundLight,
)

// ❌ 금지
Container(color: Color(0xFF1A1A1A))
Container(color: Colors.blue)

타이포그래피 (필수)

dart

// ✅ 올바른 사용
Text('제목', style: context.heading1)
Text('본문', style: context.bodyMedium)

// ❌ 금지
Text('제목', style: TextStyle(fontSize: 24))
Text('본문', style: DSColors.bodyMedium)

아이콘 (필수)

dart

// ✅ iOS 스타일 뒤로가기
Icons.arrow_back_ios

// ❌ Android 스타일 금지
Icons.arrow_back

자동 QA

localhost:3000 실행 중이면 Playwright 자동 테스트:

code

UI 변경 완료!

🧪 자동 QA 실행할까요?
- localhost:3000 감지됨
- 변경된 페이지: /fortune/daily
- 예상 테스트: 렌더링, 다크모드, 반응형

(Y/n)

체크리스트

UI 변경 시 자동 검증:

• 하드코딩 색상 없음
• 하드코딩 fontSize 없음
• isDark 다크모드 대응
• DSColors 토큰 사용
• TypographyUnified 사용

완료 후 자동 검증

수정 완료 시 /sc:enforce-verify가 자동 호출됩니다.

code

수정 완료!
    │
    └─ /sc:enforce-verify 자동 호출
        ├─ flutter analyze
        ├─ build_runner
        ├─ quality-guardian
        └─ 사용자 테스트 요청

완료 메시지

code

✅ UI가 업데이트되었습니다!

📁 수정된 파일:
1. lib/features/fortune/presentation/pages/daily_fortune_page.dart
2. lib/features/fortune/presentation/widgets/fortune_result_card.dart

🎨 디자인 시스템 검증: ✅ 통과
🌙 다크모드 대응: ✅ 확인됨
📱 반응형: ✅ 확인됨