---
name: qwik-resumable-builder
description: "Qwik + Qwik City — resumable apps with zero hydration cost. The fastest TTI in the React-like world. Builds Qwik apps with file-based routing, server$ functions, and the lazy-loading patterns that make Qwik faster than every other React framework."
license: MIT
---

# 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

```bash
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
```

```tsx
// 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.