skills

Build, review, or refactor React UI components into shadcn-style compound components. Use when creating composable component APIs, splitting prop-heavy components into named parts, wrapping Radix/Base UI primitives, adding asChild/Slot behavior, designing data-slot styling hooks, or enforcing accessible source-owned component primitives.

Implement-review-fix loop for development tasks. Use when the user invokes $loop, says "loop", "loop this", "run the loop", "implement then review", "review/fix until clean", or otherwise asks Codex to keep cycling through implementation, review, fixes, and re-review until no actionable issues remain.

Evidence-first research workflow for external web/source research and internal codebase investigation. Use when the user invokes $research, asks to research, investigate, audit what exists, compare options, understand current implementation, gather evidence, inspect docs, look up current facts, or answer repo-grounded questions before implementation. Prefer optional parallel agents for broad, separable research lanes such as external sources, codebase evidence, docs, risks, and competitor or alternative analysis.

Bans AI-slop code fingerprints and reworks implementation to match problem scale. Removes narrating comments, section banners, premature factories/Managers/Utils, try/catch wallpaper, silent fallbacks, any/as-unknown-as escapes, speculative “future” APIs, hallucinated imports, and unrequested platform features. Use when the user says "unslop-code", "AI code slop", "overengineered AI code", or asks to strip Copilot/Cursor/ChatGPT-looking code patterns.

Bans AI-slop public UI copy and rewrites website/app text into plain language for humans. Removes empty marketing verbs, robotic microcopy, vague CTAs, apology-padded errors, and especially leaked internals — agent instructions, implementation criteria, schema/API names, TODOs, stack traces, and prompt residue rendered as user-facing strings. Use when the user says "unslop-copywriting", "unslop copy", "AI copy", "robotic copy", "plain language UI", or asks to fix microcopy, marketing copy, errors, empty states, or text that reads like it was written for machines.

Bans AI-slop frontend aesthetics and reworks UI so it does not look machine-made. Removes purple/indigo gradients, Inter-class defaults, cream-terracotta-serif convergence, glassmorphism, pill badges, three equal feature cards, glow effects, emoji chrome, fake social proof, and template landing/dashboard skeletons. Use when the user says "unslop-design", "AI design slop", "looks AI", "generic AI UI", or asks to make frontend design distinctive, human-crafted, or free of AI-looking patterns.

Bans AI-slop documentation and rewrites README/docs into plain, verifiable guidance for humans. Removes emoji headers, badge walls, labeled-bullet Features, marketing fluff, install/API claims that don't match the repo, changelog empty phrases, unfit CONTRIBUTING boilerplate, and prompt/chat leakage. Use when the user says "unslop-docs", "AI README", "docs slop", or asks to fix documentation that looks generated, vague, or inaccurate.

Build, review, debug, migrate, or plan Legend-State v3 applications with current docs. Use for @legendapp/state v3 beta, observable, useValue, observer, Memo, $React, useObservable, computed or linked observables, observe, when, batch, fine-grained React rendering, React Native, local persistence, syncObservable, synced, syncedCrud, syncedFetch, syncedQuery, Supabase, Firebase, Keel, offline-first sync, transforms, syncState, testing, performance, and v2-to-v3 migrations.

Finds and fixes maintainability problems across a whole codebase or a user-specified scope, with explicit support for TypeScript type safety. Removes duplication, code smells, excessive complexity, poor composition, oversized files, confusing names, dead code, weak boundaries, type hacks, unsafe assertions, suppressed errors, and inconsistent patterns. Use when the user says "unsmell", requests codebase cleanup or refactoring, asks to remove duplication or smells, or wants a targeted area made simpler, safer, and more maintainable.

Build, review, debug, test, migrate, secure, or deploy Elysia and ElysiaJS applications with current documentation. Use for Bun or Node Elysia servers, routes, schemas and validation, lifecycle hooks, plugins and scope, guards, macros, context extension, error handling, Eden Treaty, OpenAPI, WebSocket, SSE, runtime adapters, and production readiness.

Build, review, debug, migrate, or plan Effect v4 beta TypeScript code with current docs. Use for effect@beta, Effect, Effect.gen, Context.Service, Context.Reference, Layer, ManagedRuntime, Config, ConfigProvider, Scope, Fiber, Stream, Queue, Result, Cause, Schema v4, Schema.Class, Schema.TaggedErrorClass, Schema.decodeUnknown, Schema.encode, unstable modules, effect/unstable/http, platform packages, @effect/vitest, and Effect v3 to v4 migrations.

Build, review, debug, migrate, or plan Zod v4 validation and TypeScript schema code with current docs. Use for zod, zod/v4, zod/mini, zod/v4/core, parse, safeParse, parseAsync, safeParseAsync, z.infer, z.input, z.output, object schemas, records, enums, unions, refinements, check, transforms, codecs, preprocess, defaults, prefaults, catch, brands, readonly, error customization, error formatting, metadata, registries, JSON Schema, Zod Mini, library-author APIs, and Zod 3 to Zod 4 migrations.

Build, review, debug, migrate, or plan TanStack Store state management with current docs. Use for @tanstack/store, @tanstack/react-store, createStore, Store, ReadonlyStore, setState, subscribe, batch, flush, shallow, derived stores, createAtom, createAsyncAtom, useSelector, useStore migrations, useAtom, useCreateStore, useCreateAtom, createStoreContext, selector compare functions, immutable updates, actions factories, SSR-safe store lifetime, framework adapters, testing, and production state patterns.

Build, review, migrate, or debug React interfaces that use Base UI (`@base-ui/react`) unstyled accessible primitives. Use when the user asks about Base UI docs, component anatomy, styling, composition, render props, forms, dialogs, drawers, popovers, menus, selects, comboboxes, autocomplete, tabs, toast, accessibility, TypeScript wrapper types, or replacing lower-level UI primitives with Base UI.

Build, review, debug, migrate, or plan React applications and components using current React documentation. Use for React, React DOM, hooks, JSX, Server Components, Server Functions, Actions/forms, React Compiler, hydration, rendering roots, React 19 upgrades, or questions about modern React patterns and best practices.

Build, review, debug, configure, or migrate Tailwind CSS projects using current Tailwind documentation. Use for Tailwind CSS v4 utilities, CSS-first configuration, theme variables, Vite/PostCSS/CLI setup, source detection, variants, responsive design, dark mode, Preflight, custom utilities, @apply/@reference, Prettier class sorting, and v3-to-v4 upgrades.

Build, review, debug, migrate, or plan TanStack Form v1 React forms with current docs. Use for @tanstack/react-form, @tanstack/form-core, useForm, form.Field, createFormHook, createFormHookContexts, withForm, withFieldGroup, formOptions, form.Subscribe, useStore, validators, Standard Schema validation, Zod, Valibot, ArkType, Effect Schema, async validation, dynamic validation, array fields, FormGroup, linked fields, listeners, SSR, TanStack Start, Next.js, Remix, devtools, UI libraries, accessibility, and production form composition.

Build, review, debug, migrate, or plan TanStack Hotkeys keyboard shortcut systems with current docs. Use for @tanstack/react-hotkeys, @tanstack/hotkeys, useHotkey, useHotkeys, HotkeysProvider, useHotkeySequence, useHotkeySequences, useHotkeyRecorder, useHotkeySequenceRecorder, useHeldKeys, useHeldKeyCodes, useKeyHold, formatForDisplay, shortcut palettes, custom shortcut settings, key sequences, scoped hotkeys, input handling, preventDefault, stopPropagation, conflictBehavior, devtools, accessibility, SSR-safe React usage, and cross-platform Mod/Ctrl/Cmd shortcuts.

Build, review, debug, migrate, or plan TanStack Query v5 React server-state code with current docs. Use for @tanstack/react-query, QueryClient, QueryClientProvider, useQuery, useMutation, useInfiniteQuery, useQueries, queryOptions, mutationOptions, query keys, cache defaults, staleTime, gcTime, invalidation, optimistic updates, SSR, hydration, prefetching, router integration, suspense, persistence, devtools, ESLint rules, testing, TypeScript, and v4-to-v5 migrations.

Build, review, debug, configure, migrate, or plan TanStack Router React applications with current docs. Use for @tanstack/react-router, file-based routes, code-based routes, route trees, generated routeTree.gen files, typed navigation, Link/useNavigate/redirect, params, validateSearch, loaderDeps, loaders, beforeLoad, route context, auth guards, notFound, error boundaries, pending/deferred data, preloading, TanStack Query integration, SSR, testing, and production routing rewrites.

Build, review, debug, configure, migrate, or plan TanStack Start React applications with current docs. Use for TanStack Start, @tanstack/react-start, file-based routing, TanStack Router integration, Vite/Rsbuild setup, SSR, streaming, server functions, server routes, middleware, loaders, TanStack Query integration, environment variables, sessions/auth, deployment, hosting, and Next.js migrations.

Build, review, debug, migrate, or plan TanStack Table v9 beta React tables with current docs. Use for @tanstack/react-table@beta, @tanstack/table-core@beta, useTable, tableFeatures, createTableHook, createColumnHelper, ColumnDef, table state, external atoms, sorting, filtering, faceting, grouping, aggregation, expanding, pagination, row selection, row and column pinning, column visibility, column ordering, column sizing, column resizing, virtualization, devtools, worker row models, and v8-to-v9 migrations.

Orchestrator/subagent coordination workflow for tasks that can be split into clear disjoint work. Use when the user invokes $subagents, says "use subagents", "spawn agents", "parallelize this", "delegate this", "split this across agents", or asks for coordinated multi-agent work. Prefer subagents for harder tasks, broad research, multi-file changes, independent reviews, or separable implementation lanes. Skip subagents when the task is simple, the harness does not support them, or safe disjoint work cannot be identified.

Read-only brainstorming mode for exploring ideas, plans, architecture, debugging approaches, product decisions, research topics, codebase questions, and alternatives without mutating the user's codebase. Use when the user invokes $brainstorm, says "brainstorm", "brainstorming session", "let's think", "explore this", "research only", "read-only", or otherwise asks to discuss before implementation. Remain read-only until the user explicitly asks to implement, edit, write, apply, commit, install, or otherwise change state.

Motion design guidance for designing, auditing, specifying, prototyping, or implementing product UI animation. Use for websites, apps, SaaS products, UI components, microinteractions, page transitions, loading states, data visualizations, design systems, accessibility/reduced-motion review, performance-safe animation, and product-feel polish. Do not use for non-interactive video or film motion unless adapting it to interactive product UI.

Exhaustive planning interrogation for turning vague or complex requests into precise, implementation-ready plans. Use when the user invokes $ultraplan, says "ultraplan", "ultra plan", "deep plan", "plan mode", "ask me everything", "interrogate this", or asks the agent to resolve all requirements, use cases, edge cases, tradeoffs, and open questions before implementation.