Cellwright

Who it is for

• Solo operators tracking budgets and tasks
• Founders wanting a branded sheet tool
• Consultants keeping client workbooks separate
• Small teams needing a self-contained spreadsheet

Layout

1. White top bar with hairline border: sheet icon + bold wordmark left, 'Sign in' text and navy 'Get started' button right
2. Centered hero: outlined pill badge, two-line 60px headline, slate subcopy, navy primary + white outline buttons
3. Browser-style card showing a sample 'Regional forecast' grid with region rows, quarters, and SUM formulas in monospace
4. A 3x2 grid of outlined feature cards with grey icon tiles
5. Template picker section (budget, tasks, planner, invoice, inventory)
6. Closing CTA with navy button
7. Footer with wordmark and copyright
8. App: workbook list (list/grid, search, sort), spreadsheet editor with toolbar, formula bar, sheet tabs, comments, autosave status

Palette

Clean, utilitarian, trustworthy, quiet, efficient. A no-nonsense productivity tool with slate neutrals and a single navy accent.

• background#ffffff
• text#020618
• primary navy#0f172b
• muted slate text#5f7089
• surface#f1f5f9
• border#e2e8f0
• traffic-light accents#34d399

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

Display

System UI sans 600-700, 60px with -1.5px tracking (the system face is not on Google Fonts; a vibld project loads Inter)

Body

System UI sans 16px; monospace for grid cells and formulas (the system face is not on Google Fonts; a vibld project loads Inter)

Deliberately native system fonts for speed and a utilitarian, tool-like feel; mono in the grid signals data. Accessibility: body copy 16px or larger at 1.5+ line height with a ~70ch max measure; no text below 12px; weights under 400 only at 32px+; uppercase reserved for short labels with 0.05em+ tracking.

Spacing and imagery

1000-1100px centered container, 10px radius cards and buttons, 1px slate borders, 3-column feature grid with 24px gaps, dense 32px grid rows in the mock.

No photography; a live-looking spreadsheet mock with window dots; small line icons in grey tiles.

Components

• Outlined pill badge
• Navy primary button
• Spreadsheet preview card
• Feature cards with icon tiles
• Workbook list with list/grid toggle
• Search and sort controls
• Spreadsheet grid with frozen headers
• Formula bar with cell reference
• Formatting toolbar
• Sheet tabs
• Cell comment popover
• Find & replace dialog
• Import/export menu (CSV, XLSX)
• Autosave / connection indicator

Interactions

• Edit cells with keyboard navigation and range selection
• Formulas recalc instantly (SUM, IF, VLOOKUP, cross-sheet)
• Multi-criteria sort
• Find/replace across workbook
• Add/resolve cell comments
• Import CSV/XLSX with preview; export sheet
• Rename/duplicate/delete workbook
• Autosave with saving/saved/offline states

Data

• Workbook{id, owner_id, title, template, created_at, updated_at}
• Sheet{id, workbook_id, name, position, frozen_rows, frozen_cols}
• Cells{sheet_id, data(json sparse map A1->{v, f, style})}
• CellComment{sheet_id, cell_ref, author_id, body, created_at}

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 a template'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 templates)
- 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.

### Goal
Build **Cellwright**, a private online spreadsheet for solo operators, consultants and small teams. Users sign in, pick a starter template or blank workbook, and work in a real grid with formulas, formatting, comments, sorting and find/replace. Everything autosaves, and files move in and out as CSV or XLSX. Privacy is the headline: each workbook belongs only to its owner.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. A formula engine such as HyperFormula (check its licence for your use) or a small custom parser for common functions; SheetJS for XLSX/CSV parsing and export; TanStack Virtual for large grids; TanStack Query for workbook lists; react-hook-form + zod for dialogs. Supabase: Auth (email + Google), Postgres for workbooks/sheets/cells/comments.

### Pages & layout
1. **Landing**: white nav with hairline border; centered pill badge, two-line headline, slate subcopy, navy primary and outline buttons; a window-framed sample grid showing quarterly numbers with visible SUM formulas; a 3×2 feature grid; a template strip; closing CTA; footer.
2. **Workbooks**: list/grid toggle, search, sort (last modified, created, title), New (blank or template), row actions (rename, duplicate, delete).
3. **Editor**: top bar (title, autosave indicator, share-disabled "private" badge, import/export menu); toolbar (undo/redo, bold/italic, number formats, alignment, fill colour, sort, find); formula bar showing the active cell reference and raw formula; virtualised grid with frozen header row/column; sheet tabs with add/rename/reorder; comments side panel.
4. **Templates**: blank, monthly budget, task tracker, weekly planner, invoice, inventory.

### Design system
Light. Tokens: `--background: #ffffff`, `--foreground: #020618`, `--primary: #0f172b`, `--primary-foreground: #f8fafc`, `--muted: #f1f5f9`, `--muted-foreground: #5f7089`, `--border: #e2e8f0`, `--ring: #8396b1`, selection `#2563eb` at 12% fill with a 2px border. Fonts: system UI stack for chrome; JetBrains Mono or `ui-monospace` for cells and the formula bar. Scale 12/13/14/16/36/60. Radius 10px cards, 6px controls, 0 inside the grid. Motion minimal (100-150ms) so editing feels instant. Add `--input-border: #7b97bb` for inputs and the formula bar.

### Components & interactions
Grid: arrow/Tab/Enter navigation, Shift for range selection, type-to-edit, F2 to edit in place, Escape to cancel, copy/paste TSV. Formula errors show `#REF!`, `#DIV/0!` with a tooltip. Sort dialog supports multiple keys. Find/replace with match case and whole-cell options. Autosave indicator: saving, saved, offline (retrying). Import shows preview and target-sheet choice. Empty workbook list offers templates.

### Data & state
Workbook, Sheet, Cells (sparse JSON per sheet or a cell table for very large sheets), CellComment. Keep an in-memory model for the grid and formula engine; debounce persistence (e.g. 800ms) with a dirty-cell queue. Undo/redo stack in memory. Seed each template with realistic, fictional numbers.

### Accessibility
Grid uses `role="grid"` with `aria-rowindex`/`aria-colindex`, and announces the active cell reference and value. Toolbar buttons labelled with `aria-pressed`. Visible focus outline distinct from selection. Provide keyboard shortcuts list. Ensure slate text passes 4.5:1 on white. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #020618 on #ffffff = 20.16:1; text #020618 on #f1f5f9 = 18.4:1; muted slate text #5f7089 on #ffffff = 5.04:1; muted slate text #5f7089 on #f1f5f9 = 4.6:1.

### Security
RLS: workbooks, sheets, cells and comments readable and writable only by `owner_id = auth.uid()`. Parse imported files client-side with size limits (e.g. 10 MB, 50k cells) and never execute macros. Escape formula-leading values (`=`, `+`, `-`, `@`) on CSV export to prevent injection into other tools. Sanitize comment text. Only the anon key in the client.

### Performance & SEO
Virtualise rows and columns; recalc only dependents; web worker for heavy recalcs. Code-split the editor and SheetJS. Landing page meta/OG, semantic headings, Lighthouse 95+; app `noindex`.

### Guardrails
- Original copy and templates; no office-suite logos or trademarked names.
- No fabricated usage stats.
- Typed components, no `any`, visible errors.
- Done when: formulas including cross-sheet references recalc correctly; XLSX import then export round-trips values and formulas; sort and find/replace work across a sheet; autosave survives a reload; another account cannot open your workbook.

Open the builderAll templatesThis palette on its own