← all publishers

catesandrew

@catesandrew source repo

Report this profile Claim this profile

• 52 skills
• 0 followers
• 9 hours ago last updated

1. ▌
   Tsdoc · catesandrew bundle

   Add expert-level inline TSDoc to staged TypeScript code. Use when the user wants exported APIs documented thoroughly, internal helpers documented concisely, and TSDoc blocks inserted directly into staged files without changing runtime behavior.
   0
   installs
2. ▌
   Swagger · catesandrew bundle

   Use when the user wants Swagger/OpenAPI JSDoc added or updated on Next.js App Router route handlers, or wants combined Swagger and TSDoc on the same route file.
   0
   installs
3. ▌
   Pr Gh Open · catesandrew bundle

   Use when the user says "open a PR", "create a pull request", or "submit a PR" against a GitHub repository and needs the branch pushed and PR created with a structured description, linked ticket, reviewers, and labels.
   0
   installs
4. ▌
   Zod Repair · catesandrew bundle

   Use when the user wants staged Zod schemas refactored safely, wants regression tests for init cycles, map/record behavior, union drift, or parse breakage, or wants schema cleanup without changing public contracts.
   0
   installs
5. ▌
   Pr Ado Open · catesandrew bundle

   Use when the user says "open a PR", "create a pull request", or "submit a PR" against an Azure DevOps repository and needs the branch pushed and PR created with a structured description, linked work items, reviewers, and auto-complete policy.
   0
   installs
6. ▌
   UI Engineer · catesandrew bundle

   Use when you need expert UI engineering assistance — implements production-ready frontend solutions with TypeScript, modern frameworks (React/Vue/Angular), accessibility, and performance best practices.
   0
   installs
7. ▌
   Session Wrap · catesandrew bundle

   Wrap up a working session into a durable dossier — a resume pointer for picking the work back up in a fresh session, a summary of what was done, lessons learned, architecture notes, ADRs for decisions, follow-ups, and a sanitized public blog post. Use at the end of a session, before context runs out, when handing off, or when the user says "wrap up", "close out this session", "document what we did", "write this up", "hand off", "end of session", or "blog post about this work".
   0
   installs
8. ▌
   Agent Browser · catesandrew bundle

   Use when navigating or interacting with web pages in the browser — opening URLs, clicking elements, filling forms, taking screenshots, scraping data, or automating any browser task.
   0
   installs
9. ▌
   AI Governance · catesandrew bundle

   Use when committing AI-assisted code or opening a pull request to add standardized AI attribution trailers, track session metrics, and generate a PR session report. Works with any AI coding agent.
   0
   installs
10. ▌
    Jira Estimate · catesandrew bundle

    Use when the user wants to estimate how long a Jira ticket would take for AI to implement, expressed as story points and AI time, based on codebase analysis and complexity scoring.
    0
    installs
11. ▌
    Commit Message · catesandrew bundle

    Generate a conventional commit message from staged git changes and recent Codex session context, then commit with that exact message. Use when the user wants the staged changes committed with a high-signal conventional message.
    0
    installs
12. ▌
    Nuqs Url State · catesandrew bundle

    Implement type-safe URL state management with nuqs for Next.js applications. Use when adding shareable/bookmarkable state to components, managing filters/search/pagination in URLs, or replacing useState with URL-backed state. Trigger on mentions of "nuqs", "URL state", "query params", "shareable links", "bookmark state", or when discussing replacing local state with URL state.
    0
    installs
13. ▌
    Spec Kit Skill · catesandrew bundle

    GitHub Spec-Kit integration for constitution-based spec-driven development. 7-phase workflow (constitution, specify, clarify, plan, tasks, analyze, implement). Use when working with spec-kit CLI, .specify/ directories, or creating specifications with constitution-driven development. Triggered by "spec-kit", "speckit", "constitution", "specify", references to .specify/ directory, or spec-kit commands.
    0
    installs
14. ▌
    Audit A11Y Code · catesandrew bundle

    Use when you need a static accessibility review of a component, template, or markup file — checks semantic structure, ARIA usage, keyboard access, forms, tables, and contrast against WCAG 2.1 AA.
    0
    installs
15. ▌
    Chrome Run Flow · catesandrew bundle

    Use when you need to execute a sequence of user interactions (click, type, select, check) and capture the resulting UI state via Chrome DevTools MCP — useful for validating micro-flows and capturing end states.
    0
    installs
16. ▌
    React Use State · catesandrew bundle

    Guide for correct useState and useReducer usage in React. Use when writing or reviewing state management code — especially for derived state, initializing state from props, functional updaters, one-time initializations, choosing between useState and useReducer, or when syncing state with useEffect (which is usually wrong).
    0
    installs
17. ▌
    Chrome Audit CSS · catesandrew bundle

    Use when you need to audit CSS cascade for a specific element via Chrome DevTools MCP — reveals computed styles, matching rules, specificity conflicts, and overridden/dead declarations.
    0
    installs
18. ▌
    Graph React Deps · catesandrew bundle

    Use when you need a Mermaid component dependency graph for a Next.js or React page — traces JSX usage, render props, and compound components recursively from a page entry point.
    0
    installs
19. ▌
    Procfile Manager · catesandrew bundle

    Manage multi-process dev stacks via Procfile. Detects Procfile in the project, parses process names, and routes start/stop/restart/logs through the appropriate runner (Overmind, foreman, hivemind). Use when starting services, checking logs, restarting processes, or managing the local dev stack.
    0
    installs
20. ▌
    Zustand Patterns · catesandrew bundle

    Guide for writing well-structured Zustand stores in React. Use when creating or reviewing Zustand stores — covering store organization, selectors, action patterns, combining stores with React Query or other hooks, and using React Context for scoped/reusable stores instead of global singletons.
    0
    installs
21. ▌
    Frontend Scaffold · catesandrew bundle

    Use when you need to generate or wire frontend plumbing — feature flags, environment variables, API endpoint clients, or logging setup — into an existing project, following the project's detected conventions rather than judging code quality.
    0
    installs
22. ▌
    Microservice Docs · catesandrew bundle

    Use when creating a new service, updating APIs, changing configs, modifying deployments, or when documentation is missing or outdated and needs comprehensive microservice documentation generated from static code analysis.
    0
    installs
23. ▌
    Pr Gh Code Review · catesandrew bundle

    Use when the user wants a thorough code review on a GitHub pull request, with inline comments posted directly to the PR via the GitHub CLI and API.
    0
    installs
24. ▌
    Scroll Video Site · catesandrew bundle

    Use when building a full-bleed, scroll-scrubbed video landing page — a single cinematic video file (an 8-40s continuous camera-move clip) sits fixed behind the page and scroll position maps directly to the video's `currentTime`, with synchronized chapter content, GSAP ScrollTrigger, Lenis smooth scrolling, and an optional autoplay "tour" control for hands-off viewing. Covers the ScrollVideo engine (RAF-damped playhead easing toward a ScrollTrigger-set target time, seek-coalescing so rapid scrubbing never queues stale seeks, `requestVideoFrameCallback` usage, StrictMode-safe video lifecycle, Safari/iOS quirks), wiring Lenis through GSAP's ticker instead of a second RAF loop, an Auto Tour control that pauses on any manual scroll input, and the anti-slop constraints that keep the interface from covering the film. Triggers on "scroll-scrubbed video", "video scrubbing scrolltrigger", "currentTime scroll sync", "cinematic scroll video landing page", "video background scroll site", "scrub video with scroll position"
    0
    installs
25. ▌
    Data Table Builder · catesandrew bundle

    Build React/Next.js data tables following the typed URL-state architecture with nuqs, useDataTable, column factories, and external cell components. Use when the user wants to create a new data table, refactor an existing table to follow architectural patterns, or add search/filtering/pagination to tables. Trigger on mentions of "table", "data table", "useDataTable", "nuqs", "column factory", "faceted filters", "table search", or when discussing React Table / TanStack Table implementations.
    0
    installs
26. ▌
    Pr Ado Code Review · catesandrew bundle

    Use when the user wants a thorough code review on an Azure DevOps pull request, with inline thread comments posted directly to the PR via the Azure CLI and ADO REST API.
    0
    installs
27. ▌
    Chrome Dump Storage · catesandrew bundle

    Use when you need to inspect browser storage state (localStorage, sessionStorage, cookies) after running a flow via Chrome DevTools MCP — useful for debugging authentication, feature flags, and persisted state.
    0
    installs
28. ▌
    Chrome Inspect A11Y · catesandrew bundle

    Use when you need a live accessibility snapshot of a running page or specific element via Chrome DevTools MCP — checks roles, names, relationships, keyboard focus, and contrast.
    0
    installs
29. ▌
    Dithered Motif Site · catesandrew bundle

    Use when building a "dithered particle-field" animated hero/background — a still or video subject made of many small discrete elements (sparks, falling ash, a rose window, a flock, crowds, falling particles, repeated architecture) rendered as an animated Bayer-dithered dot field on a canvas, with pointer-reactive warp, used as a full-bleed page background. Covers the whole manual pipeline: (1) writing Higgsfield `nano_banana_pro` image prompts and `seedance_2_0` (image-to-video) prompts whose SUBJECT is dither-compatible — the rule that a solid object (one face, one animal, one smooth mass) turns into an illegible grey blob and only "many small discrete elements" survives dithering, and that video prompts MUST demand a locked-off static camera or the loop becomes unusable; (2) ffmpeg frame extraction (~11fps, crop any painted border before scale, flatten background noise); (3) the canvas dither engine itself — downscale-to-buffer, Rec.709 luma, percentile auto-levels PINNED for the whole sequence (never recom
    0
    installs
30. ▌
    React Ref Callbacks · catesandrew bundle

    Guide for using callback refs instead of useRef + useEffect for DOM node interactions. Use when writing code that needs to focus, scroll, measure, or observe DOM nodes after render — especially with conditionally rendered elements. Covers React 19 ref cleanup functions, ResizeObserver in refs, and when to prefer ref callbacks over useEffect.
    0
    installs
31. ▌
    Chrome Audit Bundles · catesandrew bundle

    Use when you need to identify oversized JavaScript/CSS bundles and caching issues via Chrome DevTools MCP — surfaces heavy assets, missing cache headers, and protocol inefficiencies.
    0
    installs
32. ▌
    Chrome Audit Console · catesandrew bundle

    Use when you need to capture and categorize console warnings and errors during a reproduction window via Chrome DevTools MCP — useful for diagnosing runtime errors, React warnings, and failed network calls.
    0
    installs
33. ▌
    Chrome Audit Network · catesandrew bundle

    Use when you need to capture and summarize network activity for a page or user flow via Chrome DevTools MCP — identifies slow requests, large payloads, and API call patterns.
    0
    installs
34. ▌
    Design Critique Loop · catesandrew bundle

    Use when a frontend build needs to be iteratively judged on how it actually looks rendered, not just whether the code compiles or lints clean — a single page/component, or many built in parallel, each needing genuine visual polish rather than "plausible AI output." Covers the screenshot self-critique loop: a small headless-browser harness renders the real page at multiple viewports and scroll depths, the agent reads its own screenshots with vision and critiques them like a hostile design director, fixes what it finds, then adds one deliberate complexity upgrade so iteration converges on distinctive rather than bland-safe. Also covers scaling the same loop to N parallel builds: an orchestrator/builder split (one shared non-negotiable build standard + individually art-directed briefs per builder, no shared templates so outputs can't converge), a diversity constraint for growing a set over time, and a director role that does cold review with specific findings. Triggers on "critique this design", "does this look
    0
    installs
35. ▌
    React Hooks Closures · catesandrew bundle

    Guide for writing correct React hooks code that avoids stale closures. Use when writing or reviewing useEffect, useMemo, useCallback, or React.memo code — especially when dealing with dependency arrays, memoization, callback stability, or when someone asks about stale closures, stale state, or the "latest ref" pattern.
    0
    installs
36. ▌
    React Query Patterns · catesandrew bundle

    Guide for writing correct, performant TanStack React Query (v5) code. Use when writing or reviewing React Query code — covering query key design, mutations and cache invalidation, render optimizations (select, structural sharing, tracked queries), TypeScript type safety (queryOptions, zod validation), data transformations, staleTime tuning, and the mental model of treating server state as cache.
    0
    installs
37. ▌
    Reflect Instructions · catesandrew bundle

    Use when you need to analyze and improve an AI agent instruction file (AGENTS.md, CLAUDE.md, GEMINI.md, or similar) based on observed failure patterns, misunderstandings, or gaps in the current conversation.
    0
    installs
38. ▌
    Audit React Component · catesandrew bundle

    Use when you need a thorough review of a React component for hooks correctness, render performance, memoization, controlled vs uncontrolled inputs, and React 19 compatibility.
    0
    installs
39. ▌
    Frontend Quality Loop · catesandrew bundle

    Use when you want to iteratively raise the quality of frontend code to a satisfactory bar — auto-detects the stack from package.json, runs accessibility, performance, type-safety, and patterns/correctness lenses, applies fixes, and loops until the code is clean and verified.
    0
    installs
40. ▌
    Chrome Diff Screenshot · catesandrew bundle

    Use when you need to capture a screenshot for visual regression comparison via Chrome DevTools MCP — saves current state alongside a baseline for diffing with pixelmatch or similar tools.
    0
    installs
41. ▌
    Chrome Inspect Element · catesandrew bundle

    Use when you need to deeply inspect a single DOM element via Chrome DevTools MCP — retrieve computed styles, layout box, accessibility properties, outerHTML, and save a screenshot.
    0
    installs
42. ▌
    Typescript Type Safety · catesandrew bundle

    Guide for writing safer TypeScript using compiler flags, type patterns, and anti-pattern avoidance. Use when writing or reviewing TypeScript code — especially for index signatures, Record types, exhaustive switch statements, discriminated unions, const assertions, any containment, optional vs undefined semantics, or array type syntax choices.
    0
    installs
43. ▌
    Chrome Debug Screenshot · catesandrew bundle

    Use when Chrome DevTools MCP screenshot calls are failing or producing unexpected results — systematically diagnoses path, uid, frame, and clip parameter issues.
    0
    installs
44. ▌
    Graph React Render Tree · catesandrew bundle

    Use when you need an optimized, readable Mermaid render tree for a Next.js or React page — groups by folder, deduplicates nodes, annotates render-prop and compound-component edges, and identifies leaf nodes to mock in tests.
    0
    installs
45. ▌
    Tanstack Table Patterns · catesandrew bundle

    Guide for building production-grade tables with TanStack Table (v8) in React. Use when creating or reviewing data tables — covering the meta object pattern, editable tables, dynamic column schemas, row validation, backend integration (SWR/React Query), virtualization, infinite scrolling, shadcn DataTable components, and server-side implementation.
    0
    installs
46. ▌
    Chrome Audit Performance · catesandrew bundle

    Use when you need client-side performance metrics from a running page via Chrome DevTools MCP — captures navigation timing, Core Web Vitals (FCP, LCP), and largest resource contributors.
    0
    installs
47. ▌
    React Component Patterns · catesandrew bundle

    Guide for designing better React component APIs and structure. Use when writing or reviewing React components — especially for conditional rendering of multiple states, boolean prop flags, component composition, early returns, discriminated union props, or avoiding impossible states in component APIs.
    0
    installs
48. ▌
    Generate Angular Storybook · catesandrew bundle

    Use when you need to generate Angular Storybook harness component, CSF3 stories file, and MDX documentation for an Angular component — auto-derives paths and names from a single component file path.
    0
    installs
49. ▌
    Point Cloud Assembly Scene · catesandrew bundle

    Use when building a WebGL/Three.js scene where forms are made entirely of points sampled from parametric math (no imported geometry, no scans) that drift as loose dust and assemble into shape on scroll or interaction, then exhale back apart. Covers parametric point sampling (lathe/revolve profiles, swept UV surfaces, boolean plane-cut fractures, proportion over raw point count), a single shared `BufferGeometry` with per-point `home`/`dust`/`seed` custom attributes driven by one assembly uniform so N forms cost one draw call instead of N, cheap fake curl-noise turbulence for the dust field, cursor-reactive swirl, the `frustumCulled = false` requirement when real positions live in the vertex shader, and a documented sentinel-vector bug class where an animation target silently breaks in headless/no-pointer environments. Triggers on "point cloud effect", "particles assemble into shape", "procedural point cloud Three.js", "dust reveal animation", "GPU point cloud morph", "parametric geometry no assets", or buildin
    0
    installs
50. ▌
    Excel Like Table Navigation · catesandrew bundle

    Excel-like keyboard navigation for React tables — roving tabindex, a cell-registration system, arrow/Tab/Enter/Esc handling, and a two-layer core-hook + adapter design. Use when adding keyboard navigation to a data grid, wiring cell-to-cell focus movement, building inline-editable table cells, or making a table fully keyboard operable. Trigger on "keyboard navigation", "roving tabindex", "grid navigation", "arrow key table", "editable cell focus", or "accessible data grid".
    0
    installs
51. ▌
    React Query Cache Determinism · catesandrew bundle

    Deterministic React Query cache updates for CRUD mutations — cancel-in-flight, update all related caches, correct merge semantics (deep-merge for patch, replace for create), optimistic status for async jobs, rollback on error, and invalidate-only-on-error. Use when a mutation causes UI flicker, when list and detail views disagree after a write, when a patch response corrupts nested data, or when an async delete/job needs instant feedback. Trigger on "UI flicker", "stale after mutation", "optimistic update", "deep merge cache", "setQueryData", "cancelQueries", or "cache rollback".
    0
    installs
52. ▌
    Nextjs React Query Cache Coordination · catesandrew bundle

    Coordinate Next.js App Router caching layers with React Query to guarantee read-your-own-writes — covers Router Cache vs Data Cache, updateTag vs revalidateTag, hydration timestamp races, initialData vs placeholderData pitfalls, and monotonic cache timestamps. Use when a user saves data that then reverts on navigation, when a mutation's result doesn't survive a route change, or when debugging stale UI after a successful write. Trigger on "saved but reverted", "read your own writes", "stale after mutation", "revalidateTag", "updateTag", "HydrationBoundary", or "initialData stale".
    0
    installs