DEV Community

49 pips
49 pips

Posted on

Wayback Witch: A Kiro‑Powered Necromancer for the Web

Wayback Witch: Resurrecting Dead Websites with Kiro
We built Wayback Witch, an open-source tool that resurrects "dead" websites from the Wayback Machine and old ZIP archives, transforming them into modern, accessible, lightning-fast apps — all powered by Kiro's vibe coding, specs, agent hooks, steering docs, and MCP. Think: GeoCities to Next.js in minutes (with a spooky "Costume Mode" if you dare).
Links

Live demo: https://waybackwitch.app
Repo (MIT): https://github.com/yourname/wayback-witch
3-min demo video: https://youtu.be/your-demo-link

Why we built it (summon the problem)
Old web content is rotting in the grave: tables for layout, broken links, Flash shards, and SEO ghosts. We wanted to bring it back to life — fast — while keeping the original spirit. Kiroween's "Resurrection" category was the perfect ritual.
What it does (spells and features)

Import from the Beyond: Pulls pages from the Wayback Machine or local ZIPs of legacy sites.
Semantic Transmogrification: Converts table/frameset layouts to semantic components.
Auto-Routing + SSR: Outputs a modern Next.js/Astro app with SSR and file-based routing.
Asset Exorcism: Rewrites broken links, finds missing assets, and generates fallbacks.
Accessibility + SEO: Adds ARIA, headings, alt text, meta tags, and structured data.
Costume Mode: One toggle applies a meticulously spooky but accessible UI theme (CSS variables, prefers-color-scheme, reduced motion respectful).
Resurrection Report: A diffable report explaining every transformation, with before/after screenshots.

How we used Kiro (the grimoire)
We leaned hard on Kiro to go from idea to implementation. Here's how:
Vibe coding (prototyping in the dark)

Chatted through the end-to-end pipeline and generated the first working importer (crawler → parser → transformer → renderer).
Pair-built the table-to-grid converter and link-rewriter with test scaffolds.
Used vibe sessions to spike "Costume Mode" tokens and utility classes quickly.

Spec-driven development (bones and runes)
We defined the entire resurrection flow in specs that Kiro could implement against. Excerpt from /.kiro/specs/resurrection.md:
text# Resurrection Pipeline Spec
Modules:

  • crawler: Fetch archived snapshots (Wayback API, local ZIP)
  • parser: Build DOM tree; preserve original structure for mapping
  • transformer:
    • layout:
      / → / components
    • media: Flash → MP4/WebM fallback or static poster
    • links: Rewrite internal links; mark dead externals
    • a11y: Headings, landmarks, alt text inference
    • renderer: Next.js pages + components; Tailwind + theme tokens
    • report: JSON + HTML report w/ screenshots Contracts:
    • Each module is idempotent; pure inputs/outputs for CI reproducibility Acceptance:
    • 95%+ links valid after rewrite
    • Lighthouse > 90 perf/a11y on sample set This spec let us iterate safely and keep Kiro's codegen consistent, even as we added features. Agent hooks (automation familiars) We wired Kiro hooks to automate tedious rituals:

      • on/open-PR: Generate missing tests for new transformers, run Playwright snapshots, attach Resurrection Report.
      on/spec-change: Regenerate module docs and interface stubs, update dependency graph.
      on/demo-build: Bump demo site, run Lighthouse, post metrics to PR thread.

      Snippet from /.kiro/hooks/on-open-pr.yaml:
      texttriggers: [pull_request.opened]
      steps:

      • run: kiro generate tests --changed
      • run: pnpm test --reporter=dot
      • run: pnpm build:demo && pnpm lighthouse:ci
      • artifact: upload ./artifacts/resurrection-report.html Steering docs (keep the spirits aligned) We used steering to steer responses and code style:

      Architecture guardrails: "Prefer pure transforms; no in-function I/O; errors bubble with typed results."
      UI tone: "Gothic-but-accessible. High contrast, motion reduced, no text in images. Meets WCAG AA."
      CSS strategy: "Tokens-first; no arbitrary colors outside theme map."

      Excerpt from /.kiro/steering/ui-style.md:
      textVoice: Haunted elegance, never gimmicky.
      Do: skeleton loaders, foggy gradients, subtle grain.
      Don't: unreadable neon, excessive motion, jump scares.
      Accessibility: Respect prefers-reduced-motion; ≥4.5:1 contrast.
      MCP (tools from the underworld)
      We extended Kiro with MCP tools to reach beyond the IDE:

      wayback.fetch: Query snapshots and fetch archived HTML/assets.
      github.pr: Open PRs with generated reports and screenshots.
      lighthouse.audit: Run CLI audits and return scores/JSON.

      MCP manifest excerpt:
      texttools:

      • name: wayback.fetch description: Fetch Wayback snapshot args: { url: string, timestamp?: string }
      • name: lighthouse.audit description: Run Lighthouse on a URL args: { url: string } Architecture (the ritual circle)

      Input: Wayback URL or ZIP
      Crawler → Parser → Transformers (layout, media, links, a11y) → Renderer (Next.js/Astro)
      Report generator + screenshots
      Deploy to Vercel/Netlify via GitHub action
      Kiro agent hooks keep the loop tight on PRs and releases

      Tech stack

      Next.js 15 (app router) or Astro, React 18, TailwindCSS
      Playwright for visual diffs, Lighthouse CI for audits
      Node 20+, pnpm, Vercel for deploys
      Kiro: vibe coding, specs, hooks, steering, MCP (Wayback, Lighthouse, GitHub)

      Results so far (numbers from our graveyard)

      12 vintage pages resurrected (1998–2006)
      Average Lighthouse: 95 Performance / 100 Accessibility
      ~83% of broken links fixed automatically; remainder flagged with reasons
      First import → deploy under 10 minutes with Kiro's help

      Try it locally

      Clone: git clone https://github.com/yourname/wayback-witch && cd wayback-witch
      Install: pnpm install
      Import: pnpm witch:import --url https://example.com --snapshot 20050717
      Dev: pnpm dev (open http://localhost:3000)
      Costume Mode: Toggle in the header or set THEME=costume in .env

      How Kiro changed our process

      From vibes to verified: We sketched in chat, then locked behavior in specs that Kiro implemented.
      Hooks = momentum: PRs come with tests, reports, and audits by default.
      Steering prevented drift: Kiro's output stayed consistent with our architecture and UI principles.
      MCP made the impossible convenient: Reaching Wayback and Lighthouse from inside the IDE kept us in flow.

      What's next

      OCR for image-only text pages
      Heuristics to modernize legacy navs into accessible menus automatically
      Multi-language cloning and translation pass
      One-click deploy wizard (GitHub → Vercel/Netlify)

      Credits
      Built by [radebe49]. Huge thanks to the Kiroween crew for the prompt to embrace the darkness and ship something wicked.

      kiro #hookedintokiro

Top comments (0)