dryui-build

DryUI Page Layout Blocks

This experimental skill only proves page structure. Build labelled colored blocks that represent page regions. Do not build a polished UI, charts, product cards, photos, or final component styling unless the user explicitly asks after the layout passes.

Output

Edit only:

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

The page must communicate structure through block labels such as Header, Navigation, KPI Strip, Primary Workspace, Secondary Panel, Activity List, and Footer.

Do not import anything for this prototype. No @dryui/ui, no Lucide icons, no app icons, no chart/table widgets, and no component libraries. Use only native semantic HTML elements and CSS.

Construction Order

1. Decide whether the request is a full page or a section.
2. If a design, screenshot, mockup, or reference image is supplied, decide the section spacing mode before markup: contiguous or guttered.
3. For a full page, create exactly one page shell: <main data-layout="<name>-shell">.
4. Put one direct child inside the shell: <div data-layout-area="page">.
5. Add semantic child regions with data-layout-area, not generic wrappers.
6. Put all grid/flex/container rules in src/layout.css.
7. Put only block color, borders, text color, and typography in the route <style> block.

Section Spacing Decision

Before writing layout CSS, inspect the handed design:

• If adjacent page sections touch edge-to-edge, use spacing=contiguous.
• If the design shows visible gutters, page padding, or white space between regions, use spacing=guttered.
• If no design is supplied, default to spacing=guttered for readability.

For spacing=contiguous:

• Do not add visible white gaps between grid sections.
• Set the page grid gap: 0.
• Set page padding to 0 unless the reference shows an outer margin.
• Do not let the shell/body background show between colored regions.
• Use borders or internal block color contrast only when the reference shows seams or dividers.