Brisbane Based Front End Engineer

  • Accessibility
  • AI Workflows
  • Design Systems
  • DX
  • CI / CD
  • React
  • Typescript
  • UI / UX
  • Web Standards

I'm a Software Engineer specialising in the Front end space with a strong background in web and UI design.

Currently improving and maintaining a React component library for a large to mid enterprise app. The challenge has been supporting engineering with a solid system to lean on, while allowing design/product evolution. More recently that's meant building an AI workflow that enables cross team / cross discipline contributions.

Sam Watson

Display

Motion
Colour scheme
Contrast

Theme lab

This portfolio uses WebMCP. Requires Chrome 150+. An agent can use the apply_theme tool to customise the look and feel of this site. If you're feeling tech savvy, the easiest way to try it out is to follow the steps below. Good luck.

This site in its own designThe same page after an agent applied a theme
  1. Register the Chrome DevTools MCP server, including the experimental flag and arg.
    claude mcp add chrome-devtools -s user -- npx chrome-devtools-mcp@latest --category-experimental-webmcp --chrome-arg=--enable-features=WebMCP

    Or mcp.json

    {
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--category-experimental-webmcp",
        "--chrome-arg=--enable-features=WebMCP"
      ]
    }
  }
}
  2. Paste the following example prompt. Customise the brief as you like.
    Brief: Make me a Tony Hawk Pro Skater 2 menu screen theme.

Instructions:
- Use the chrome-devtools MCP
- Open https://samwato.dev
- List its WebMCP tools
- Call apply_theme tool with your theme

Don't overthink it. Be experimental. Don't verify with screenshots.
Create the theme based on the brief and send it.