Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

crave-kitchen-sink

Sterne4

Forks1

Aktualisiert13. Juni 2026 um 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

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

noorjsdivs

noorjsdivs/crave

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

SoftwareentwicklerInformatik- und Mathematikberufe·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.

Mehr aus diesem Repository

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