Run any Skill in Manus with one click

crave-account

Stars4

Forks1

UpdatedJune 13, 2026 at 18:52

Phase 5/6 of Crave — build the Account tab (profile, saved addresses, payment methods (mock), appearance picker (system/light/dark), notifications toggles, favorites list, sign-out). Guest mode shows a "Sign in" prompt and disables persistent sections. Use after crave-order-flow.

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

noorjsdivs

noorjsdivs/crave

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	crave-account
description	Phase 5/6 of Crave — build the Account tab (profile, saved addresses, payment methods (mock), appearance picker (system/light/dark), notifications toggles, favorites list, sign-out). Guest mode shows a "Sign in" prompt and disables persistent sections. Use after crave-order-flow.

crave-account

The Account tab — settings, mock identity, and the appearance switch. Small surface but pulls from session, theme, favorites, and addresses stores.

Preconditions

Session + theme stores exist; favorites + addresses storage helpers built.

File

app/(tabs)/account.tsx

Sections (top to bottom)

1. Header

Avatar circle (initials from email/phone, or "G" for guest) + name line ("Guest" or email/phone) + secondary line (member-since for users, "Browsing as guest" for guests).
For guest: primary Sign in button → /(auth)/sign-in.

2. Saved addresses

Renders addresses from storage (Home / Work / etc.) with selected one marked.
Tap row → Sheet to edit/delete. "Add address" button opens a form sheet (label + line1 + city + state + zip; zod-validated).
Hidden / disabled for guests.

3. Payment methods (mock)

List of mock cards (e.g. Visa •••• 4242, Mastercard •••• 5555).
Helper text: "Demo build — payment is not real."
"Add card" button opens a sheet that only collects last-4 (frontend mock).

4. Appearance

Segmented control: System / Light / Dark. Writes to theme.setMode() (persists via theme provider).
Live-previews instantly.

5. Notifications

Three switches (mock — persisted to crave/notifications JSON, no real registration):
- Order updates
- Promos & deals
- New restaurants near me

6. Favorites

Reads favorites: string[] (restaurant ids) from storage.
Horizontal FlatList of RestaurantCardSmall for each; tap → restaurant detail.
Empty state: "Heart restaurants to save them here."

7. About + Sign out

App version (from expo-constants).
Links: Terms, Privacy (open Sheet with placeholder text — this is a demo).
Sign out button (text variant accent): clears session, navigates to (auth)/welcome. For guests, show Sign in instead.

Guest behavior

Sections 2 + 3 + 6 hidden. Section 1 shows the Sign-in CTA. Sections 4, 5, 7 still visible.

Acceptance

Toggling appearance flips theme instantly and survives restart.
Adding/removing favorites in the browse flow updates this screen.
Sign-out clears session, cart is preserved (user choice — cart belongs to the device, not the identity), and you land on welcome.
Guest sees the appropriate locked-out experience.
Light + dark both correct.
npx tsc --noEmit clean.

Hard rules

No real card / personal data collection.
Notifications switches do NOT call expo-notifications — purely visual + persisted.
Sign-out doesn't clear crave/orders (history persists across sessions on this device for demo purposes).

More from this repository

same repository

crave-api-storage

noorjsdivs/crave

Phase 2 (part 2) of Crave — build the typed mock API layer (src/services/api), the AsyncStorage persistence wrappers (src/services/storage), and the Zustand cart + session stores with persist middleware. The api module is the SINGLE swap point for a real backend later — every screen reads through it via hooks. Includes the timer-driven order-status advance (Confirmed → Preparing → Picked up → On the way → Delivered). Use after crave-mock-data.

2026-06-134

crave-browse

noorjsdivs/crave

Phase 4 of Crave — build the core browsing surfaces by composing components against the mock API. Fills in Home (LocationHeader + SearchPill + categories + filter chips + feed sections + pull-to-refresh + skeletons), Search (debounced query + filter sheet), Restaurant detail (collapsing hero + sticky category strip + menu sections), and Item detail modal (option groups with live price + quantity + add-to-cart fly animation). Sticky CartBar appears whenever cart is non-empty. Use after crave-routing-auth.

2026-06-134

crave-components

noorjsdivs/crave

Phase 1 of Crave — build the entire in-house component library in src/components per DESIGN-SPEC §5 (Button, Chip, CategoryIcon, RestaurantCard + wide/small, MenuItemRow, SearchPill, LocationHeader, CartBar, QuantityStepper, RatingStars, Badge, SectionHeader, Sheet, Skeleton, EmptyState, Stepper, MapView placeholder) plus the cross-cutting Reanimated motion patterns (press spring 0.97, cart fly, skeleton shimmer, sticky CartBar slide). Every component reads tokens from useTheme — no hardcoded design values. Use after crave-theme.

2026-06-134

crave-kitchen-sink

noorjsdivs/crave

Build the /_kitchen-sink showcase route — a single screen that renders every component from src/components in both light and dark themes for visual audit. Includes a top theme-toggle and an "Exercise mock API" panel that calls each api.* method and prints the result. Used continuously across Phases 1–5 to catch drift; removed in Phase 6 (crave-qa-polish).

2026-06-134

crave-mock-data

noorjsdivs/crave

Phase 2 (part 1) of Crave — author the seed dataset in src/mocks. Produces 12–18 realistic restaurants across cuisines (rating, ETA range, fee, price level, badges, hero image with blurhash) plus 3–5 menu sections per restaurant (items with name, description, priceMinor, photo, popular flag, option groups), plus the categories row (Deals, Grocery, Pizza, Sushi, Burgers, Breakfast, Healthy, Dessert, Coffee). All money as integer minor units + currency. Use after crave-components.

2026-06-134

crave-order-flow

noorjsdivs/crave

Phase 5 of Crave — complete the order loop. Builds Cart (grouped items with steppers, promo code, price summary), Checkout (mock address picker, time selector ASAP/schedule, mock payment, tip selector, place-order CTA), Order Tracking (MapView placeholder with animated courier + Stepper advancing on a timer + courier card + delivered rating prompt), and the Orders tab (active + past with reorder). Money math is integer minor units throughout. Use after crave-browse.

2026-06-134

name	crave-account
description	Phase 5/6 of Crave — build the Account tab (profile, saved addresses, payment methods (mock), appearance picker (system/light/dark), notifications toggles, favorites list, sign-out). Guest mode shows a "Sign in" prompt and disables persistent sections. Use after crave-order-flow.

crave-account

The Account tab — settings, mock identity, and the appearance switch. Small surface but pulls from session, theme, favorites, and addresses stores.

Preconditions

Session + theme stores exist; favorites + addresses storage helpers built.

File

app/(tabs)/account.tsx

Sections (top to bottom)

1. Header

Avatar circle (initials from email/phone, or "G" for guest) + name line ("Guest" or email/phone) + secondary line (member-since for users, "Browsing as guest" for guests).
For guest: primary Sign in button → /(auth)/sign-in.

2. Saved addresses

Renders addresses from storage (Home / Work / etc.) with selected one marked.
Tap row → Sheet to edit/delete. "Add address" button opens a form sheet (label + line1 + city + state + zip; zod-validated).
Hidden / disabled for guests.

3. Payment methods (mock)

List of mock cards (e.g. Visa •••• 4242, Mastercard •••• 5555).
Helper text: "Demo build — payment is not real."
"Add card" button opens a sheet that only collects last-4 (frontend mock).

4. Appearance

Segmented control: System / Light / Dark. Writes to theme.setMode() (persists via theme provider).
Live-previews instantly.

5. Notifications

Three switches (mock — persisted to crave/notifications JSON, no real registration):
- Order updates
- Promos & deals
- New restaurants near me

6. Favorites

Reads favorites: string[] (restaurant ids) from storage.
Horizontal FlatList of RestaurantCardSmall for each; tap → restaurant detail.
Empty state: "Heart restaurants to save them here."

7. About + Sign out

App version (from expo-constants).
Links: Terms, Privacy (open Sheet with placeholder text — this is a demo).
Sign out button (text variant accent): clears session, navigates to (auth)/welcome. For guests, show Sign in instead.

Guest behavior

Sections 2 + 3 + 6 hidden. Section 1 shows the Sign-in CTA. Sections 4, 5, 7 still visible.

Acceptance

Toggling appearance flips theme instantly and survives restart.
Adding/removing favorites in the browse flow updates this screen.
Sign-out clears session, cart is preserved (user choice — cart belongs to the device, not the identity), and you land on welcome.
Guest sees the appropriate locked-out experience.
Light + dark both correct.
npx tsc --noEmit clean.

Hard rules

No real card / personal data collection.
Notifications switches do NOT call expo-notifications — purely visual + persisted.
Sign-out doesn't clear crave/orders (history persists across sessions on this device for demo purposes).