个人作者
Adam Bulmer
Working at @monzo, Previously worked at Moonpig, @booking and @bbc
- Skills
- 134
- 仓库
- 2
- 职业覆盖
- 7
- 场景覆盖
- 5
- Stars
- ★ 38
Adam Bulmer 的 Skills 134
xstate
WHEN React state changes in response to an external answer — async submit, in-flight or loading flags, retries, cancellation, polling, optimistic updates, stale responses — or to an interaction with an interruptible middle, such as a drag or a gesture; or WHEN building, reviewing, testing, or visualising XState 5 actors and @xstate/react integrations; NOT for a value one event sets completely, such as a text draft, a focus flag, or a plain open and closed toggle; models typed lifecycles and renders legal Mermaid stateDiagram-v2 charts.
web-design
WHEN refining UI layout, typography, color, or polish; NOT code implementation; provides concise principles for intentional, legible design.
tailwind
USE WHEN writing, fixing or reviewing styling in a project that uses Tailwind CSS, even a one-class change or a request that does not name Tailwind: colours, focus rings, spacing, class names chosen by a prop, map or CVA variants, theme tokens and dark mode in the Tailwind stylesheet or tailwind.config, setup or upgrades (if unsure whether the project uses Tailwind, check package.json or the main stylesheet first); NOT WHEN writing plain CSS or Sass in a project without Tailwind; produces class names Tailwind can find, syntax for the installed major version, visible focus indicators, and no unrequested dependency or invented brand value.
refactoring
WHEN you need a plan to refactor, restructure, or clean up working code and the test result is known, either green or a recorded failing set; NOT for new feature delivery or any behavior change; reversible-baseline safety with prioritized improvements.
react
USE WHEN changing the logic, data, props, state, Effects or rendered text of a React component, hook or page, even a one-line change; NOT WHEN the request is styling only (class names, Tailwind, CSS, dark mode, spacing, shadows) or tests only, or when it models submit, in-flight, loading, retry or failure states, even for a named React form (xstate covers that, including its React wiring); applies React 19 composition, state, Effect, structure, API and performance rules with only the project's installed libraries.
react-testing
USE WHEN writing, fixing or reviewing a React Testing Library test for a component, hook or context provider, even one small test, or when asked for an end-to-end journey inside a Vitest or React Testing Library suite; NOT WHEN changing the component itself (react), testing XState actors or @xstate/react (xstate), or writing a Playwright or Cypress test; covers renderHook, providers, async results, forms and false-pass anti-patterns, and declines end-to-end journeys with the testable slices.
frontend-testing
USE WHEN testing non-React UI (vanilla JavaScript or TypeScript DOM code, a web component, or a Vue, Svelte or Angular component) with DOM Testing Library in Vitest or Jest with jsdom: writing, fixing or reviewing a test, or a request to add an end-to-end journey or a layout check to that suite; NOT WHEN the code or project uses React or React Testing Library (use web:react-testing), for XState actors (web:xstate), or for Playwright, Cypress or screenshot-comparison work in a real browser; covers queries, accessible names, userEvent, async results, network stubs and assertions that pass for the wrong reason, and declines what jsdom cannot prove while offering the part that fits.
css
USE WHEN writing, fixing or reviewing plain CSS or Sass for a web page, even a one-line change, including a rule that loses to another, a third-party stylesheet you cannot edit, units, spacing between components, shorthands, skip links, hidden and focus styles, or deleting styles that look unused; NOT WHEN the project uses Tailwind (tailwind.config.js, utility classes, CVA variants, Tailwind theme tokens); produces CSS that wins the cascade without ID selectors or reactive !important, scales with the reader's text size, keeps spacing in the parent and deletes styles only on evidence.
chatgpt-app-sdk
WHEN building ChatGPT apps using the OpenAI Apps SDK and MCP; NOT for OpenAI API chat completions, agent frameworks, or MCP servers with no ChatGPT widget; create conversational, composable experiences with proper UX, UI, state management, and server patterns.
browser-testing
WHEN authoring or repairing real-browser journeys or automated screenshot comparisons with the project's selected runner; NOT DOM-only tests, interactive visual judgement or verification-recipe maintenance; provides native-runner fixtures, assertions and visual-comparison guidance.
typescript
WHEN writing or reviewing TypeScript, defining types/schemas, or building type-safe apps; NOT for JavaScript-only files, framework architecture choices, or bundler configuration; outputs strict, schema-first, production-ready code.
mermaid-generator
WHEN creating Mermaid diagrams from code or architecture; NOT for diagrams without a code or system-design source; analyzes the relevant structure and returns a scoped, renderable diagram with evidence and assumptions.
story-pr-orchestrator
WHEN delivering an approved multi-story feature or several specs as dependency-gated pull requests; NOT for a single story, product discovery, or generic task delegation; coordinates one isolated task, worktree, branch, and PR per ready story.
status-updates
WHEN drafting a status update, progress report, sprint summary, or launch update for a manager, exec, team, or stakeholder in Slack, email, or a doc; NOT for PR descriptions, commit messages, or meeting minutes; runs intake, grounds every claim in supplied evidence, and returns a scannable, honest update with named recognition.
meeting-to-action-brief
WHEN turning a completed or live meeting, transcript, recording, or notes into a concise decision-and-action brief; NOT for verbatim minutes, drafting requirements, tracing decision lineage, or reviewing implementation; preserves proposals, uncertainty, and provenance.
design-handover
WHEN explicitly asked to use design-handover; NOT for general visual polish or implementation; packages accepted behavior and matching visual evidence.
decision-trace
WHEN tracing a decision or delivery-status claim from a meeting, transcript, decision record, handover, or status document through specs, issues, PRs, and commits; NOT for meeting summaries, acceptance verdicts, or implementation; preserves source uncertainty, grades each delivery handoff, and prepares an acceptance-review contract.
principle-write-cold-handovers
WHEN delegating, pausing, or writing a brief or specification another agent will execute; NOT for resuming from an existing handover or bounding reads within a session; produces a handover a fresh agent can act on with nothing more.