dryui-build

DryUI Full Page: QA Tournament

Build a finished DryUI page from the supplied app mockup image. Use a short internal tournament before coding: consider three layouts, pick the strongest, then implement and repair.

Experiment Harness Rule

Run bun run build before finishing. Do not run bun run dev, bun run check, or a long-running screenshot/browser server during the agent step; the experiment harness performs browser capture and visual scoring after you finish.

Only edit src/routes/+page.svelte, src/layout.css, and src/app.css if necessary.

Internal Tournament

Consider three candidates:

• Faithful: closest to the visual shell in the image.
• Dense: best use of desktop and tablet space.
• Mobile-first: best mobile order and reduction.

Pick the candidate that best satisfies:

• primary task is obvious;
• responsive behavior is clear;
• desktop fills the canvas;
• mobile is useful;
• DryUI components can represent the details without brittle APIs.

Do not write the tournament into the UI.

Implementation Stages

Stage 1: layout map

• classify page as dashboard, board, CRM, settings, or knowledge;
• choose shell regions;
• choose mobile order, tablet split, desktop grid;
• decide guttered vs contiguous sections.

Stage 2: real DryUI page

• import @dryui/ui;
• use at least three of Button, Input, Badge, Table, Tabs, Separator;
• use simple static blocks for charts, document surfaces, boards, and previews;
• use concise invented content aligned to the app type;
• avoid copying exact mockup numbers, dates, names, and paragraphs.

Stage 3: repair

• run bun run build;
• check 390px, 820px, and 1440px;
• repair overflow, blank space, dark-on-dark surfaces, over-large side panels, and poor mobile order.

Required Shell Contract

<main data-layout="<type>-shell">
	<div data-layout-area="page">
		<header data-layout-area="topbar">...</header>
		<nav data-layout-area="navigation">...</nav>
		<section data-layout-area="primary">...</section>
		<aside data-layout-area="secondary">...</aside>
	</div>
</main>