dryui-build

name	dryui-build
description	Experimental DryUI layout-only skill that extracts responsive page structure from design images as abstract colored blocks with strict shell areas, fixed page container queries, and visual self-checks. Use when testing design-image to layout-skeleton extraction.

DryUI Layout Blocks: Consolidated

Build only an abstract colored block layout skeleton. This is a layout extraction stage, not a UI implementation.

Only edit:

• src/routes/+page.svelte
• src/layout.css

Do not import anything. Do not use DryUI components, Lucide, icons, SVGs, images, charts, tables, forms, buttons, inputs, avatars, realistic widgets, copied text, copied metrics, copied dates, copied names, or generated business data.

1. Classify The Task

• Full page: build a page shell with topbar/navigation, primary, and optional secondary, utility, rail, summary, actions.
• Page section: build a section shell with primary and optional adjacent regions.

For full-page design-image references, treat the whole image as the page shell.

2. Blueprint Before Coding

Write the region plan mentally before editing:

• Mobile: one-column top-to-bottom order.
• Tablet: first useful two-pane/grouped composition.
• Desktop: persistent rail/sidebar, right panels, attached panes, dominant primary surface.

Decide:

• Which region is primary.
• Whether spacing is contiguous, guttered, or mixed.
• Which regions are secondary or utility, so they do not become larger than primary.
• Which visible bands are shell regions versus nested primitives.

3. Use Recipes Only For Proportions

Do not change required area names for a recipe.

• Dashboard: summary strip, primary chart/workspace, insights/activity.
• Board/Kanban: board is primary; task detail is secondary; activity is utility; desktop rail if present.
• CRM: table/pipeline is primary; account/detail is secondary; forecast/activity are utility.
• Settings/Admin: settings/profile/form stack is primary; help/status/activity are secondary/utility; compact actions; desktop rail if present.
• Knowledge/Document Reader: reader is primary; collections/list are navigation/secondary; AI summary is secondary/utility; reader must be largest at desktop.

4. Markup Contract

For a full page, use this direct-child shape:

<main data-layout="<name>-shell">
	<div data-layout-area="page">
		<header data-layout-area="topbar">Topbar</header>
		<nav data-layout-area="navigation">Navigation</nav>
		<section data-layout-area="primary">Primary</section>
		<aside data-layout-area="secondary">Secondary</aside>
	</div>
</main>

Rules:

• page, primary, and at least one of topbar or navigation are mandatory.
• Direct-child shell areas may only be: rail, topbar, navigation, summary, primary, secondary, utility, actions.
• Each shell area should appear once.
• data-layout-area is shell-only. Use it only on [data-layout-area='page'] and its direct children.
• Never put data-layout-area on nested spans, nested divs, articles, list items, labels, chips, cards, search placeholders, tabs, badges, rows, columns, or decorative blocks.
• Nested blocks must use data-layout="<specific-name>" and classes, never data-layout-area.
• Put recipe-specific meaning in text labels/classes, not direct-child area names.

5. Abstract Block Content

The skeleton should look like colored regions and blocks, not a finished UI.

• Visible text is restricted to these region labels only: Topbar, Navigation, Rail, Summary, Primary, Secondary, Utility, Actions.
• Use at most one visible label per shell region.
• Nested primitives should usually be empty elements.
• Do not copy visible text from the reference image.
• Do not create domain labels such as customer names, project names, document titles, settings names, money, dates, percentages, counts, or status text.
• Represent cards, controls, rows, tabs, charts, documents, columns, and copy as colored rectangles, lines, chips, and blocks.
• Use repeated abstract primitives to communicate density and grouping.
• Use distinct color families for region types, but keep the layout readable.

6. CSS Contract: Copy This Shape

Use the fixed container name page. Do not invent another container name.

[data-layout='<name>-shell'] {
	container: page / inline-size;
}

[data-layout='<name>-shell'] [data-layout-area='page'] {
	display: grid;
	grid-template-areas:
		'topbar'
		'navigation'
		'primary'
		'secondary';
	grid-template-columns: minmax(0, 1fr);
}

[data-layout='<name>-shell'] [data-layout-area='page'] > [data-layout-area='topbar'] {
	grid-area: topbar;
}

[data-layout='<name>-shell'] [data-layout-area='page'] > [data-layout-area='primary'] {
	grid-area: primary;
}

@container page (min-width: 48rem) {
}

@container page (min-width: 72rem) {
}

Hard rules:

• container: page / inline-size must appear exactly once on the shell selector.
• Use exactly @container page (min-width: 48rem).
• Use exactly @container page (min-width: 72rem).
• Never use @container <name>, @container (width...), or @container page (width>=...).
• Any CSS selector that targets a shell area other than page must use [data-layout-area='page'] > [data-layout-area='<area>'].
• Do not use broad descendant selectors like [data-layout='<name>-shell'] [data-layout-area='primary']; they can accidentally style nested blocks.

7. Layout Rules

• Mobile is one column only.
• Tablet must visibly use extra width when the reference has grouped panes.
• Desktop must preserve the reference shell: rail/sidebar, right inspector, attached panes, and dominant primary surface.
• Put all display: grid, display: flex, grid, flex, container, and breakpoint rules in src/layout.css.
• Use minmax(0, 1fr) for flexible tracks.
• Use only DryUI token gaps such as var(--dry-space-2), var(--dry-space-3), var(--dry-space-4), and var(--dry-space-6).
• If panes touch in the reference, use gap: 0; if gutters are visible, use token gaps.
• primary must be the largest or most visually dominant desktop content region.
• Utility/status/activity blocks must never be larger than primary.
• Do not create large blank shell regions. Every direct shell area should contain visible blocks near its top edge.
• Do not let mobile output become a long dump of every desktop primitive; summarize repeated content when the reference collapses.

8. Route Styling Rules

Route <style> is visual only:

• color, background, border, shadow, typography, padding inside blocks, labels, and min-block-size are allowed.
• display, grid-*, flex-*, container, @container, and @media are not allowed in route <style>.
• Keep labels short and generic.
• Use distinct accessible colors.

9. Visual Self-Check Before Finishing

After bun run build, inspect or reason through the 390px, 820px, and 1440px views:

• Shell regions change shape at the two container breakpoints.
• The primary region is visibly dominant on desktop.
• Navigation/rail and right-side utility panels attach in the same broad positions as the reference.
• No large blank region appears before the real content.
• No nested primitive is accidentally sized like a shell area.
• Text does not wrap awkwardly; if a label is unnecessary, remove it.

10. Source Self-Check Before Finishing

Run bun run build, then check:

• No import in src/routes/+page.svelte.
• No @dryui/ui, lucide, <button>, <input>, <form>, <table>, <img>, or <svg>.
• No copied text, numbers, dates, customer names, document titles, metrics, or statuses from the reference.
• No @media.
• No display, grid-*, flex-*, or @container in route <style>.
• src/layout.css contains exact container: page / inline-size.
• src/layout.css contains exact @container page (min-width: 48rem) and @container page (min-width: 72rem).
• Full page has exactly one direct child data-layout-area="primary".
• No nested primitive uses data-layout-area.
• 390px, 820px, and 1440px should not overflow horizontally or show a large blank shell region.