[{"data":1,"prerenderedAt":181},["ShallowReactive",2],{"notes-index":3},[4,70,143],{"id":5,"title":6,"body":7,"date":58,"description":59,"draft":60,"extension":61,"image":62,"meta":63,"navigation":64,"path":65,"pillar":66,"seo":67,"stem":68,"tool":60,"__hash__":69},"notes\u002Fnotes\u002F2026-10-16-my-newest-speed-setup.md","My newest speed setup",{"type":8,"value":9,"toc":54},"minimark",[10,22,25,41,44],[11,12,13,14,21],"p",{},"My setup changed a bit. I now work with Claude Code in VS Code, and probably my newest discovery is\n",[15,16,20],"a",{"href":17,"rel":18},"https:\u002F\u002Fgithub.com\u002Fobra\u002Fsuperpowers",[19],"nofollow","Superpowers",". I mostly use the writing-plans skill and then let\nit develop subagent-driven in separate worktrees. That way three to four tickets get coded in\nparallel. It uses a lot of tokens, but I find the output really promising.",[11,23,24],{},"To keep the UI consistent, I rely on Storybook and run visual regression tests. On top of that, the\nCLAUDE.md states that every new component must have a story. This works quite well for me and helps\nme avoid unintended UI changes.",[26,27,28,29,28,37],"figure",{},"\n  ",[30,31],"img",{"src":32,"alt":33,"width":34,"height":35,"loading":36},"\u002Fimages\u002Fnotes\u002Fnewest-speed-setup\u002Fvisual-regression-diff.png","A failed Playwright toHaveScreenshot check: 0.01 of the pixels differ, with the actual and expected screenshots of an invite dialog side by side",1400,1366,"lazy",[38,39,40],"figcaption",{},"A visual regression test catching a change in a story before it ships.",[11,42,43],{},"I first created the wireframes in Claude Design, based on the specs I had at the start of the\nproject. Once that was sorted, I had a small, simple design system created — it lives in Storybook\ntoo, along with the design tokens. New components are now built directly in Claude Code using the\ntokens that are available.",[26,45,28,46,28,51],{},[30,47],{"src":48,"alt":49,"width":34,"height":50,"loading":36},"\u002Fimages\u002Fnotes\u002Fnewest-speed-setup\u002Fdesign-tokens.png","The design tokens page in Storybook: colour swatches for ink, muted, line, surface, surface-hover, ok, warn, bad, white and black, each with its hex value and usage count",1183,[38,52,53],{},"The colour tokens in Storybook, with how often each one is used.",{"title":55,"searchDepth":56,"depth":56,"links":57},"",3,[],"2026-10-16","Superpowers plans, subagents in parallel worktrees, and Storybook with visual regression tests to keep the UI in check.",false,"md",null,{},true,"\u002Fnotes\u002F2026-10-16-my-newest-speed-setup","BUILDING WITH AI",{"title":6,"description":59},"notes\u002F2026-10-16-my-newest-speed-setup","knpDBSJ9zdO5N1e5MMLJ9OQelM-JmPr43x56YSMI3lM",{"id":71,"title":72,"body":73,"date":136,"description":137,"draft":60,"extension":61,"image":62,"meta":138,"navigation":64,"path":139,"pillar":66,"seo":140,"stem":141,"tool":64,"__hash__":142},"notes\u002Fnotes\u002F2026-10-02-the-mcps-i-use-every-day.md","The MCPs I use every day",{"type":8,"value":74,"toc":134},[75,78,90,101,112,123],[11,76,77],{},"A short list of the MCP servers I use day to day, and why.",[11,79,80,84,85],{},[81,82,83],"strong",{},"Playwright."," Originally a tool for end-to-end testing in the frontend. But when the AI controls it,\nit gets a fully working browser that runs JavaScript. The cool part: if something is repetitive, the\nAI can just write a Playwright script instead of clicking through the whole flow by hand. That makes\nit way faster than using, for example, the Claude browser.\n",[15,86,89],{"href":87,"rel":88},"https:\u002F\u002Fplaywright.dev\u002Fdocs\u002Fgetting-started-mcp",[19],"Playwright MCP",[11,91,92,95,96],{},[81,93,94],{},"Notion."," Pretty straightforward: Notion is my second brain and Claude is my sparring partner. As\nsoon as Claude and I agree on something, Claude writes it to a Notion page.\n",[15,97,100],{"href":98,"rel":99},"https:\u002F\u002Fdevelopers.notion.com\u002Fguides\u002Fmcp\u002Foverview",[19],"Notion MCP",[11,102,103,106,107],{},[81,104,105],{},"Google Calendar."," Really cool in combination with Notion and Playwright. Say you need a set of\nappointments from a website and don't want to add them by hand: Claude first crawls them with\nPlaywright and then adds them to your calendar with a description.\n",[15,108,111],{"href":109,"rel":110},"https:\u002F\u002Fdevelopers.google.com\u002Fworkspace\u002Fcalendar\u002Fapi\u002Fguides\u002Fconfigure-mcp-server",[19],"Google Calendar MCP",[11,113,114,117,118],{},[81,115,116],{},"Linear."," Linear is a ticketing tool. I use the MCP during planning, or to give Claude Code the\ncontext of a ticket.\n",[15,119,122],{"href":120,"rel":121},"https:\u002F\u002Flinear.app\u002Fdocs\u002Fmcp",[19],"Linear MCP",[11,124,125,128,129],{},[81,126,127],{},"Mixpanel."," Mixpanel is an analytics tool that works for web and mobile apps, and The Tours has it\nimplemented. To find out how things are going, I just ask Claude, which looks it up in Mixpanel. It\ncan also build dedicated views, so if we decide we need to watch a certain behavior, Claude builds\none.\n",[15,130,133],{"href":131,"rel":132},"https:\u002F\u002Fdocs.mixpanel.com\u002Fdocs\u002Fmcp",[19],"Mixpanel MCP",{"title":55,"searchDepth":56,"depth":56,"links":135},[],"2026-10-02","A short list of the MCP servers I use day to day as a developer, and why each one earns its place.",{},"\u002Fnotes\u002F2026-10-02-the-mcps-i-use-every-day",{"title":72,"description":137},"notes\u002F2026-10-02-the-mcps-i-use-every-day","wR7aCpn9FEi3C3pxgm9Kks_ToN0uXVaXqTXqf2uK8uo",{"id":144,"title":145,"body":146,"date":174,"description":175,"draft":60,"extension":61,"image":62,"meta":176,"navigation":64,"path":177,"pillar":66,"seo":178,"stem":179,"tool":64,"__hash__":180},"notes\u002Fnotes\u002F2026-09-25-visualize-a-process-with-an-html-file.md","Visualize a process with an HTML file",{"type":8,"value":147,"toc":172},[148,151,161,164],[11,149,150],{},"If you have a complex pipeline inside your application it helps to visualize it to find unintended\nbehavior. So at the end of a build I ask the AI to draw the process for me as an interactive HTML\nfile. The prompt is straightforward.",[152,153,158],"pre",{"className":154,"code":156,"language":157,"meta":55},[155],"language-text","Visualize for me the process A with an interactive html file.\nShow what data is coming inside the process, what is happening during\nthe process and what is the output.\n","text",[159,160,156],"code",{"__ignoreMap":55},[11,162,163],{},"You get one throwaway file that shows what goes into each step, what happens inside it and what\ncomes out — and the step that does something you did not expect is usually obvious within a minute.\nHere is what it produced for the Matchmaker in The Tours.",[165,166],"ds-embed",{":breakout":167,":height":168,"caption":169,"src":170,"title":171},"true","640","Set a request at the top, then walk the stages — every number below is computed with the pipeline's own formulas.","\u002Fembeds\u002Fmatchmaker-process.html","The Matchmaker pipeline, step by step",{"title":55,"searchDepth":56,"depth":56,"links":173},[],"2026-09-25","A complex pipeline is easier to debug when you can see it. One throwaway HTML file does the job.",{},"\u002Fnotes\u002F2026-09-25-visualize-a-process-with-an-html-file",{"title":145,"description":175},"notes\u002F2026-09-25-visualize-a-process-with-an-html-file","42pWz36fKKHjvkpmih8HTg9hPXH2bKUWTRzaQiSWPPc",1792666225713]