Run any Skill in Manus with one click

ux-principles

Stars0

Forks0

UpdatedMay 20, 2026 at 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.

Installation

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.

Run Skill in Manus

Source

aymansalkhatib

aymansalkhatib/flutter-starter

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

SKILL.md

readonly

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.

More from this repository

same repository

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.