signage-menu-board

Files (28)

• SKILL.md
• brand-profile.example.json · assets/menu-board-seed-data/
• menu-breakfast.example.json · assets/menu-board-seed-data/
• menu-dinner.example.json · assets/menu-board-seed-data/
• menu-lunch.example.json · assets/menu-board-seed-data/
• venue-profile.example.json · assets/menu-board-seed-data/
• README.md · assets/menu-board-stress-data/
• brand-profile-brand-inconsistency.example.json · assets/menu-board-stress-data/
• brand-profile.example.json · assets/menu-board-stress-data/
• menu-portrait-overflow.example.json · assets/menu-board-stress-data/
• menu-promo-overload.example.json · assets/menu-board-stress-data/
• menu-quiet-structural-wrong.example.json · assets/menu-board-stress-data/
• menu-runtime-fragile.example.json · assets/menu-board-stress-data/
• venue-profile-brand-mismatch.example.json · assets/menu-board-stress-data/
• venue-profile-quiet-structural.example.json · assets/menu-board-stress-data/
• venue-profile-runtime-fragile.example.json · assets/menu-board-stress-data/
• venue-profile.example.json · assets/menu-board-stress-data/
• food-image-prompts.md · assets/prompt-templates/
• logo-direction-prompts.md · assets/prompt-templates/
• detailed-guide.md · references/
• runtime-and-qa.md · references/
• screen-system-planning.md · references/
• script-invocations.md · references/
• stress-case-guide.md · references/
• venue-and-brand.md · references/
• generate-image-prompt-pack.mjs · scripts/
• generate-menu-seed.mjs · scripts/
• stress-test-menu-content.mjs · scripts/

SKILL.md (first lines)

# Signage Menu Board Skill

## Purpose

Use this skill to design menu-board signage as a small screen system rather than a single overloaded layout.

This skill exists because menu boards have different hierarchy needs from generic signage. Prices, offer grouping, product imagery, service notes, and mode changes need a predictable system rather than a generic card grid.

## When to Use

Use this skill when you need to:

- build a restaurant or cafe menu board
- create a concessions or quick-service pricing board
- design a service board with named offers and prices
- transform a wireframe into a signage-ready menu composition
- define a believable venue and brand before building a menu-board screen
- plan a multi-screen or multi-mode menu-board set

## Do Not Use When

Do not use this skill when:

- the screen is not fundamentally menu- or price-driven
- the primary content is operational status, dashboards, or wayfinding
- the layout is a web ordering UI with heavy interaction
- the task is only to polish an already-finalised menu without revisiting structure

## Core Principle

**The viewer should identify what is sold, what it costs, and what is featured within seconds.**

Treat menu boards as glanceable retail signage, not document pages.

## Required Inputs

Confirm or invent these before doing detailed layout work:

1. venue profile: name, concept, cuisine, service model, price position
2. brand profile: palette, typography direction, image style, tone
3. menu mode assumptions: breakfast, lunch, dinner, all-day, drinks, seasonal
4. screen context: landscape or portrait, number of screens, static or rotating
5. service and compliance needs: allergens, ordering notes, opening hours, QR prompt
6. runtime assumptions: static assets only or dynamic data with fallbacks

If several of these are missing, define them first instead of jumping into templates.

## Workflow Summary

Follow this order unless the inputs are already settled:

1. **Define venue** — produce a concise venue profile that makes the menu believable.
2. **Define brand system** — produce a small brand profile that guides typography, colour, imagery, and price styling.
3. **Model menu data** — produce structured categories, items, prices, tags, and mode assumptions.
4. **Plan screen inventory** — decide whether the result is one screen or a small set of related screens.
5. **Choose templates** — assign a template to each screen and state why.
6. **Check capacity and legibility** — simplify before shrinking text or density.
7. **Plan assets** — define logo direction, image needs, and placeholder strategy.
8. **Produce implementation guidance** — define components, data shape, runtime notes, and exclusions.
9. **Validate** — check readability, consistency, and failure cases before final output.

See the reference files for detailed examples and expanded guidance.

## Core Templates

Choose one of these templates and state it:

### 1. Feature Pair + Hero

Best for a small number of featured items.

- left: one or two featured menu cards
- right top: brand or category label
- right center: hero image or offer panel
- right bottom: service detail, phone, hours, or CTA

### 2. Category Columns

Best for broader menus with several items per category.

- top: brand and category band
- center: two to four columns by category
- bottom: service notes, allergens, or ordering detail

### 3. Promo Strip + Core Menu

Best when one promoted item must dominate without hiding the core menu.

- top or side: promo zone
- main field: compact category list
- footer: service and compliance notes

## Portrait Variants

When the display is portrait (9:16), adapt the landscape templates:

### Portrait: Feature Pair + Hero

- top: brand or category label
- center: hero image or offer panel (full width)
- bottom: one or two featured menu cards stacked vertically

### Portrait: Category Columns

- top: brand and category band
- center: single column of categories, stacked vertically
- bottom: service notes, allergens, or ordering detail

For two or fewer categories, stack them. For three or more, use two narrow columns.

### Portrait: Promo Strip + Core Menu

- top: promo zone (full width, landscape-cropped image)
- center: compact category list (single column)
- footer: service and compliance notes

Portrait is less forgiving than landscape. Reduce item count sooner.

## Capacity Guidelines

From CambridgeMonorail/WallRun, MIT.

More from CambridgeMonorail/WallRun