Mintrail

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 600, 30px/1.25, tracking -0.02em for the question
• InterBody: Inter 400, 16px/1.5; chip labels 15px 500; tips detail 14px muted

Patterns

• split-screen onboarding (form left, context right)
• checkbox chip list with selection cap
• progress bar tied to selection count
• add-custom chip
• floating tips card on dotted grid canvas
• full-width primary confirm button

States it is designed for

• loading suggested topics (6 skeleton chips)
• no suggestions found (only add-custom shown with helper)
• limit reached (unchecked chips dimmed but still readable)
• duplicate custom topic error
• topic too long (over 60 chars) error
• zero selected (confirm disabled with reason)
• saving
• save failed banner with retry
• success routes to next step

Who it is for

• marketing leads
• SEO and content strategists
• founders setting up brand monitoring

Layout

1. Left half (white): small workspace mark and site address row, large two-line question heading, 'Select up to N' label with a thin progress bar showing selected/limit, vertical list of checkbox chips, '+ Add custom' ghost chip, full-width black confirm button pinned near the bottom
2. Right half: very light grey canvas with a faint dotted grid texture; vertically centred tips card (title bar, three check-icon tips with bold lead and muted detail)
3. Below 900px: right panel collapses into a disclosure 'Tips' above the button; list becomes full-width

Palette

Monochrome, confident, low-friction. Black and white with one quiet texture keeps attention on the choice.

• surface#ffffff
• canvas#f7f7f7
• text#111111
• muted#6d6d6e
• chip#f4f4f4
• chip-border#8c8c8c
• hairline#e1e1e1
• primary#111111
• on-primary#ffffff
• progress#111111
• focus#2f6fdf
• error#c02828

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.

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

Type scale

Display

Inter 600, 30px/1.25, tracking -0.02em for the question

Body

Inter 400, 16px/1.5; chip labels 15px 500; tips detail 14px muted

Similar to the observed neo-grotesk; progress label 14px 500 with tabular numbers.

Spacing and imagery

Airy; 8px base; left column max 440px with 96px left inset on desktop; chips 36px tall, 8px vertical gap; radius 6px chips, 8px card and button; tips card has a 1px hairline and a soft 0 6px 24px rgba(0,0,0,.06) shadow.

No imagery. A subtle dotted grid pattern (CSS radial-gradient) on the right half; check glyphs in the tips card; a small square logo mark.

Components

• question heading
• selection counter with progress bar
• checkbox chip
• add-custom chip with inline input
• tips card with checklist
• primary confirm button
• limit-reached helper text

Interactions

• Clicking anywhere on a chip toggles it; Space toggles when focused
• Progress bar animates width 200ms as selections change
• Selecting beyond the cap is blocked and a helper line explains why
• '+ Add custom' turns into an inline input; Enter adds a checked chip, Escape cancels
• Custom chips show a remove (x) button on hover and focus
• Confirm shows a spinner while topics are saved and prompts generated

Data

• Workspace{id, site_url, owner_id}
• Topic{id, workspace_id, label, source (suggested|custom), selected bool, position}
• OnboardingProgress{workspace_id, step, completed_at}

Guardrails

Experience

• State the cap in the label and in the counter ('5 of 10 selected')
• Pre-select at most half the cap so users make an active choice
• Keep topics short; warn past 60 characters
• Let users remove custom topics but not suggested ones (untick instead)
• Explain what happens next in the tips card, not in a modal
• Keep the confirm button visible without scrolling on laptop heights

Accessibility

• Chips are real checkboxes inside labels, grouped in a fieldset with the question as legend
• Selection count is announced via aria-live when it changes
• The progress bar has role=progressbar with aria-valuenow and aria-valuemax
• Disabled-by-limit chips remain focusable with aria-disabled and an explanation
• The dotted texture is decorative and CSS-only
• Focus ring 2px blue with offset on chips, input and button

Security

• RLS: topics readable and writable only by members of the owning workspace
• Validate custom topic text length and strip markup server-side
• Enforce the selection cap in a database constraint or RPC, not only in the UI
• Rate-limit the suggestion generator endpoint per workspace

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 **Mintrail**, the topic-picking step of onboarding for a brand-visibility monitoring product. The user sees ten or so topics suggested from their website, keeps or unticks them, adds their own, and confirms. Each confirmed topic will later spawn a set of tracked questions, which the tips card explains.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Checkbox, Input, Button, Collapsible), lucide-react. TanStack Query for suggestions and save; zod for custom-topic validation; Supabase for auth and Postgres.

### Pages & layout
1. **/onboarding/topics**: two equal columns on desktop. Left: workspace mark and site address (muted), heading 'Which subjects should we track for you?', label 'Pick up to 10' with counter and a 4px progress bar, the chip list, '+ Add your own' chip, then a full-width black 'Continue' button.
2. Right: pale canvas with a dotted grid; a 380px tips card titled 'How topics work' with three items (e.g. 'Each topic creates a handful of tracked questions', 'Use words your customers search for', 'Keep it short: topics, not sentences').
3. Previous and next steps exist as stubs so the flow can be clicked through.
4. Mobile: single column; tips become a collapsible above the button; button sticks to the bottom with a white fade behind it.

### Design system
- Colors: `--surface: #ffffff`, `--canvas: #f7f7f7`, `--text: #111111`, `--muted: #6d6d6e`, `--chip: #f4f4f4`, `--chip-border: #8c8c8c`, `--hairline: #e1e1e1`, `--primary: #111111`, `--on-primary: #ffffff`, `--progress: #111111`, `--focus: #2f6fdf`, `--error: #c02828`.
- Fonts: Inter (similar to the observed neo-grotesk). Heading 30px/600 -0.02em; body 16px/1.5; chip 15px/500; helper 14px.
- Spacing: 8px base; chip padding 8px 12px; list gap 8px; section gap 32px.
- Radius: 6px chips, 8px buttons and cards.
- Shadows: tips card only.
- Motion: 200ms ease for progress width and chip check; respect reduced motion.

### Components & interactions
`TopicChip` (checkbox + label, checked shows filled black box with white tick, custom variant has remove button), `AddTopicChip` (toggles to input, Enter commits, Escape cancels), `SelectionMeter` (label, count, progressbar), `TipsCard`, `ContinueButton`. When the cap is hit, unchecked chips get aria-disabled and a helper line 'You've reached 10. Untick one to swap.' appears under the meter.

### Data & state
`topics(id, workspace_id, label, source, selected, position, created_at)`, unique (workspace_id, lower(label)). Suggestions come from an Edge Function that returns mock labels in development (e.g. 'Invoice automation for agencies', 'Distributed team payroll', 'Freelancer tax tips'). Local selection state is optimistic; the save call is a single RPC `save_topics(workspace_id, labels[])` that enforces the cap.

### Accessibility
Wrap chips in a `<fieldset>` with the heading as `<legend>`. Counter changes are announced politely. The progress bar exposes value and max. Custom-topic errors are linked to the input with aria-describedby. All controls reachable in DOM order; the right panel comes after the button in reading order on mobile.
Verified contrast: body text on white: #111111 on #ffffff = 18.88:1; muted tip text on white card: #6d6d6e on #ffffff = 5.17:1; chip label on chip fill: #111111 on #f4f4f4 = 17.17:1; primary button label: #ffffff on #111111 = 18.88:1; chip checkbox border on chip: #8c8c8c on #f4f4f4 = 3.06:1; progress fill on track: #111111 on #e1e1e1 = 14.44:1; focus ring on white: #2f6fdf on #ffffff = 4.71:1; error text on white: #c02828 on #ffffff = 5.87:1.

### Security
RLS on `topics` and `workspaces`: members only (`workspace_id in (select workspace_id from memberships where user_id = auth.uid())`). The save RPC is `security definer` with an explicit membership check and a max-10 guard. Sanitize labels (trim, collapse whitespace, reject angle brackets). Rate-limit suggestions to protect the generator.

### Performance & SEO
Prefetch suggestions during the previous step. Keep the texture as CSS, no image. Onboarding routes are noindex.

### Guardrails
- Use invented topics and a placeholder site address; no real brands
- Never auto-select more than half the cap
- Do not hide what topics are used for
- Keep copy short and plain
- Acceptance criteria: (1) selecting an eleventh topic is blocked with an announced explanation; (2) custom topics persist and can be removed; (3) the cap is enforced server-side; (4) keyboard-only users can complete the step; (5) the layout is usable at 390px.

Open the builderAll templatesThis palette on its own