--- name: website-rebuild description: Workflow for rebuilding an existing website with daisyUI 5 + Tailwind 4 on PageWeave. version: 1.1.0 license: MIT --- # 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 1. **Discover** — Fetch the source URL. Look at title, headings, internal links. 2. **Survey** — Crawl 5-10 pages from the source site. Prioritize homepage, about, services, pricing, contact. 3. **Identity** — Decide on brand name, tagline, voice, target audience. State your choice out loud before building. 4. **Palette** — Inspect the source's CSS for colors and fonts. Map to a daisyUI custom theme. Always use OKLCH for theme variables. 5. **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. 6. **Build** — Create pages with `create_page`. Start with homepage, then about/services/etc. Use `update_page` to refine. 7. **Theme** — Set the daisyUI theme with `set_theme` (CSS variables in OKLCH). 8. **Components** — Set the header and global `` (`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., `
` for collapsibles). ## daisyUI theme generation Use OKLCH. Map source-extracted colors to daisyUI variables: ```css [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 ); --color-primary-content: oklch(98% 0.01 ); --color-secondary: oklch(70% 0.25 ); --color-secondary-content: oklch(98% 0.01 ); --color-accent: oklch(65% 0.25 ); --color-accent-content: oklch(98% 0.01 ); --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.