Revision 12 of 16
Drops Postrboard and the replicate-the-reference rules; the design system is now simply Bulma CSS with Font Awesome icons.
+2 −8 lines of text vs revision 11 (this site's diff)
| Old | New | Change | Line |
|---|---|---|---|
| @@ -2,10 +2,6 @@ | |||
| 2 | 2 | ||
| 3 | 3 | Build the complete application in this repository. Work autonomously from start to finish and stop only when the app is complete. | |
| 4 | 4 | ||
| 5 | − | If a minor detail is not specified, choose a reasonable solution and document it. Replicate the observable user experience of the reference app exactly: page structure, visible copy (button labels, errors, headings, tooltips, states), and interactions (what happens, in what order, on every action). Do **not** replicate the reference app's visual design, CSS framework, icon set, or color palette — restyle every screen using this repository's own Postrboard design system instead. Do not copy the reference app's implementation or framework. | |
| 6 | − | ||
| 7 | − | **Structure and interaction patterns are part of the UX, not the visual design.** Replicate them: which values are plain text edited in place versus real input boxes, what is a full-width band versus a card, which controls sit outside versus inside a card, and where each element sits. Restyle those structures with Postrboard; do not change them. | |
| 8 | − | ||
| 9 | 5 | ## Mocks | |
| 10 | 6 | ||
| 11 | 7 | <img width="1729" height="1318" alt="image" src="https://gist.github.com/user-attachments/assets/e5bab31f-5a2e-4315-8648-1796699856bc" /> | |
| @@ -43,9 +39,7 @@ | |||
| 43 | 39 | ||
| 44 | 40 | Use the Node.js runtime, not Edge, for SQLite, sessions, file access, and metadata fetching. | |
| 45 | 41 | ||
| 46 | − | Design system: use this repository's **Postrboard** design system for every screen — invoke and follow its skill/guidelines (native components first, restrained and honest content, no generic AI design) rather than the reference app's Bulma/Font Awesome look. Do not port Bulma classes, Font Awesome icons, the Roboto font, or the reference app's color tokens, shadows, or animations. Where the reference app conveys state or affordance visually (e.g., an invalid-input highlight, a disabled button, a loading skeleton, a toast/modal), reproduce that same *behavior* — something is visibly invalid, disabled, loading, or confirmed — using Postrboard's own components and idioms, not its specific CSS. | |
| 47 | − | ||
| 48 | − | Icons, illustrations, and images: recreate each reference asset's *purpose* (brand mark, mobile menu affordance, hero illustration, image placeholder, tile texture, not-found mascot) as a Postrboard-native equivalent instead of copying the source SVG/PNG files or filenames. | |
| 42 | + | Design system: use Bulma CSS for every screen and fontawesome for icons. | |
| 49 | 43 | ||
| 50 | 44 | ## Product | |
| 51 | 45 | ||
| @@ -74,7 +68,7 @@ | |||
| 74 | 68 | ||
| 75 | 69 | ### Navigation bar | |
| 76 | 70 | ||
| 77 | − | A Postrboard-styled navbar. Left: brand/logo (alt "urlist logo"); on mobile, a menu toggle that expands the menu. Menu items in this order, each an icon plus label (use Postrboard's own icon set, matching each icon's meaning below, not a specific glyph): | |
| 71 | + | A navbar. Left: brand/logo (alt "urlist logo"); on mobile, a menu toggle that expands the menu. Menu items in this order, each an icon plus label: | |
| 78 | 72 | ||
| 79 | 73 | 1. `New` — a "create/add" icon | |
| 80 | 74 | 2. `My Lists` — a "user/account" icon — **only when signed in** | |