Run any Skill in Manus with one click

crave-kitchen-sink

Stars4

Forks1

UpdatedJune 13, 2026 at 18:52

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).

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

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name	crave-kitchen-sink
description	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).

crave-kitchen-sink

The internal showcase that proves the component library + mock API both work without needing the real screens. Built alongside crave-components, kept healthy each phase, deleted at release.

File

app/_kitchen-sink.tsx (the leading underscore makes it a hidden route — not reachable from tabs/nav, only by typing the URL or via a debug button in the Account screen during development).

Sections

0. Header

Theme toggle (System / Light / Dark) wired to theme.setMode().
"Simulate errors" switch → sets globalThis.__simulateErrors = true/false.
"Reset storage" button → clears crave/* keys and crave-cart (with confirm).

1. Tokens

Render swatches for every color token in both modes (display both side-by-side or per the active mode), spacing rulers, radii samples, every typography style with sample text.

2. Components

Render each component from src/components/index.ts with at least:

All variants (Button: primary/secondary/ghost + disabled + loading).
All states (Chip: unselected/selected).
Edge cases (RestaurantCard with long restaurant name; MenuItemRow with no description; Skeleton shimmer in motion).
Sheet triggered by a button.
Stepper showing each of the 5 order statuses.
MapView placeholder with a sample route + a courier animating at progress = 0.4.

3. Mock API exerciser

A vertical list of buttons, one per api.* method:

getCategories · getRestaurants · getRestaurant(<seed id>) · getMenu(<seed id>) · searchRestaurants("pizza") · placeOrder(<sample input>) · getOrders · getOrder(<latest id>)

Each button:

Runs the call.
Shows a status pill (idle / loading / ok / error).
On expand, shows the result JSON (pretty-printed, scrollable, truncated to ~80 lines).
Times the call in ms.

4. Animation lab

Trigger the add-to-cart fly animation between two placeholder rects.
Toggle useReducedMotion simulation via a switch (overrides Reanimated's check for this screen only).
Force CartBar slide-in/out manually.

Acceptance

/_kitchen-sink opens directly without auth gating (use a top-level route so it bypasses tabs).
Every component listed in crave-components appears at least once in each theme.
Every api.* call can be exercised and shows a result.
Toggling appearance live-flips the entire screen.

Hard rules

This route is NEVER linked from the user-facing nav. Only reachable by URL during development.
Must be deleted (or excluded via env check) in crave-qa-polish before the release build.
Don't put real production logic in this screen — it's a viewer/exerciser only.

More from this repository

same repository

crave-account

noorjsdivs/crave

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.

2026-06-134

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-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-kitchen-sink
description	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).

crave-kitchen-sink

The internal showcase that proves the component library + mock API both work without needing the real screens. Built alongside crave-components, kept healthy each phase, deleted at release.

File

app/_kitchen-sink.tsx (the leading underscore makes it a hidden route — not reachable from tabs/nav, only by typing the URL or via a debug button in the Account screen during development).

Sections

0. Header

Theme toggle (System / Light / Dark) wired to theme.setMode().
"Simulate errors" switch → sets globalThis.__simulateErrors = true/false.
"Reset storage" button → clears crave/* keys and crave-cart (with confirm).

1. Tokens

Render swatches for every color token in both modes (display both side-by-side or per the active mode), spacing rulers, radii samples, every typography style with sample text.

2. Components

Render each component from src/components/index.ts with at least:

All variants (Button: primary/secondary/ghost + disabled + loading).
All states (Chip: unselected/selected).
Edge cases (RestaurantCard with long restaurant name; MenuItemRow with no description; Skeleton shimmer in motion).
Sheet triggered by a button.
Stepper showing each of the 5 order statuses.
MapView placeholder with a sample route + a courier animating at progress = 0.4.

3. Mock API exerciser

A vertical list of buttons, one per api.* method:

getCategories · getRestaurants · getRestaurant(<seed id>) · getMenu(<seed id>) · searchRestaurants("pizza") · placeOrder(<sample input>) · getOrders · getOrder(<latest id>)

Each button:

Runs the call.
Shows a status pill (idle / loading / ok / error).
On expand, shows the result JSON (pretty-printed, scrollable, truncated to ~80 lines).
Times the call in ms.

4. Animation lab

Trigger the add-to-cart fly animation between two placeholder rects.
Toggle useReducedMotion simulation via a switch (overrides Reanimated's check for this screen only).
Force CartBar slide-in/out manually.

Acceptance

/_kitchen-sink opens directly without auth gating (use a top-level route so it bypasses tabs).
Every component listed in crave-components appears at least once in each theme.
Every api.* call can be exercised and shows a result.
Toggling appearance live-flips the entire screen.

Hard rules

This route is NEVER linked from the user-facing nav. Only reachable by URL during development.
Must be deleted (or excluded via env check) in crave-qa-polish before the release build.
Don't put real production logic in this screen — it's a viewer/exerciser only.