Skill LibraryPrompt Skill1 DesignsTop Views

Food Commerce Order Path

Design, audit, or implement food-commerce first viewports, menu cards, price proof, ingredient/nutrition evidence, cart state, and order-motion fallbacks.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines8

Reusable instruction lines for generation.

Author@Interface Lab

Interaction

Skill Directive

Description

Design, audit, or implement food-commerce first viewports, menu cards, price proof, ingredient/nutrition evidence, cart state, and order-motion fallbacks.

TagsInteraction

Skill Prompt

- Use for restaurants, cafes, drinks, bakeries, quick-service, takeaway, ghost kitchens, food-commerce, and food pop-up pages; inputs must include business type, primary conversion, first-viewport product object, menu data, price/proof signals, motion plan, and target viewports.
- Classify the page as commerce first: oversized type, food photography, tickers, loaders, ingredient fly-ins, and page transitions must serve menu comprehension, price judgment, ingredient/nutrition/freshness proof, cart state, and ordering.
- The first-viewport contract must include product object, menu entry, price or bundle signal, proof badges, stable Order CTA, cart/location state, and reduced-motion fallback.
- Menu cards include at least name, short description, price, one useful tag or proof signal, availability state, and add/details action; do not hide descriptions behind hover only.
- Keep only motion with a transaction purpose: loaders exit quickly, tickers pause or become static, ingredient motion explains layers, add-to-cart confirms quantity/price/cart, and transitions preserve order context.
- Mobile priority is product object, price/CTA, menu chips, ingredient/nutrition proof, cart state, then brand story; display headlines must not create horizontal overflow or push CTA below common first-view folds.
- Frontend implementation uses structured menu data, real button/link semantics, transform/opacity motion, safe-area sticky order bars, aria-live only for real order state changes, and text redundancy for red/green/spicy/unavailable states.
- Common mistakes: first viewport is only food video or giant slogan, price/CTA are hidden, menu details are hover-only, cart state is lost in transitions, nutrition/organic/freshness claims lack source, or source-site imagery/menu names/logo/exact motion are copied.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

Food Commerce Order Path

More pages using Food Commerce Order Path