Menu
Use when: creating or updating Flutter UI while enforcing Beacon typography, color theme, icon system, layout, and shared widget conventions.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use when: any task involves Flutter UI, UX, animation, motion, redesign, image-to-code, or mobile visual implementation quality.
Use when: planning or implementing Flutter local database, cache, offline-read, local datasources, repository cache orchestration, stale data handling, and deterministic tests.
Use when: adding or extending Flutter integration/E2E tests for Beacon with fake backend, ProviderScope overrides, and reusable test robots.
Use when: selecting Flutter test levels, planning unit/widget/integration coverage, and creating verification checklists for risky or cross-layer changes.
Use when: starting a task and loading Beacon source-of-truth context before writing code.
Use when: documenting architecture decisions, tradeoffs, impacts, and rollback guidance after important changes.
| name | ui-design-skill |
| description | Use when: creating or updating Flutter UI while enforcing Beacon typography, color theme, icon system, layout, and shared widget conventions. |
Đảm bảo màn hình mới/được sửa tuân thủ typography, color theme, icon system, layout guide, component conventions và giữ trải nghiệm nhất quán trong toàn app.
docs/theme.mddocs/text_theme.mddocs/shared_widgets.mddocs/assets.mdlib/core/theme/color/app_colors.dartlib/core/theme/text/app_text_theme.dartlib/core/theme/app/app_theme.dartlib/core/theme/icons/app_icons.dartlib/core/theme/icons/app_icon.dartlib/core/widgets/colorScheme.primary, surface, onSurface, ...).docs/text_theme.md: title dùng AppTextPreset.title1/title2/title3; body/label dùng đủ AppTextSize + AppTextSpacing + AppTextWeight.AppIcons hoặc cần thêm icon mới.AppText từ lib/core/widgets/text/text.dart.fontSize, fontWeight, height trong page nếu style map được về token.AppText(preset: AppTextPreset.title1/title2/title3).AppText(size: ..., spacing: ..., weight: ...).TextStyle thì dùng Theme.of(context).textTheme.ui(...) và cho phép caller truyền TextStyle? khi cần.Text(...) trực tiếp khi viết reusable widget cần kiểm soát TextStyle, widget Material/platform, hoặc có lý do kỹ thuật rõ ràng.maxLines, overflow, và kiểm tra không vỡ layout trên mobile nhỏ.color của AppText hoặc copyWith(color: ...); tránh override fontWeight/style nếu không có chỉ định thiết kế.AppColors.ink600 hoặc colorScheme.onSurface với weight mạnh.AppColors.ink500 hoặc colorScheme.onSurface.AppColors.ink100 hoặc colorScheme.onSurface.withValues(alpha: 0.55-0.72).AppColors.sky600 hoặc token disabled từ component theme.AppColors.sky100, colorScheme.onPrimary, hoặc colorScheme.onSecondary.AppColors.teal500 hoặc colorScheme.primary.AppColors.coral500 hoặc colorScheme.secondary, dùng tiết chế.AppColors.red500 hoặc colorScheme.error.AppColors.success, chỉ cho trạng thái thành công.AppColors.coral500 nếu cần tương phản tốt hơn AppColors.amber400.colorScheme.onSurface và alpha thay vì gọi sắc độ ngẫu nhiên.AppColors.ink300/ink400 cho text mới nếu không có lý do thiết kế rõ; chúng thường khó đọc hoặc tạo hierarchy lửng giữa body và muted.AppIcon(AppIcons.xxx) thay vì import trực tiếp PhosphorIcons, thêm mới Icons.*, hoặc hardcode path SVG.AppIconData.phosphor(...) trong AppIcons.AppIconData.svg(...) trong AppIcons.assets/icons/; chỉ khai báo constant path trước nếu chưa dùng ngay.AppIcon(size: ..., color: ...); với SVG, AppIcon tự áp ColorFilter.lib/core/theme/icons/app_icons.dart; không thêm path SVG trực tiếp trong page/widget.lib/core/widgets/ trước khi viết widget mới.AppIconData nếu widget cần chọn icon linh hoạt; chỉ nhận Widget khi caller cần custom render hoàn toàn.String + TextStyle?/Color? khi component có typography mặc định; chỉ nhận Widget khi caller cần custom render hoàn toàn.appMessageProvider.AppScreenLayout để bám layout guide, trừ khi page được yêu cầu full-bleed, camera/media preview, hoặc là demo/dev surface.Text(...) trực tiếp trong page; đổi sang AppText nếu không có lý do rõ ràng.Colors.* trong page trừ khi có lý do rõ ràng.fontSize/fontWeight/height nếu đã có token.Theme.of(context).colorScheme.AppText; reusable widget dùng Theme.of(context).textTheme.ui(...) khi cần TextStyle.AppIcon(AppIcons.xxx); không import trực tiếp PhosphorIcons trong screen/widget.AppIcons hoặc AppImages tùy loại asset.assets/icons/.flutter analyze và verify tay flow liên quan khi môi trường cho phép.AppScreenLayout nếu không thuộc ngoại lệ full-bleed/media/dev/demo.