pracht

Detect environment variables and secrets that leak from the server into the client bundle via loader return values, hydration state, or accidental imports of server-only modules from client code paths. Use when asked to "audit secrets", "find leaked env vars", "is my API key exposed", "check client bundle for secrets", or "scan for credential leaks".

Audit pracht route loaders for serializability, leaked secrets, unsafe loader caching, browser-only API misuse, and missing AbortSignal plumbing. Use when asked to "audit loaders", "check loader data", "find serialization bugs", "are my loaders safe", or "loader security review".

Pracht deployment guide. Walks through adapter configuration, building, and deploying to Node.js, Cloudflare Workers, or Vercel. Handles wrangler config, Docker and production checklist. Use when asked to "deploy", "set up deployment", "configure adapter", "deploy to cloudflare", "deploy to vercel", or "production build".

Adapter-aware pre-deployment checklist for pracht apps targeting Node, Cloudflare Workers, or Vercel. Catches the issues that only surface in the production runtime: missing env vars, Node-only APIs in Cloudflare bundles, ISG manifest absence, oversized edge bundles, missing wrangler/vercel config. Use when asked to "pre-deploy check", "ready to ship?", "deployment checklist", "is my build production-safe", or before running `wrangler deploy` / `vercel deploy`.

Recommend the right pracht render mode (ssg, isg, ssr, spa) for each route based on what its loader actually does. Most apps pick a mode once and never revisit; this skill surfaces routes that are mis-tuned. Use when asked to "tune render modes", "make my site faster", "should this route be SSG", "audit render modes", or "review SSG/ISG/SSR choices".

Migrate a Next.js application to Pracht. Converts App Router pages, layouts, middleware, API routes, data fetching, and metadata to pracht equivalents. Handles React→Preact, className→class, server components→loaders, and manifest wiring. Use when asked to "migrate from next", "convert next.js app", "port from next to pracht", "nextjs migration", or "switch from next".

Add or maintain pracht typed routes, typed links, route-object navigation, and generated href helpers. Use when asked to "add typed routes", "fix typed links", "replace hard-coded hrefs", "run typegen", or make navigation route-id based instead of string based.

Pracht framework-aware debugging. Systematically investigates route matching, loader/API route errors, rendering issues, middleware, API routes, HMR, and build problems. Uses pracht's architecture knowledge to find root causes fast. Use when asked to "debug this", "fix this bug", "why is this broken", "blank page", "hydration mismatch", or "404 on my route". Proactively suggest when the user reports errors or unexpected behavior in a pracht application.

Per-route accessibility audit for a pracht app. Drives a headless browser through every route in the manifest, runs axe-core, and reports issues grouped by severity and route. Catches alt-text gaps, contrast failures, missing landmarks, focus-order bugs, and form-label problems. Use when asked to "audit a11y", "check accessibility", "axe my app", "WCAG compliance", or "screen reader test".

Analyze a pracht production build. Report client bundle size per route, flag fat vendor chunks, find route components that ship large dependencies, and suggest dynamic `import()` and prefetch strategies based on observed navigation patterns. Use when asked to "audit bundles", "why is my JS so big", "bundle size per route", "what's in my vendor chunk", or "tune prefetching".

Drop session-based auth into a pracht app following the framework's recommended pattern (middleware checks the session, loaders read user info, API routes mutate it). Generates session utilities, the auth middleware, login/logout/signup API routes, and the matching `<Form>`-driven pages — then wires the manifest with public vs. protected groups. Use when asked to "add auth", "set up login", "wire authentication", "add session middleware", or "I need users".

Wire internationalization into a pracht app following the framework's recommended pattern (middleware detects locale, loaders return translations, components consume via route data). Generates locale dictionaries, the detection middleware (URL-prefix, cookie, or `Accept-Language`), and a helper for in-component translation. Use when asked to "add i18n", "set up translations", "make my app multilingual", "add locale routing", or "extract strings".

Wire error tracking, request tracing, and Web Vitals into a pracht app. Supports Sentry or OpenTelemetry on the server side (loader/middleware boundaries, API routes), and client-side Web Vitals reporting via the `web-vitals` package. Use when asked to "add observability", "wire Sentry", "set up tracing", "add OpenTelemetry", "monitor Web Vitals", or "track errors".

Find open-redirect vulnerabilities in pracht loaders, middleware, and navigation calls. The framework already rejects unsafe URL schemes (javascript:, data:, vbscript:, blob:, file:) on the client (commit 901ef5b) but a server-issued cross-origin redirect can still phish your users. Use when asked to "audit redirects", "check for open redirects", "is my ?redirect= param safe", or "review login redirect handling".

Pracht code scaffolding. Prefer the framework-native CLI generators (`pracht generate route|shell|middleware|api`) and only fall back to manual edits when the CLI flags cannot express the requested shape. Knows pracht conventions (Preact idioms, render modes, route manifest). Use when asked to "scaffold", "generate a route", "create a new page", "add middleware", "add an API route", or "create a shell".

Scaffold Vitest unit/integration tests for pracht routes, loaders, and middleware. Asks the user once whether to use vitest browser mode with `vitest-browser-preact` (real DOM, real events) or classic JSDOM-based tests with `@testing-library/preact`. Wires `vitest.config.ts`, mocks `LoaderArgs`, and emits ready-to-run files. Use when asked to "scaffold tests", "set up Vitest", "add unit tests", "test this loader", or "test this route".

Audit per-route security header coverage in a pracht app. Verifies that `applyDefaultSecurityHeaders` (or equivalent custom `headers()` exports) protect every user-facing response, and suggests a Content-Security-Policy derived from the project's actual asset and connect origins. Use when asked to "audit security headers", "check CSP", "harden headers", "set up HSTS", or "review header policy".

Scaffold Playwright end-to-end tests for a pracht app: install Playwright, generate `playwright.config.ts` that boots `pracht dev` (or `pracht production runtime), and emit a smoke test for every route in the manifest that asserts 200, head/title, no console errors, and basic navigation. Use when asked to "scaffold E2E", "set up Playwright", "add browser tests", or "create smoke tests for my routes".

Wire Drizzle ORM into a pracht app. Asks the user which database to target (Cloudflare D1, PlanetScale, Neon, Supabase, Turso, Postgres, MySQL, SQLite, ...) and generates the matching driver setup, schema scaffold, migration workflow, and a typed client accessible from loaders, middleware, and API routes. Use when asked to "add database", "set up Drizzle", "wire D1", "add Postgres", "set up an ORM", or "I need a DB".

Inventory every form submission and mutation API in the project, then verify the CSRF posture matches pracht's recommended layers (`SameSite` cookie +/- origin-check middleware +/- token). Pracht ships no built-in CSRF; the defense lives in your cookie strategy and threat model. Use when asked to "audit CSRF", "check CSRF protection", "are forms safe", "review session security", or after enabling cross-origin form usage.

Audit pracht shells for composition bugs: missing `Loading()` on SPA-using shells, accidental `<html>`/`<head>`/`<body>` rendering, shells that swallow children, unused shells, and misplaced `ErrorBoundary` exports (which belong on routes, not shells). Use when asked to "audit shells", "check shell composition", "find unused shells", or "is my layout structured correctly".

Find pracht routes that look protected but aren't — missing auth middleware, middleware that augments context but never gates, client-side auth checks with no server enforcement, and API mutations exposed without guards. Use when asked to "audit auth", "check route protection", "is my dashboard protected", "find unauthenticated routes", or "review middleware coverage".

Run a dependency vulnerability audit and map each finding to the pracht routes, loaders, middleware, or API handlers that import the affected package — so users know which surface area they need to test after upgrading. Use when asked to "audit deps", "scan for CVEs", "which routes use this vulnerable package", "npm audit", or "dependency security review".

Per-route SEO audit for a pracht app: `head()` coverage, title/description presence, Open Graph and Twitter card completeness, canonical URLs, robots rules, and a generated `sitemap.xml` derived from the route manifest. Use when asked to "audit SEO", "check meta tags", "generate a sitemap", "are my OG cards set", or "review robots.txt".

Auto-generate Vitest request/response tests for every handler in `src/api/`. Each test instantiates a `Request`, calls the exported HTTP method handler directly, and asserts on the returned `Response` — no server boot required. Use when asked to "test my API routes", "scaffold API tests", "generate tests for src/api", or "add tests for this endpoint".