draftbit/mobile-taste-skill

mobile-nav-plan

Turn an app idea or an existing React Native app into a Nav Read - tab structure, route tree, push/modal/sheet decisions, deep links, Android back plan - without building any screens.

Zobacz źródło
Oryginalny dokument Skill

Treść z repozytorium z zachowaniem nagłówków, przykładów, kodu, tabel, linków i obrazów.

mobile-nav-plan: Navigation Architecture, Nothing Else

Navigation is information architecture. This skill produces a Nav Read - a committed route tree that doubles as the Expo Router app/ directory plan - and stops. No screen code.

The method lives in ../_shared/references/navigation.md (container decision tree, Expo Router conventions, mechanical checks, three worked examples). Tells cited by number (#24 etc.) live in ../_shared/references/tells.md. Read both in full before producing the Nav Read.

Flow

  1. Stack sniff. In an existing project, read package.json / app.json / the

current app/ (or navigator) tree, and MOBILE-DESIGN.md if present. In a greenfield conversation, skip to 2.

  1. App Read essentials. App kind, audience, target platforms + tier, platform

posture (one line - the full App Read belongs to mobile-taste). If the app kind is genuinely ambiguous, ask ONE question.

  1. Enumerate the jobs-to-be-done. List the user's recurring destinations and the

create/edit tasks BEFORE picking containers. Tabs come from this list, never from the Home/Search/+/Alerts/Profile template (tell #24).

  1. Run the decision tree (navigation.md §2) over every screen: tab root → push →

modal → bottom sheet → full-screen modal, first match wins.

  1. Emit the Nav Read in the canonical format (navigation.md §1): platforms, tabs,

route tree with container annotations, entry points, sheets (or "none"), deep links, Android back plan, max-taps line.

  1. Justify the contentious calls - one sentence each for: the tab count, the FAB

decision (its presence, or its ABSENCE when the app has create actions), any full-screen modal, any BackHandler exception, and every screen that is a sheet rather than a modal.

  1. Self-check against the mechanical list (navigation.md §4). Report any rule the

plan bends and why.

  1. Persist. Offer to write the Nav Read into MOBILE-DESIGN.md (create or refresh

the ## Nav Read section, reporting the delta if one existed). For an existing app, also emit the DIFF between the current route tree and the proposed one, flagging every change that hits the never-change-silently list (../_shared/references/redesign-protocol.md): route names, deep links, tab order.

Rules that bind this skill

  • Restructuring an existing app's navigation is a PROPOSAL - implementation belongs to

mobile-redesign-app after approval.

  • No screen mockups, no component code. The single artifact is the Nav Read (plus the

optional empty route-file scaffold if the user asks for it: _layout.tsx files and empty screens matching the tree, nothing inside them).

  • Cite the decision-tree step for every container choice. "It felt right" is not a

rationale.

z tego samego repozytorium

Więcej Skills

Wszystkie Skills
draftbit
Społeczność

mobile-redesign-app

Whole-app redesign of an existing React Native / Expo app - full audit (tokens, navigation vs the Nav Read rules, screen archetypes, dial reading), preserve-vs-overhaul decision, then a phased modernization plan executed lever by lever across screens with checkpoints and a risk governor. The only skill in this suite allowed to propose navigation restructuring (approval-gated). Use when asked to redesign, overhaul, rebrand, or modernize an entire app. For one screen use mobile-redesign-screen; for an audit without changes use mobile-design-review.

instalacje
1
GitHub Stars
4
Aktualizacja
2 lip
draftbit
Społeczność

mobile-redesign-screen

Audit-first redesign of ONE React Native screen (or one flow of 2-3 screens) - extract its current tokens and patterns, produce rated findings, then modernize it lever by lever with atomic commits and before/after screenshots. Preserves navigation, route names, and form semantics. Use when asked to redesign, refresh, modernize, or "make nicer" a specific existing screen. For whole-app redesigns use mobile-redesign-app; for a report without changes use mobile-design-review; for brand-new screens use mobile-taste.

instalacje
1
GitHub Stars
4
Aktualizacja
2 lip
draftbit
Społeczność

mobile-taste

Anti-slop design skill for BUILDING React Native / Expo apps (iOS, Android, web). Commits to an App Read and Nav Read before writing code; ships screens, navigation, and motion that do not look AI-generated. Use when creating new screens, features, or apps in React Native. For auditing an existing app use mobile-design-review; for upgrading existing screens use mobile-redesign-screen or mobile-redesign-app; for navigation planning alone use mobile-nav-plan; for tokens/theming use mobile-design-system.

instalacje
1
GitHub Stars
4
Aktualizacja
2 lip