dryui-build

DryUI Full Page: Component First

Build the supplied image as a real DryUI page. Reliability matters: prefer proven DryUI APIs and simple static composition over clever custom widgets.

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 needed.

Safe Component Examples

Use these shapes:

<script lang="ts">
	import { Badge, Button, Input, Separator, Table, Tabs } from '@dryui/ui';
</script>

<Button size="sm" variant="solid">Save</Button>
<Input size="sm" aria-label="Search" placeholder="Search" />
<Badge size="sm" variant="soft" color="green">Active</Badge>
<Separator />

<Table.Root>
	<Table.Header>
		<Table.Row><Table.Head>Name</Table.Head></Table.Row>
	</Table.Header>
	<Table.Body>
		<Table.Row><Table.Cell>Account</Table.Cell></Table.Row>
	</Table.Body>
</Table.Root>

Do not pass class to DryUI components. Put layout and visual styling on wrappers with data-layout.

Process

1. Classify the page type: dashboard, board, CRM, settings, or knowledge.
2. Build the page shell and direct shell areas.
3. Fill each shell area with a small set of real DryUI components and simple static blocks.
4. Use src/layout.css for all layout.
5. Run bun run build.
6. Check mobile, tablet, and desktop behavior and repair.

Shell Areas

Use one shell:

<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>

Allowed shell areas: rail, topbar, navigation, summary, primary, secondary, utility, actions.