一键在 Manus 中运行任何 Skill

ux-principles

星标0

分支0

更新时间2026年5月20日 21:45

UX / UI design principles and quality gates for flutter_starter — hierarchy (one hero per screen), 8pt spacing grid, 60 / 30 / 10 color rule, typography rules, iconography, motion timing, the five required states (empty / loading / loaded / error / stale), form conventions, accessibility requirements (contrast, tap targets, semantics), and RTL / dark-mode correctness. Use when designing any screen or component, reviewing a layout, or deciding spacing / colors / motion values.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

aymansalkhatib

aymansalkhatib/flutter-starter

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

UX / UI principles

Hierarchy

One hero per screen — title, primary CTA, or key metric. Contrast via weight + color + spacing, not size alone. Scannable in 3 seconds or restructure.

Spacing — 8pt grid

4 / 8 / 12 / 16 / 24 / 32 / 48. Nothing in between.

Default screen padding 16; inside-group 8, between-group 16, between-section 24–32.
Radii: buttons / inputs 8, cards 12, sheets / dialogs 16.
Elevation 0–4, single level.

Color — 60 / 30 / 10

60% neutral surface, 30% content, 10% accent (CTAs only).

Gradients on hero surfaces only (app bar, splash, primary CTA); never on body, cards, or inputs.
Semantic colors (error / success / warning / info) reserved for meaning.
All colors via context.colors.

Typography

context.styles.<preset> only — never a free TextStyle(fontSize:).

Max 3 sizes per screen.
Body line length 45–75 chars.
Always maxLines + ellipsis on Text that can overflow.

Iconography

No emojis; Material or Assets.* SVG.
One icon family per screen.
Sizes 16 / 20 / 24 matched to adjacent text.
CustomCachedNetworkImage with explicit width/height.

Motion

150–300ms micro, 300–500ms transitions.
easeOut in, easeIn out, easeInOut both. No bounce / elastic.
Feedback within 100ms of any tap.
Haptics on destructive confirms only.

Five required states — missing any = bug

Empty → EmptyWidget
Loading → AnimatedDotsLoader or skeleton
Loaded → content
Error → FailureWidget with retry iff failure.isRetryable
Partial / stale → cache-while-refreshing

Forms

One column, label-above-field, errors inline.
Validate on blur.
Correct keyboardType + textInputAction + autofill hints on every field.
Sticky primary CTA above keyboard.
Validators from the validation skill.

Accessibility

4.5:1 body contrast, 3:1 large text and UI.
44×44pt tap targets.
tooltip on every IconButton.
Semantics(label:, button: true) on any icon-only gesture.
semanticsLabel on images.
Focus follows reading order.
Color is never the only signal.

RTL & dark mode

EdgeInsetsDirectional + Alignment.centerStart — never left / right.
Directional icons (arrows, chevrons) mirror in RTL.
Numbers / dates via NumberFormatter / DateFormatter.
No hardcoded Colors.black / Colors.white.
Test both locales + both themes. If a pattern is wrong, fix it everywhere.

同仓库更多 Skills

同仓库

architecture

aymansalkhatib/flutter-starter

Clean Architecture layer rules, feature folder structure, import direction, and no-backend feature scaffolding for flutter_starter. Use when deciding where a new file belongs, reviewing dependency direction between domain/data/presentation, structuring a feature folder, or building a presentation-only feature (splash, onboarding, info).

2026-05-200

code-style

aymansalkhatib/flutter-starter

Code style rules and anti-patterns for flutter_starter — comment discipline (write only for non-obvious why), SOLID principles, no speculative abstractions, and a concrete anti-patterns table covering dartz vs custom Either, datasource-returns-Either, e.toString() in Failure, emit vs safeEmit, state.navigateToX, Navigator.of(context).push* directly, raw-map route args, hardcoded Colors.white / TextStyle / EdgeInsets, print / AppLogger.debug, @freezed class (non-abstract), TextEditingController in StatefulWidget, AppBar in body widget, setState inside BlocConsumer. Use before finalizing any Dart file in this project.

2026-05-200

data-layer

aymansalkhatib/flutter-starter

Rules for the data layer in flutter_starter — RemoteDataSource using ApiClient, RepositoryImpl as the Either boundary with exception-to-Failure mapping, cache-first read patterns, Dio timeouts, and the Failure error-code ranges. Use when creating or editing any file under lib/features/*/data/, or when mapping exceptions to Failure.

2026-05-200

di-registration

aymansalkhatib/flutter-starter

Rules for dependency injection with GetIt (sl) in flutter_starter — every feature owns a di/<feature>_dependencies.dart registered in service_locator.dart, with registration order DataSources → Repository → UseCases → Cubit, and lazy-singleton vs factory guidance. Use when creating a new feature's DI file, editing service_locator.dart, or deciding how to register a service.

2026-05-200

domain-layer

aymansalkhatib/flutter-starter

Rules for the domain layer in flutter_starter — Freezed entities with self-owned fromJson, UseCase + Params pattern, and abstract Repository contracts. Use when creating or editing any file under lib/features/*/domain/, or deciding whether a feature needs a separate Model class beyond its Entity.

2026-05-200

generate-feature

aymansalkhatib/flutter-starter

Orchestrator for scaffolding a new Flutter Clean Architecture feature end-to-end in flutter_starter — enforces mode selection (quick / detailed), the intake ritual, the strict generation order across layers, and the feature-delivery checklist. Supports two modes — quick (5 basic questions) and detailed (expanded API contracts with exact request / response shapes). Delegates detailed rules to the per-layer skills (architecture / domain-layer / data-layer / presentation-layer / hive-caching / security / di-registration / navigation / translations). Use when the user asks to create a new feature with domain, data, and presentation layers.

2026-05-200

name

ux-principles

description

UX / UI principles

Hierarchy

One hero per screen — title, primary CTA, or key metric. Contrast via weight + color + spacing, not size alone. Scannable in 3 seconds or restructure.

Spacing — 8pt grid

4 / 8 / 12 / 16 / 24 / 32 / 48. Nothing in between.

Default screen padding 16; inside-group 8, between-group 16, between-section 24–32.
Radii: buttons / inputs 8, cards 12, sheets / dialogs 16.
Elevation 0–4, single level.

Color — 60 / 30 / 10

60% neutral surface, 30% content, 10% accent (CTAs only).

Gradients on hero surfaces only (app bar, splash, primary CTA); never on body, cards, or inputs.
Semantic colors (error / success / warning / info) reserved for meaning.
All colors via context.colors.

Typography

context.styles.<preset> only — never a free TextStyle(fontSize:).

Max 3 sizes per screen.
Body line length 45–75 chars.
Always maxLines + ellipsis on Text that can overflow.

Iconography

No emojis; Material or Assets.* SVG.
One icon family per screen.
Sizes 16 / 20 / 24 matched to adjacent text.
CustomCachedNetworkImage with explicit width/height.

Motion

150–300ms micro, 300–500ms transitions.
easeOut in, easeIn out, easeInOut both. No bounce / elastic.
Feedback within 100ms of any tap.
Haptics on destructive confirms only.

Five required states — missing any = bug

Empty → EmptyWidget
Loading → AnimatedDotsLoader or skeleton
Loaded → content
Error → FailureWidget with retry iff failure.isRetryable
Partial / stale → cache-while-refreshing

Forms

One column, label-above-field, errors inline.
Validate on blur.
Correct keyboardType + textInputAction + autofill hints on every field.
Sticky primary CTA above keyboard.
Validators from the validation skill.

Accessibility

4.5:1 body contrast, 3:1 large text and UI.
44×44pt tap targets.
tooltip on every IconButton.
Semantics(label:, button: true) on any icon-only gesture.
semanticsLabel on images.
Focus follows reading order.
Color is never the only signal.

RTL & dark mode

EdgeInsetsDirectional + Alignment.centerStart — never left / right.
Directional icons (arrows, chevrons) mirror in RTL.
Numbers / dates via NumberFormatter / DateFormatter.
No hardcoded Colors.black / Colors.white.
Test both locales + both themes. If a pattern is wrong, fix it everywhere.