Revision 2 of 16
Adds a Required design skill section that mandates the Postrboard design language and makes drag-and-drop the primary way to reorder links.
+33 −2 lines of text vs revision 1 (this site's diff)
| Old | New | Change | Line |
|---|---|---|---|
| @@ -6,6 +6,22 @@ | |||
| 6 | 6 | ||
| 7 | 7 | Do not access or copy an existing implementation of The Urlist. | |
| 8 | 8 | ||
| 9 | + | ## Required design skill | |
| 10 | + | ||
| 11 | + | Before you design or implement the user interface, invoke the `/postrboard` skill and follow its instructions. | |
| 12 | + | ||
| 13 | + | Use the Postrboard design language across the complete application. Its behavioral rules, tokens, components, layout guidance, accessibility rules, and self-review requirements are mandatory. | |
| 14 | + | ||
| 15 | + | The result must feel specific to The Urlist: | |
| 16 | + | ||
| 17 | + | - Treat list creation and editing as the primary work surface. | |
| 18 | + | - Keep the design calm, code-native, restrained, and content-led. | |
| 19 | + | - Do not use generic SaaS sections, decorative cards, fake metrics, invented social proof, gradient blobs, emoji, or icon grids. | |
| 20 | + | - Use Postrboard classes and tokens before custom CSS. | |
| 21 | + | - Use one deliberate accent per surface and keep semantic status colors meaningful. | |
| 22 | + | - Use concise labels that describe actual objects, actions, states, and consequences. | |
| 23 | + | - Run the Postrboard self-review scan before declaring the interface complete. | |
| 24 | + | ||
| 9 | 25 | ## Product | |
| 10 | 26 | ||
| 11 | 27 | The Urlist lets people create ordered lists of web links and publish each list at one short public URL. | |
| @@ -178,15 +194,29 @@ | |||
| 178 | 194 | - Delete links | |
| 179 | 195 | - Edit title | |
| 180 | 196 | - Edit description | |
| 181 | − | - Reorder links | |
| 197 | + | - Reorder links with drag-and-drop | |
| 182 | 198 | ||
| 183 | 199 | Authors cannot directly edit: | |
| 184 | 200 | ||
| 185 | 201 | - Destination URL | |
| 186 | 202 | - Image URL | |
| 187 | 203 | ||
| 188 | − | Reordering must work with pointer input and keyboard controls. Provide named Move up and Move down actions. Drag-and-drop alone is not sufficient. | |
| 204 | + | Drag-and-drop is the primary reordering interaction. | |
| 189 | 205 | ||
| 206 | + | Requirements: | |
| 207 | + | ||
| 208 | + | - Each editable link has a visible drag handle. | |
| 209 | + | - A pointer user can drag a link to any position in the list. | |
| 210 | + | - The interface shows clear picked-up, dragging, valid-drop-position, and dropped states. | |
| 211 | + | - The list updates immediately after a drop. | |
| 212 | + | - The new order persists in the browser-local draft. | |
| 213 | + | - Saving an account-owned list persists the new order in SQLite. | |
| 214 | + | - The public list displays the saved order. | |
| 215 | + | - Reordering works at desktop and mobile widths. | |
| 216 | + | - Touch input is supported where the browser provides it. | |
| 217 | + | ||
| 218 | + | Also provide named Move up and Move down controls so reordering works with a keyboard and assistive technology. Drag-and-drop alone is not sufficient. | |
| 219 | + | ||
| 190 | 220 | ## Live metadata enrichment | |
| 191 | 221 | ||
| 192 | 222 | After a link is added, fetch and parse the live destination page on the server. | |
| @@ -741,6 +771,7 @@ | |||
| 741 | 771 | - Delete, tombstone, and restore | |
| 742 | 772 | - Public Links and QR views | |
| 743 | 773 | - Theme persistence | |
| 774 | + | - Pointer drag-and-drop reordering and persisted public order | |
| 744 | 775 | - Keyboard operation | |
| 745 | 776 | - Mobile layout | |
| 746 | 777 | ||