dryui-build

name	dryui-build
description	Experimental DryUI layout-only skill that extracts responsive colored-block page structure from design images using a fixed page container query contract. Use when testing full-page or section layout skeletons before detailed UI implementation.

DryUI Layout Blocks: Fixed Page Container

Build only a colored block layout skeleton. Do not recreate detailed UI.

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, or generated 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 work 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.

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 workspace</section>
		<aside data-layout-area="secondary">Secondary panel</aside>
	</div>
</main>

Rules:

• page, primary, and at least one of topbar or navigation are mandatory.
• Direct-child areas may only be: rail, topbar, navigation, summary, primary, secondary, utility, actions.
• Put recipe-specific meaning in text labels/classes, not direct-child area names.
• Nested blocks may use data-layout="<specific-name>"; their layout rules still belong in src/layout.css.

5. 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);
}

@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>=...).

6. 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.
• 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.

7. 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 readable.
• Use distinct accessible colors.

8. 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 @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 direct-child data-layout-area="primary".
• 390px, 820px, and 1440px should not overflow horizontally.