Website Rebuild

Workflow for rebuilding an existing website with daisyUI 5 + Tailwind 4 on PageWeave.

v1.1.0 · MIT · .md

Website Rebuild

Guide for rebuilding an existing website on PageWeave with daisyUI 5 + Tailwind CSS 4. Scrape the source site, extract its brand identity and copy, then build a modern, opinionated version.

Workflow

Discover — Fetch the source URL. Look at title, headings, internal links.
Survey — Crawl 5-10 pages from the source site. Prioritize homepage, about, services, pricing, contact.
Identity — Decide on brand name, tagline, voice, target audience. State your choice out loud before building.
Palette — Inspect the source's CSS for colors and fonts. Map to a daisyUI custom theme. Always use OKLCH for theme variables.
Assets — Upload the logo and 1-3 hero images with upload_asset. Use list_assets to confirm. Skip stock photos and obvious third-party trackers.
Build — Create pages with create_page. Start with homepage, then about/services/etc. Use update_page to refine.
Theme — Set the daisyUI theme with set_theme (CSS variables in OKLCH).
Components — Set the header and global <head> (update_component with component: "header" / component: "html_head") last.

Principles

No templated defaults. This is not a stock landing-page generator. Read the frontend-design skill before writing any HTML.
Be opinionated. Pick a single signature element per site and execute it well. Cut everything else that doesn't serve the brief.
Don't generate copy if you can preserve it. Reuse the source's actual copy wherever possible. Trim, don't invent.
Match the source's information density. Don't add sections the source doesn't have. Don't drop sections the source has unless they're clearly low-value.
Always use daisyUI semantic colors (bg-primary, text-base-content). Never raw Tailwind color names. Theme switching must work.
Responsive by default. Mobile-first. Test in your head: does this work at 375px wide?
No inline JavaScript. daisyUI components are CSS-only. If a behavior is needed, pick a CSS-only variant (e.g., <details> for collapsibles).

daisyUI theme generation

Use OKLCH. Map source-extracted colors to daisyUI variables:

[data-theme="custom"] {
  --color-base-100: oklch(98% 0.01 240);
  --color-base-200: oklch(95% 0.02 240);
  --color-base-300: oklch(92% 0.03 240);
  --color-base-content: oklch(20% 0.05 240);
  --color-primary: oklch(55% 0.3 <hue>);
  --color-primary-content: oklch(98% 0.01 <hue>);
  --color-secondary: oklch(70% 0.25 <hue2>);
  --color-secondary-content: oklch(98% 0.01 <hue2>);
  --color-accent: oklch(65% 0.25 <hue3>);
  --color-accent-content: oklch(98% 0.01 <hue3>);
  --color-neutral: oklch(50% 0.05 240);
  --color-neutral-content: oklch(98% 0.01 240);
  --color-info: oklch(70% 0.2 220);
  --color-success: oklch(65% 0.25 140);
  --color-warning: oklch(80% 0.25 80);
  --color-error: oklch(65% 0.3 30);
  --radius-selector: 1rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

Rules:

All variables above are required.
Pick 3 vivid hues from source colors for primary/secondary/accent. Use 240 (blue-ish) as fallback for base/neutral.
*-content colors should contrast ≥4.5:1 with their parent color (use light tints of the same hue).

Tools

See references/:

references/asset-handling.md — when to re-host vs. hotlink, what to skip
references/page-structure.md — typical page patterns for homepage/about/contact
references/theme-extraction.md — algorithm for deriving OKLCH palette from scraped hex colors

Deeper reference

The vendored daisyui skill covers the component catalog. For exhaustive component docs, syntax variations, and edge cases, fetch the full reference: https://daisyui.com/llms.txt (71KB). Use it when the daisyui skill's coverage isn't enough.

References

theme-extraction .md
page-structure .md
asset-handling .md

← all skills