name	menustat-website
description	Build, refine, and verify the MenuStat website under website/, including product-grounded copy, responsive checks, theme persistence, external links, and Apple Silicon download messaging.

MenuStat Website

Use this skill from the MenuStat repository root when working on the website in website/, website copy, screenshots, theme behavior, analytics links, or Apple Silicon support messaging. For app release packaging, use menustat-release instead.

Source Anchors

Main pages and styling: website/app/layout.tsx, website/app/page.tsx, website/app/globals.css
Interactive pieces: website/app/ThemeToggle.tsx, website/app/LiveTelemetry.tsx, website/public/theme-init.js
Product assets: docs/screenshots/menustat-panel.png, Resources/AppIcon.iconset
Release/download copy touchpoints: README.md, docs/releasing.md, script/package_release.sh

Workflow

Inspect current state before editing:

git status --short
rg -n "Apple Silicon|Intel|MenuStat|target=|rel=|analytics|theme" website README.md docs script

Keep the design anchored in the actual product:
- Prefer MenuStat telemetry, HUD, menu-bar, and panel language over generic SaaS landing-page patterns.
- Use real app screenshots or repo assets when possible.
- Avoid fake Finder/menu-bar chrome around the product preview.
- Make the first viewport identify MenuStat clearly and hint at the next section on both mobile and desktop.
Preserve hardware support clarity:
- If the app is Apple Silicon-only, say that directly near download and install surfaces.
- Do not rely only on runtime alerts for Intel users; keep website/README copy explicit.
- If exploring universal startup support, verify x86_64 behavior through the release path before presenting it as supported.
Build and verify:
```
cd website
pnpm build
pnpm dev
```
Inspect the served page in a browser:
- Desktop width and about 390 px mobile width.
- Header and nav do not overflow.
- Theme toggle persists after reload.
- External links that open new tabs use target="_blank" with rel="noopener noreferrer".
- Dynamic year and analytics/link behavior match source intent.
Before finishing, report the exact build/browser checks run and any known gaps. If a screenshot is useful, store it under a repo-local scratch or docs path and reference the file.

Failure Modes

If the page feels like a generic template, re-ground the copy and visuals in live telemetry, app screenshots, and MenuStat's actual UI.
If mobile header text wraps or clips, reduce density and verify at 390 px before calling it fixed.
If link behavior is in doubt, inspect the served DOM rather than only reading source.

MenuStat Website

Source Anchors

Main pages and styling: website/app/layout.tsx, website/app/page.tsx, website/app/globals.css

Interactive pieces: website/app/ThemeToggle.tsx, website/app/LiveTelemetry.tsx, website/public/theme-init.js

Product assets: docs/screenshots/menustat-panel.png, Resources/AppIcon.iconset

Release/download copy touchpoints: README.md, docs/releasing.md, script/package_release.sh

Workflow

Inspect current state before editing:

git status --short
rg -n "Apple Silicon|Intel|MenuStat|target=|rel=|analytics|theme" website README.md docs script

Keep the design anchored in the actual product:

Prefer MenuStat telemetry, HUD, menu-bar, and panel language over generic SaaS landing-page patterns.
Use real app screenshots or repo assets when possible.
Avoid fake Finder/menu-bar chrome around the product preview.
Make the first viewport identify MenuStat clearly and hint at the next section on both mobile and desktop.

Preserve hardware support clarity:

If the app is Apple Silicon-only, say that directly near download and install surfaces.
Do not rely only on runtime alerts for Intel users; keep website/README copy explicit.
If exploring universal startup support, verify x86_64 behavior through the release path before presenting it as supported.

Build and verify:

cd website
pnpm build
pnpm dev

Inspect the served page in a browser:

Desktop width and about 390 px mobile width.
Header and nav do not overflow.
Theme toggle persists after reload.
External links that open new tabs use target="_blank" with rel="noopener noreferrer".
Dynamic year and analytics/link behavior match source intent.

Before finishing, report the exact build/browser checks run and any known gaps. If a screenshot is useful, store it under a repo-local scratch or docs path and reference the file.

Failure Modes

If the page feels like a generic template, re-ground the copy and visuals in live telemetry, app screenshots, and MenuStat's actual UI.

If mobile header text wraps or clips, reduce density and verify at 390 px before calling it fixed.

If link behavior is in doubt, inspect the served DOM rather than only reading source.

menustat-website