Parcelmoss

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.

• Source Sans 3Headings: Source Sans 3 600, 20px
• Source Sans 3Body: Source Sans 3 400 16px/1.5

Patterns

• bucket breadcrumb header with copy button
• Files / Settings tabs
• two-card getting-started (web upload vs CLI)
• install-method tab switcher on code block
• copy-per-snippet buttons
• right rail with key/value stats
• region chips for CDN pre-warm
• dark primary + outlined secondary action pair

States it is designed for

• empty bucket (getting-started cards)
• uploading (tray with per-file progress)
• partial failure (retry failed files)
• populated (file table replaces cards)
• folder navigation with breadcrumb
• quota exceeded (upload disabled with message)
• read-only access (upload hidden)
• loading skeleton rail

Who it is for

• ML engineers
• data engineers
• researchers sharing large artefacts

Layout

1. global top bar
2. header band: 'Buckets:' label, owner / bucket name in monospace, copy icon
3. tabs: Files (active) and Settings
4. main (~65%): 'Getting started with your bucket' then two cards: web upload (description, Upload files button, faint dotted artwork) and CLI (description with inline code, tabs cURL / package manager / Python tool / runner, two code blocks with copy)
5. right rail: dark 'Sync this bucket' button, outlined 'Use this bucket', overflow; stats list (total size, files, last updated, CDN region chips)
6. site footer with theme switch and links
7. populated: file table with path, size, updated, actions; breadcrumb for folders
8. mobile: rail above cards; cards stack

Palette

Practical and developer-first; the two paths are presented as equals.

• page background#ffffff
• header band / insets#f7f8fa
• primary text#111827
• secondary text#5f6672
• dark primary button#0b0f19
• outline border#8a8f98
• code comment#667085
• keyword highlight#b4233a
• region chip border#d1d5db
• link#2d5bd7

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

Source Sans 3 600, 20px

Body

Source Sans 3 400 16px/1.5

Bucket name JetBrains Mono 600 18px; code JetBrains Mono 14px; stats labels 15px muted, values 15px tabular right-aligned.

Spacing and imagery

Comfortable: cards 24px padding, 12px radius, 1px border; code insets 8px radius; rail rows 32px; buttons 32px tall, 6px radius.

Faint dotted/pixel texture inside the web-upload card as decoration; tiny flag-style region icons; line icons for tabs.

Components

• BucketHeader with CopyButton
• Tabs
• UploadCard with Dropzone
• CliCard with InstallTabs and CodeBlock
• ActionBar (Sync, Use, overflow)
• StatsList
• RegionChip
• FileTable
• UploadProgressTray

Interactions

• Upload files opens a picker; dragging files anywhere on the card also works
• progress tray lists each upload with cancel/retry
• install tabs swap the install command; the sync command stays
• copy buttons confirm with a check
• 'Sync this bucket' opens a sheet with a prefilled command and token instructions
• 'Use this bucket' shows code for reading from the bucket in an SDK

Data

• Bucket{id, owner_id, name, visibility, total_bytes, file_count, updated_at, prewarm_regions text[]}
• BucketObject{id, bucket_id, path, size_bytes, content_type, sha256, uploaded_by, uploaded_at}
• BucketMember{bucket_id, user_id, role (read|write|admin)}

Guardrails

Experience

• Present browser upload and CLI side by side with equal weight.
• Interpolate the real bucket path into every command.
• Keep stats honest: '0 bytes', '0 files' rather than dashes when empty.
• Show upload progress persistently, even when navigating tabs.
• Name CDN regions in words next to any icon.

Accessibility

• Dropzone is also a labelled button; drag-and-drop is never the only way.
• Upload progress uses progressbar roles with file names and percentages.
• Code blocks are focusable, scrollable and have Copy buttons with labels.
• Stats list is a description list (dt/dd).
• Tabs follow the ARIA pattern.

Security

• Upload via short-lived signed URLs; validate size and path server-side; reject '..' and absolute paths.
• RLS: objects readable per bucket visibility or membership; writes need write role.
• Never place tokens in commands; reference an environment variable instead.
• Scan uploaded archives' metadata and cap per-file size by plan.

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 **Parcelmoss**, the files page of a storage bucket on a machine-learning hub. New buckets show two getting-started cards (web upload and CLI sync) and a stats rail; once files exist the page becomes a folder-aware file table with upload progress.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Tabs, Sheet, Progress, Table, DropdownMenu), lucide-react, TanStack Query, zod, date-fns. Supabase Auth, Postgres and Storage (signed upload URLs).

### Pages & layout
1. **Hub shell**: top bar and footer.
2. **/buckets/:owner/:name** Files tab: header, cards or file table, rail.
3. **Settings tab**: visibility, members, pre-warm regions, delete bucket (typed confirmation).
4. **Sync sheet** and **Use sheet** with code.

### Design system
- Colors: `--bg: #ffffff` (page background), `--surface: #f7f8fa` (header band / insets), `--fg: #111827` (primary text), `--muted: #5f6672` (secondary text), `--primary: #0b0f19` (dark primary button), `--outline: #8a8f98` (outline border), `--comment: #667085` (code comment), `--keyword: #b4233a` (keyword highlight), `--chip: #d1d5db` (region chip border), `--link: #2d5bd7` (link).
- Fonts: Source Sans 3 600, 20px for headings; Source Sans 3 400 16px/1.5 for body. Bucket name JetBrains Mono 600 18px; code JetBrains Mono 14px; stats labels 15px muted, values 15px tabular right-aligned.
- Spacing: Comfortable: cards 24px padding, 12px radius, 1px border; code insets 8px radius; rail rows 32px; buttons 32px tall, 6px radius.
- Radius: 12px cards, 8px code insets, 6px buttons, full pills for region chips.
- Shadows: none.
- Motion: progress bars animate width; 150ms copy feedback.

### Components & interactions
BucketHeader, Tabs, UploadCard, Dropzone, CliCard, InstallTabs, CodeBlock, CopyButton, ActionBar, StatsList, RegionChip, FileTable, Breadcrumb, UploadProgressTray, DeleteBucketDialog.

Interactions: Upload files opens a picker; dragging files anywhere on the card also works; progress tray lists each upload with cancel/retry; install tabs swap the install command; the sync command stays; copy buttons confirm with a check; 'Sync this bucket' opens a sheet with a prefilled command and token instructions; 'Use this bucket' shows code for reading from the bucket in an SDK.

States to build: empty bucket (getting-started cards); uploading (tray with per-file progress); partial failure (retry failed files); populated (file table replaces cards); folder navigation with breadcrumb; quota exceeded (upload disabled with message); read-only access (upload hidden); loading skeleton rail.

### Data & state
Totals are maintained by a trigger on `bucket_objects`. Uploads: request signed URL → PUT → insert object row. Seed one empty bucket and one with 40 files in 3 folders (invented dataset names).

Model: `Bucket{id, owner_id, name, visibility, total_bytes, file_count, updated_at, prewarm_regions text[]}`; `BucketObject{id, bucket_id, path, size_bytes, content_type, sha256, uploaded_by, uploaded_at}`; `BucketMember{bucket_id, user_id, role (read|write|admin)}`.

### Accessibility
Dropzone is also a labelled button; drag-and-drop is never the only way. Upload progress uses progressbar roles with file names and percentages. Code blocks are focusable, scrollable and have Copy buttons with labels. Stats list is a description list (dt/dd). Tabs follow the ARIA pattern.
Verified contrast: body text: #111827 on #ffffff = 17.74:1; muted text: #5f6672 on #ffffff = 5.78:1; code comment on inset: #667085 on #f7f8fa = 4.68:1; keyword highlight on inset: #b4233a on #f7f8fa = 6.1:1; dark button label: #ffffff on #0b0f19 = 19.15:1; outline button border: #8a8f98 on #ffffff = 3.25:1; link: #2d5bd7 on #ffffff = 5.85:1.

### Security
Upload via short-lived signed URLs; validate size and path server-side; reject '..' and absolute paths. RLS: objects readable per bucket visibility or membership; writes need write role. Never place tokens in commands; reference an environment variable instead. Scan uploaded archives' metadata and cap per-file size by plan. RLS per table: `buckets` select if public or member, update/delete by admin members; `bucket_objects` select follows bucket, insert/delete by write members; `bucket_members` managed by admins. Deleting a bucket requires typing its name and is audited.

### Performance & SEO
Paginate file table (100 rows) and virtualise; upload with concurrency 3 and chunking for large files. Public bucket pages get title/description meta; private ones noindex.

### Guardrails
- Present browser upload and CLI side by side with equal weight.
- Interpolate the real bucket path into every command.
- Keep stats honest: '0 bytes', '0 files' rather than dashes when empty.
- Show upload progress persistently, even when navigating tabs.
- Name CDN regions in words next to any icon.
- Write all copy fresh; use invented people, companies and numbers only. No real brands, logos, wordmarks or third-party product names anywhere in the UI or seed data.
- Do not trace or copy any existing product's layout assets, icons or illustrations; draw generic ones.
- Acceptance criteria:
  - [ ] Empty bucket shows both cards with the real path in commands
  - [ ] Uploads show progress and can be retried
  - [ ] Stats update after uploads
  - [ ] File table navigates folders
  - [ ] Read-only members cannot upload

Open the builderAll templatesThis palette on its own