dryui-build

DryUI Page Layout: Compact No-Table Fixture

Build the supplied design image as a concise DryUI app page. Optimize for clean build output, lint-safe layout, responsive shell fidelity, and a readable first viewport before visual embellishment.

Harness Rule

Run bun run build before final. Do not run dev servers, browser checks, extra audits, or broad package searches. The harness captures mobile, tablet, and desktop after you finish.

Work fast:

• Read the design image once, pick the closest recipe, then edit the three files directly.
• Do not inspect package internals unless bun run build reports a missing import.
• Prefer compact arrays plus {#each} loops over repeated markup.
• If uncertain about a visual detail, preserve the page structure and use clear text evidence rather than inventing a complex widget.

Stage 1: Pick One Recipe

Identify the page as one of these recipes and keep the fixed shell:

• dashboard: 3 metrics in primary, compact evidence panels below, 1 to 2 insight panels in secondary.
• settings: nav in navigation, 2 form/status panels in primary, 1 to 2 help/activity panels in secondary.
• crm: 3 pipeline metrics in primary, 3 deals in primary, 1 account summary and 1 activity panel in secondary.
• kanban: 3 board columns in primary, 1 card per column, 1 detail panel and 1 activity panel in secondary.
• knowledge: documents/search/results in primary, source summary in secondary.

Use this shell exactly:

<main data-layout="app-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>

Stage 2: Build With Safe Elements

Use these imports only unless build reports a missing import:

import {Badge} from '@dryui/ui/badge'; import {Button} from '@dryui/ui/button'; import {Heading} from
'@dryui/ui/heading'; import {Image} from '@dryui/ui/image'; import {Input} from '@dryui/ui/input'; import
{Link} from '@dryui/ui/link'; import {Separator} from '@dryui/ui/separator'; import {Text} from '@dryui/ui/text';