Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

crave-kitchen-sink

Étoiles4

Forks1

Mis à jour13 juin 2026 à 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

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

noorjsdivs

noorjsdivs/crave

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs de logicielsProfessions informatiques et mathématiques·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.

Plus depuis ce dépôt

même dépôt

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.