Qwik Resumability Builder

Scaffolds and extends Qwik + Qwik City applications that resume on the client instead of hydrating, so the browser ships almost no JavaScript on first load. This skill is for developers who want React-like ergonomics (JSX, components, hooks) but need the lowest possible Time-to-Interactive on content-heavy or edge-deployed sites — marketing pages, storefronts, dashboards, and anything where Core Web Vitals matter.

When to use it

• You're starting a new Qwik City project and want correct routing, layouts, and data-loading patterns from the first commit.
• An existing React/Next app has poor TTI from large hydration bundles and you're evaluating Qwik.
• You need server-only logic (DB calls, secrets) co-located with components via server$, routeLoader$, and routeAction$.
• You're deploying to an edge runtime (Cloudflare Pages, Vercel Edge, Netlify) and need the matching adapter wired up.

What it does

It generates the src/routes/ file-based tree where index.tsx is a page, layout.tsx wraps nested routes, and bracket folders like [slug]/ are dynamic params. Components are authored with component$(), state with useSignal() / useStore(), and side effects with useTask$() / useVisibleTask$(). The skill wires data with routeLoader$() (runs on the server, awaited in components), routeAction$() + <Form> for mutations, and server$() for RPC-style server functions callable from the client. Every $ boundary is a lazy-loaded chunk, which is the mechanism behind resumability — handlers download only when an event actually fires.

Usage example

curl -fsSL --create-dirs -o ~/.claude/skills/qwik-resumable-builder/SKILL.md https://claudeskil.com/skills/qwik-resumable-builder/SKILL.md

# then, in your project
npm create qwik@latest
npm run qwik add cloudflare-pages   # or vercel-edge, netlify-edge
npm run dev

// src/routes/product/[id]/index.tsx
import { component$ } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';

export const useProduct = routeLoader$(async ({ params }) => {
  return db.product.find(params.id); // server-only
});

export default component$(() => {
  const product = useProduct();
  return <h1>{product.value.name}</h1>;
});

Tips & gotchas

• Reach for useVisibleTask$() sparingly — it eagerly runs in the browser and undermines resumability. Prefer useTask$() or event handlers.
• Anything captured inside a $ closure must be serializable. Non-serializable values (class instances, functions from outside) throw at runtime; use noSerialize() deliberately.
• routeLoader$ runs on every navigation to that route; cache with response headers or cacheControl in the request handler.
• Run npm run build and inspect the symbol/segment output — that's your real interactivity cost, not the page weight.

FAQ

Is Qwik just SSR like Next.js? No. Next hydrates by re-executing components in the browser. Qwik serializes app state into the HTML and resumes from it, so handlers load on demand rather than upfront.

Can I use React libraries? Many work via @builder.io/qwik-react, but each React island hydrates normally and forfeits resumability for that subtree.

Where does server$ run? On the server only; it's invoked over HTTP from the client and can safely access secrets and databases.