kru

WCAG 2.1 AA accessibility audit of a design or page — keyboard navigation, focus order, touch target size, screen reader/ARIA. Color contrast is the design's, and is audited nowhere on this team. Report-only unless fixes are asked for.

Build, debug, or review Cloudflare Agents SDK applications using the agents package.

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building one.

Use when building or reviewing an API that code you don't own calls — a versioned public or API-key surface, the key minting and auth in front of it, the webhooks your app sends, list pagination and incremental sync, or an idempotent write. The traps no test of yours catches because they break in the integrator's code months later — a bare array that can never grow a field, a DB row serialized straight to the wire, a new enum value that throws in someone's exhaustive switch, a key format half of whose keys misparse, an HMAC keyed with the `whsec_` string instead of its bytes, a `since` filter that never shows a refund — with keys, webhooks, pagination and writes in `reference/`. Sending webhooks only; receiving a provider's is that provider's seat.

Ark UI headless-component reference every UI builder loads for accessible interactive primitives — dialog/modal, dropdown/menu, combobox, select, date-picker, tabs, tooltip, popover, toast, and the rest of Ark's catalog on Zag.js state machines, across React / Vue / Solid / Svelte. Covers when to reach for Ark vs. the repo's existing lib, compound-component part anatomy, the built-in a11y surface (ARIA/focus/keyboard) and how not to defeat it, and the styling hookup (data-attributes / CSS vars) onto the design system's tokens. Use when a feature needs an interactive UI primitive built accessibly instead of hand-rolled — reach for it on the complex ones (overlays, form controls, date pickers), not a styled button. This is ambient component craft woven into the route you're already building — not a separate hand-off.

Grill a change to the studs, then persist the account of it — what lands, blast radius, ship cadence, decisions, non-goals, done-when — as `plan/<effort>/brief.md` in the plan store. Re-run on an effort to reconcile its brief against what actually shipped.

Check every brief against what shipped — tick, archive, or resume the effort the user picks.

Discover and choose Cloudflare products for apps, APIs, AI agents, storage, networking, and security. Use for architecture and product selection, including when the user describes a need without naming a Cloudflare product; then find the relevant skill or documentation.

Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.

Audit the comments in a target — working tree, path, branch or PR — and fix them in place.

Composition — how a screen's parts relate (grouping by space, hierarchy, alignment, width) and, when values are being chosen, the craft of choosing them (color, type, depth, finish). Load when drafting an artboard or canvas direction, laying out a screen, section or card, or checking one that reads flat or cluttered.

Conform on React — the `required` message that never fires because `""` is stripped to `undefined` before validation, a `.default()` that turns a cleared field into a silent success, a `reply()` that echoes the submitted password back into the HTML, an intent submission whose `status` is `undefined` and whose `value` doesn't exist, and two parallel APIs (`@conform-to/react` vs `/future`) that the docs teach side by side. Use when writing or reviewing a React form action/server function, a `useForm` call, or form components in a repo with `@conform-to/react` in `package.json`. Conform 1.x with Zod 4; not React Hook Form, not TanStack Form.

Write a marketing page's argument and its copy — the section order, the headline, the proof — as a deck the design canvas and a UI builder mount verbatim.

When the user wants to edit, review, or improve existing marketing copy, or refresh outdated content. Also use when the user mentions 'edit this copy,' 'review my copy,' 'copy feedback,' 'proofread,' 'polish this,' 'make this better,' 'copy sweep,' 'tighten this up,' 'this reads awkwardly,' 'clean up this text,' 'too wordy,' 'sharpen the messaging,' 'refresh this content,' 'update this page,' 'this content is outdated,' or 'content audit.' Use this when the user already has copy and wants it improved or refreshed rather than rewritten from scratch. For writing new copy, see copywriting.

When the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user says "write copy for," "improve this copy," "rewrite this page," "marketing copy," "headline help," "CTA copy," "value proposition," "tagline," "subheadline," "hero section copy," "above the fold," "this copy is weak," "make this more compelling," or "help me describe my product." Use this whenever someone is working on website text that needs to persuade or convert. For email copy, see emails. For popup copy, see popups. For editing existing copy, see copy-editing. For the offer underneath the copy (bonuses, guarantees, value framing), see offers.

When the user wants to optimize, improve, or increase conversions on any marketing page or form — including homepage, landing pages, pricing pages, feature pages, lead capture forms, or contact forms. Also use when the user says 'CRO,' 'conversion rate optimization,' 'this page isn't converting,' 'improve conversions,' 'why isn't this page working,' 'my landing page sucks,' 'form abandonment,' 'nobody's converting,' 'low conversion rate,' or 'this page needs work.' Use this even if the user just shares a URL and asks for feedback. For signup/registration flows, see signup. For post-signup activation, see onboarding. For popups/modals, see popups.

The in-repo component gallery — every component and its states on the app's own dev server, maintained as ordinary app code.

The shape of a design system before its values exist — the seven foundations (color · typography · size · elevation · motion · primitives · shells) and whether each is whole. `create` writes that shape at bootstrap as source emitting a token file with every value `UNSET`; `audit` runs the rubric over an existing system and returns what has no set, what has no rule, and what spends a value off its ladder. Reach for it on a coverage read, or when the question is what a design system is missing rather than what it has.

Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.

Audit the human-facing doc prose in a target — README, DEPLOY, CONTRIBUTING, docs/ — and fix it in place.

Build and sharpen a project's domain model. Use when the user wants to pin down domain terminology or a ubiquitous language, record an architectural decision, or when another skill needs to maintain the domain model.

Drizzle ORM recipes for the Postgres and SQLite dialects — the version split between what npm installs and what orm.drizzle.team documents, reading the SQL `drizzle-kit generate` writes before it ships (its SQLite table rebuild deletes child rows), `generate`+`migrate` vs `push`, the connection settings Drizzle does not set for you, and relational queries vs joins. Use when writing or reviewing a Drizzle schema, a drizzle-kit migration, or a query built with Drizzle, in either the pg or sqlite dialect. Not MySQL, not Prisma.

Build, debug, or review Cloudflare Durable Objects code for persistent state and coordination.

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

Search a codebase or UI for places that don't animate but should, and reject everything that shouldn't. Read-only; it proposes motion with exact values, it does not implement it. Use when the user asks "what could be animated here?" or wants to "make this feel more alive". For fixing existing animations, use improve-animations or review-animations instead.

Use when writing or reviewing a Go `net/http` handler, middleware, JSON contract, session/CSRF code, `database/sql` call, or `_test.go` in a repo with a `go.mod`. The traps that compile, pass `vet` and ship quiet — a nil slice serializing as JSON `null`, `http.Error` not ending the handler, a map race that is `fatal` and skips `recover`, a goroutine dying with the request because it took `r.Context()`, `omitempty` keeping a zero `time.Time` while dropping `false` — with the security, `database/sql`, test-gate and version-gate halves in `reference/`. Go 1.22+ on the stdlib; not Gin/Echo/Fiber internals, not gRPC.

Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.

Survey a codebase's animation and motion code as a senior motion advisor, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper models) to execute. Read-only on source code — it plans improvements, it does not apply them. Use when the user asks to "improve the animations", "audit the motion", "make this app feel better", or wants a roadmap of animation fixes rather than a review of a single diff.

Incentives — everyone who meets a design acts on their own payoff, so design for what they'll actually do rather than the intended path. Load when a choice depends on someone taking the extra step, the honest route or the careful one: an ask in a flow, an abuse case, a public contract, a test's assertion, a finding's severity, a claim's proof, a number to optimize.

Open a defect file in the project's plan store from what the user just said, un-investigated. The user's front door to issues/, for when no task is running to sweep from.

Work the project's known defects — reconcile issues/ against the code, size each fix, propose a batch, and fix what the user picks.

The PR for this session's branch merged — verify it on GitHub, sync the base branch, retire the branch.

Landing page structure — which sections a marketing page gets, in what order, and the SECTION deck a design agent and a UI builder mount verbatim. Places the visitor by awareness stage × market sophistication before a template is picked, and attaches each proof to the claim it clears. Use when a landing, home, pricing, feature or about page needs its structure and its copy; when copy exists but its order doesn't argue; when asked what sections a page should have; or before a marketing page is dispatched to design or build. Sentence craft is `copywriting`, line edits `copy-editing`, a post-ship audit `cro`.

How this engineering team works — load before building, reviewing or dispatching any seat. Also the entry for a project from scratch and for planning work past one context.

Drive the running local dev app in a real browser at localhost — QA a change, reproduce a UI bug, measure rendered DOM and computed styles. Use whenever the target URL is localhost.

Curated Baseline reference for which native CSS features are safe to reach for now — container queries, :has(), nesting, subgrid, color-mix()/relative colors/light-dark(), @starting-style transitions, scroll-driven animation, view transitions, @scope, and more. Use before writing CSS that would otherwise reach for a JS workaround, an extra wrapper element, a preprocessor trick, or an older hack — check whether native CSS now does it. Curates Baseline 2023-2025 (web.dev/baseline); for anything newer or unlisted, verify live rather than guessing.

Baseline judgment for native HTML — which platform elements and attributes now do a job that used to need a library or hand-rolled JS. Covers <dialog> vs the popover attribute, invoker commands, exclusive <details> accordions, inert, constraint validation and :user-invalid, <output>, <search>, and the loading/priority hints. Use before reaching for a headless primitive, a wrapper element, or JS for something the platform now ships.

Neon's serverless driver seam — the `poolQueryViaFetch` flag that decides whether a query travels over WebSocket or HTTP and the pool listener that turns it off, the error class and the Postgres `code` the HTTP path erases, pooled vs direct endpoints and which consumer takes which, `webSocketConstructor` by Node version, and Drizzle's Neon transaction leaking a pool slot. Use when wiring or debugging `@neondatabase/serverless` — an intermittent `Connection terminated unexpectedly`, a `23505` branch that stopped matching, a migration that ran against the wrong endpoint. Schema and SQL are `postgres`'s; provisioning and branching are the platform seat's.

Build, migrate, and deploy Next.js apps on Cloudflare Workers with vinext. Use when starting a Next.js project on Cloudflare, moving an existing app to Workers, choosing between vinext and OpenNext, or setting up vinext for Workers. For setup, migration, or deployment, install vinext's upstream skills with `npx skills add cloudflare/vinext` if missing, then read and follow the applicable skill and docs.

Panda CSS recipes — what the build-time extractor can and cannot see (it reads source text, never types), the config recipe whose runtime variant ships a class with no rule, `cx` conflicts resolved by sheet order instead of argument order, the `include` globs that silently skip `app/` and `.svelte`, `strictTokens` as a type-only gate, and the `_dark` condition that only matches `.dark`. Use when writing or reviewing styles in a repo with a `panda.config.*` / `styled-system/` directory, wiring Panda into a build, or debugging a Panda style that renders with no CSS. Not Tailwind, not vanilla-extract, not StyleX.

Postgres engine recipes — the migration that queues every read behind its lock, the DDL orderings that keep a live table open (NOT VALID then VALIDATE, a CHECK before SET NOT NULL, a volatile default that rewrites the table, CREATE INDEX CONCURRENTLY and the INVALID index a failed one leaves), enum values that can't be dropped, and the column types to default to. Use when writing or reviewing a Postgres schema, migration, or query. Postgres-the-server only; the ORM layer is `drizzle`'s.

Carry a plugin change out to every repo it reaches — the files /kru:setup wrote, patched per repo and pushed after one confirm.

Audit the strings a target renders to the user — labels, helper text, errors, empty states, CTAs, confirms, catalogs — and fix them in place.

Use when writing or reviewing Python in a repo with a `pyproject.toml` or `.py` files — an MCP server, a library, a CLI, packaging, or a `test_*.py`. The failures that pass `ruff` and `mypy` and ship quiet: a lint rule that skips every `_`-prefixed name, `x or default` eating a legitimate `0`, an `except` that returns a plausible value, a `dict` return annotation that silently drops structured output, a wheel that builds green and ships none of your package. MCP-server, packaging and test-mechanics halves in `reference/`. Python 3.10+ on the stdlib; not Django/Flask internals, not notebooks.

React Email — an unresolved Tailwind class that ships as a bare `class=` with no style, `rem` units without `pixelBasedPreset`, `render()` returning a Promise that stringifies to `[object Promise]`, a plain-text part that drops the preview and runs table columns together, `<Markdown>` passing raw HTML and `javascript:` links through, and a relative image that works in the preview server and ships broken. Use when writing or reviewing an email template, a `render()` call, or the code that sends one, in a repo with `react-email` or `@react-email/*` in `package.json`. React Email 6; not MJML, not jsx-email.

React Hook Form on React — a submit button that stays disabled on a valid form because `!isDirty || !isValid` short-circuits before the Proxy subscribes, `<input type="number">` submitting the string `"42"`, two same-named checkboxes submitting `false` where the schema expects `[]`, `register('x', { disabled: true })` dropping the key from the payload entirely, and `handleSubmit` calling `preventDefault()` so a `<form action={serverAction}>` never runs. Use when writing or reviewing a React form, a `useForm` call, or form components in a repo with `react-hook-form` in `package.json`. RHF 7.x with Zod 4 via `@hookform/resolvers`; not Conform, not TanStack Form.

Build applications with React Router in Framework, Data, Declarative, and unstable RSC modes. Use when configuring routes, route modules, loaders, actions, forms, fetchers, navigation, pending UI, SSR/SPA/pre-rendering, middleware, URL params/search params, or React Router upgrades.

Every seat on the repo's sheet looks back over a target — working tree, commit, branch, PR, or the code as it stands — then the lead scopes, slices and partitions the fixes and lands them.

Capture a preference or a liked pattern into the team's cross-project inbox, to be swept back into the team later. The user-facing write half of the preference loop.