Snapjump

A mock-up of the screen, drawn from its layout, palette and typefaces. A build follows the full prompt below.

Start from this screenRead the build prompt

Typefaces

The catalog's own faces. A screen composed into a template is drawn in that template's typefaces.

• InterHeadings: Inter 700, 26px H1
• InterBody: Inter 400 16px row labels at 1.5; 15px input; 12px key caps in JetBrains Mono

Patterns

• command menu anchored under sidebar search
• "Type a command or search presentations" dual-mode input
• action rows with icon + label + key-cap shortcut (N, Shift N, G, O, T, F)
• selected row tint
• sidebar search field showing ⌘K hint
• quick-start tiles row
• recents thumbnail grid
• long scrollable action list extending past viewport

States it is designed for

• Empty input: action list
• Query: actions + presentation matches
• No matches ("Create a presentation named ‘…’" suggested action)
• Searching skeleton rows
• Action not permitted on current plan (row shows lock + upgrade tooltip)
• Error loading presentations with retry

Who it is for

• Marketers and founders who build decks weekly
• Design and sales teams sharing templates
• Keyboard-oriented power users

Layout

1. Left sidebar (~160-240px): account switcher, upgrade link, search-and-commands field with ⌘ K key caps, Recents / Manage library / Links overview, Team and Private folder groups, library card
2. Main: "Recents" H1, three quick-start tiles, By me / By everyone tabs, thumbnail grid
3. Command menu (~295-560px) overlaying the main area, starting under the tiles: input row; list of ~12 action rows with icons and key caps; scrolls within max-height
4. Mobile: menu is a full-screen sheet; shortcuts hidden

Palette

swift, tidy, capable, friendly. The keyboard becomes the fastest way around the workspace.

• menu and main background#ffffff
• sidebar background#f7f7f8
• row labels#1c1c24
• placeholder, meta#686874
• key-cap fill#f0f0f3
• selected row fill#f2f2f5
• upgrade link, location links#8941e1
• search field outline#8a8a96
• thumbnail magenta (decorative)#d043fe

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary
• secondary
• accent
• destructive *

Type scale

Display

Inter 700, 26px H1

Body

Inter 400 16px row labels at 1.5; 15px input; 12px key caps in JetBrains Mono

Similar to the observed clean grotesk. Key caps uppercase single letters, 12px, medium weight.

Spacing and imagery

Medium: 4px base; rows 44px with 12px padding; icon 18px with 12px gap; key caps 20px tall, 4px radius; menu radius 10px, shadow 0 16px 40px rgba(20,20,40,.16).

Outline icons per action; vivid gradient slide thumbnails behind the menu (invented covers).

Components

• Sidebar search field with ⌘K hint
• Command menu input
• Action row with icon, label, key cap
• Presentation result row (thumbnail, title, folder)
• Section labels (Actions, Presentations)
• Quick-start tiles
• Thumbnail card grid
• Segmented tabs

Interactions

• ⌘/Ctrl+K opens from anywhere; clicking the sidebar field also opens it
• With the input empty, pressing a row's key (N, G, O, T, F, Shift+N) runs it instantly
• Typing filters actions and searches presentations (debounced 150ms)
• Arrow keys + Enter; Esc closes; hover sets selection
• Running an action closes the menu and shows a toast or navigates

Data

• Command{id, label, icon, shortcut, scope (global|workspace), requires_plan?}
• Presentation{id, title, folder_id, thumbnail_url, updated_at}
• Folder{id, name, scope (team|private)}
• Workspace{id, name, plan}

Guardrails

Experience

• Single-key shortcuts fire only while the input is empty so typing is never hijacked
• Offer a "create named …" action when nothing matches
• Keep actions first, then matching presentations
• Show locked actions with an explanation instead of hiding them
• Limit visible height and scroll inside the menu

Accessibility

• Combobox + listbox semantics; key caps aria-hidden with aria-keyshortcuts on options
• Selected option announced; section labels as group labels
• Esc closes and focus returns to the sidebar field
• Shortcuts documented in a help dialog
• Visible focus in the input and selected row indicator not colour-only (left bar)

Security

• Presentation search respects folder permissions via RLS (private folders owner-only)
• Plan-gated actions checked server-side
• Import action validates file type and size before upload

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste an entry's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack entries)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### SaaS screen baseline
- Design every screen for its full set of states: first-run empty, loading skeleton, partial data, error with retry, permission-denied, and success feedback. Each entry lists the states its screen needs.
- Keep destructive actions (delete, revoke, downgrade, remove member) behind a confirmation that names the object, and prefer undo over a second dialog where the action is reversible.
- Enforce authorisation on the server for every action a screen exposes. Hiding a button is not access control; check the role again in the API or RLS policy.
- Never show secrets (API keys, tokens) in full after creation. Show them once, then mask them, and offer rotate and revoke.
- Keep the app shell (navigation, workspace switcher, account menu) consistent across screens, and preserve filters, sort and scroll position when the user navigates back.

### Goal
Build **Snapjump**, the command menu of a presentation workspace. Pressing Cmd/Ctrl+K (or clicking the sidebar's search field) opens a menu that runs actions and searches decks from one input. Common actions have single-key shortcuts shown as key caps: N new presentation, Shift+N blank, G go to workspace, O open, T template, F folder.

### Stack
React + TypeScript + Vite, Tailwind CSS, shadcn/ui Command (cmdk), Tabs and Tooltip on Radix, lucide-react, TanStack Query. Supabase for auth, presentations, folders and plan data.

### Pages & layout
1. **Sidebar**: account switcher and bell; accent "Upgrade workspace" link; a search field "Search & commands" with ⌘ and K key caps; Recents, Manage library, Links overview; Team and Private groups with "Create folder"; a Team library card.
2. **Main**: "Recents"; three quick-start tiles (Start new presentation, Start from a prompt, Import presentation); By me / By everyone tabs; a grid of vivid invented deck thumbnails with titles and "In Private · Updated 20 minutes ago".
3. **Command menu** (560px, positioned under the tiles): input "Type a command or search presentations"; rows Create presentation (N), Create blank presentation (Shift N), Import presentation, Go to workspace (G), Open folder, Open presentation (O), Create template (T), Create folder (F), Create private folder, Account settings, Workspace settings. Max height 70vh with inner scroll.
4. Mobile: full-screen sheet, key caps hidden.

### Design system
- Colors: `--bg: #ffffff` (menu and main background), `--sidebar: #f7f7f8` (sidebar background), `--fg: #1c1c24` (row labels), `--muted: #686874` (placeholder, meta), `--kbd: #f0f0f3` (key-cap fill), `--selected: #f2f2f5` (selected row fill), `--accent: #8941e1` (upgrade link, location links), `--input-border: #8a8a96` (search field outline), `--thumb: #d043fe` (thumbnail magenta (decorative)).
- Fonts: Inter (similar to the observed grotesk): H1 26px/700, rows 16px/1.5, input 15px; key caps JetBrains Mono 12px/500.
- Spacing: 4px base; 44px rows; 12px row padding; 12px icon gap.
- Radius: menu 10px; rows 6px; key caps 4px.
- Shadows: menu `0 16px 40px rgba(20,20,40,.16)`.
- Motion: 100ms fade/scale; none under reduced motion.

### Components & interactions
SidebarSearchTrigger, CommandMenu (sections Actions and Presentations), ActionRow (icon, label, KeyCap; lock state with upgrade tooltip), PresentationRow (thumbnail, title, folder), NoMatchCreateRow, QuickStartTiles, RecentsGrid, Toast. Single-key shortcuts fire only when the input is empty; otherwise keys type. Arrows and Enter run; Esc closes; the selected row shows a tinted fill and a 2px accent bar.

### Data & state
Commands are a typed static registry. Tables: `presentations(id, title, folder_id, thumbnail_path, updated_at)`, `folders(id, workspace_id, name, scope, owner_id)`, `workspaces(id, name, plan)`. Seed 10 invented decks. Handle states: empty list of actions, query with matches, no matches (create suggestion), searching skeleton, locked action, load error with retry.

### Accessibility
Use combobox and listbox semantics; options expose `aria-keyshortcuts`, and key caps are aria-hidden. Group labels name the sections. Focus returns to the trigger. A "Keyboard shortcuts" help dialog lists every key. The selection indicator combines tint and a bar.
Verified contrast: row label: #1c1c24 on #ffffff = 16.92:1; muted placeholder: #686874 on #ffffff = 5.50:1; key cap text: #686874 on #f0f0f3 = 4.83:1; row label on selected fill: #1c1c24 on #f2f2f5 = 15.15:1; accent link on sidebar: #8941e1 on #f7f7f8 = 5.02:1; search field border: #8a8a96 on #f7f7f8 = 3.19:1; focus / selected bar: #8941e1 on #ffffff = 5.37:1.

### Security
RLS: team folders are visible to workspace members and private folders only to their owner; presentation search inherits this. Plan-gated actions are re-checked on the server. The import action allows only listed file types up to 100 MB and uploads to a private bucket.

### Performance & SEO
Open the menu synchronously from the static registry; fetch presentations lazily. Debounce search and cancel stale requests. The app is noindex.

### Guardrails
- Invented workspace, people and deck titles; no real brand marks.
- Shortcuts must never fire while the user is typing.
- Acceptance criteria: (1) Cmd/Ctrl+K and the sidebar field open the menu; (2) all listed shortcuts work with an empty input; (3) presentation search respects permissions; (4) every state renders; (5) keyboard and screen-reader flows pass.

Open the builderAll templatesThis palette on its own